The Structure Of CSS – A User Guide, with Code Examples
CSS (Cascading Stylesheets), has to be correctly structured and laid-out, in order for it to work as you intended…
CSS is at the heart of modern web page design.
Whilst it’s actually the HTML which defines and provides the content and structure of each page, it is the CSS which dictates the layout, presentation, and ultimately the design and feel of every page we view on the world wide web.
Through use of CSS, web designers can quickly and easily assign colours, fonts, sizes, layouts, backgrounds, roll-over effects and all manner of other enhancements to ensure that their websites are presented to us exactly as they intended.
All of the styling, text placement, shapes, font colourings and more which you can see on a website such as BuildInstructions.com – is controlled by CSS.
Unlike HTML, CSS does not make use of tags or angled brackets to denote its markup and purpose. Instead, CSS uses CSS Rules made up of a selector and a corresponding declaration, to identify specific parts of the web page content and alter their characteristics (colour, appearance, format, size, positioning etc.).
The first part of any CSS rule always identifies the HTML element(s) which are to be altered or styled accordingly. This part is known as a selector. The second part of any CSS rule, the declaration, indicates how those selected elements should be styled or formatted.
A typical declaration itself consists of two parts. The first is a property which indicates the aspects or CSS properties of the element to be altered (e.g. colour, font size). And the second is a value, which specifies the value that that property or styling should take.
The Structure Of CSS – An Example written in CSS
EXAMPLE CODE:
p {font-size: 12px;}
DESCRIPTION:
A single CSS rule is declared.
The selector in this case is “p”, which identifies and selects the <p></p> element in the linked HTML document which is to be altered.
In this case, the only property to be styled is the font-size, which is given a value of 12px. Thus the web browser will know to display all text within any <p></p> paragraph elements, at 12px.
Note: The element selector is written on its own, whereas the declaration is placed within curly-brackets.
The Structure Of CSS – A Second Example written in CSS
EXAMPLE CODE:
h1, h2, h3 {font-family: Arial; color: blue;}
h1 {font-size: 18px;}
h2 {font-size: 16px;}
h3 {font-size: 14px;}
DESCRIPTION:
Here, three different HTML elements are styled, using four different rules.
The first rule is common to all three heading elements selected (<h1>,<h2>, and <h3>). If a rule is common to more than one element, then each element selector is placed at the front of the rule, and separated by a single comma and a space.
The first rule comprises two different declarations, one which alters the font family of all three heading types to Arial, the second which changes the colour of all three to be blue. If more than one declaration is to be made in a single rule, that is; if more than one property is to be altered at once, then each declaration is separated by a semi-colon and a space.
The second, third and fourth rules are specific to each of the three different heading types and define that each is to be a different size to the others (18, 16 and 14px respectively).
The Structure Of CSS – Accounting for Browser Differences
Each web browser will have its own inherent and default CSS styling rules by which it will style and display a web page unless told otherwise.
Within each CSS file it is also possible and indeed common case that many HTML elements are selected multiple times and may be associated with numerous CSS rules, all of which might conflict and produce different outcomes.
To account for this, CSS operates what is known as a priority scheme.
This identifies any and all elements which might have multiple rules assigned to them, and determines which rule is the overriding rule and should be executed. Most commonly this is the last rule encountered in the CSS file, thus these files are referred to as having a “cascading” property.
In this way it is possible to predict both the end result and which rule will be applied.
The Structure Of CSS – The Role of the Web Browser
A web browser will read, interpret and execute CSS code, much in the same way that it does HTML markup.
However in both cases, the web browser will not display the actual CSS or HTML code to the user. If you wished to view the CSS of a website (assuming it is not blocked or hidden by that website), you can do so by right-clicking a web page and selecting “view page Source” (or similar equivalent in alternative web browsers).
You can then navigate to the .css file using the link placed in the <link> element at the head of the HTML document.