So what is CSS, it actually means Cascading Style Sheets and they are made up of a collection of formatting rules that can control the appearance of content on a web page.
The whole purpose of using CSS is to separate content from presentation. The actual content of the page is defined by the HTML (hyper text markup langauge) and is contained in the page itself. HTML defines what the content is, the body , a paragraph and so on. What CSS does is apply a style and format to the HTML so for instance you can use CSS to define exactly what the command does.
For a command this would typically be features like the font name, size, spacing, colour, etc anything related to style. It could also be used to define unit sizes such as whether your font is displayed in pixels or points for example. In fact it can define every feature of every HTML function from body, to headers, to bulleted lists, to backgrounds to everything else defined by the HTML code.
CSS is split into two parts – the selector and the declaration.
The selector is the name assigned by the HTML i.e. ‘p’, ‘body’, etc. So the selector says what is going to be formatted.
text-align: left;
margin-right: 5px;
margin-left: 5px;
}
‘p’ is the selector and everything else that is contained between the {} is the declaration. So as you can see the declaration is also split into 2, the property ‘text align’ and the value ‘left’. Of course more properties can be added as appropriate for the ‘selector in question. Also what needs to be understood is that where ever the
command is used by the HTML code that these properties will be applied as defined.
Using this facility means that your style and formatting can be updated very easily, when you update a CSS rule in one place the formatting of all the documents using that CSS rule will be adjusted accordingly; adopting the new style.
There are different types of rules: –
- Custom CSS rules or class styles – these allow you to apply style attributes to any range or block of text. They all begin with a period(.) An example would be to create a class called ‘.box_border’ you could then define a background colour for the box, add a border of a certain width and define that in a different colour, then apply the apply it to a portion of already styled paragraph text, effectively overriding the properties for the properties for that portion. Hope that made sense.
- HTML tag rules – these redefine the formatting for a particular tag, for example ‘h1’, ‘p’, ‘body’, etc.
- CSS selector rules, these are advanced styles and they redefine the formatting for a particular combination of elements or for other selector forms. For example a ‘h2’ header that appears in a table can be made different to a ‘h2’ that appears in the body text. Advanced styles can also redefine the formatting for tags that contain a specific id attribute. For example you could create an id called #menu1 and then the styles applied to ‘#menu1’ would be applied to the attribute pair id=”menu1″.
A good use for this would be the positioning and size of the menu as illustrated below: –
position: absolute;
height: 21px;
width: 58px;
}
Type of CSS (Cascading Style Sheets)
- Inline: a one time style placed in the code
- Embedded: a style sheet that controls the elements of only one page
- External: one external sheet that can control the appearance of multiple web pages by linking back to them.
It is not unusual for website designs to use all 3 types of the options in combination. There is no problem with this but to be true to the principles of CSS then every effort should be made to separate content from presentation as much as possible i.e. by putting all the CSS code into an external page (3rd option).
This will provide you with the following benefits: –
- You will maintain a consistent look across all pages linked to the style sheet
- You can easily update all the pages at once
- Your pages will be much smaller and will load more quickly
Something else to bear in mind is that different browsers apply the CSS coding in different ways, so checking in multiple browsers becomes essential for a proper solution to the design style.
A way of minimizing this problem is to apply standard practices to the design, and if you do you should enjoy increased longevity of the site, make it more accessible via different browsers and types of browsers and above all it will allow you to update and maintain your website with ease.
