CSS stands for 'cascading style sheet'.
'Style' is there because prevailing industry paradigm of the moment dictates that content, form (style) and behavior should be handled mostly separately in web design. On a basic level, this means content is written in HTML/XHTML, form/style in CSS and the website's user-interactive behaviors, largely in Javascript, PHP, AJAX and a host of other dedicated web programming languages. For example, when writing the HTML content skeleton of a page, it is common to write important things in bold* like so: <b>important bold text</b>. Without CSS that will simply appear 'important bold text' but once CSS is involved, that bold tag effect can be overwritten to almost anything.
This is where the sheet part of CSS comes in. While possible to include CSS rules directly in the HTML file, it is standard practice to include a separate file with only the CSS rules - that is the 'sheet'. This one sheet can apply to more than one HTML (or XML) document too, removing the need to rewrite formatting for each individual document. CSS rules can apply to any sort of HTML tag, and look generally as follows (using the bold text example):
b {
color: red;
}
The above will turn everything between <b></b> tags in the HTML document red (leaving on the regular bold font weight too). Here is what each individual part does:
b |
the selector signifies that the rule to follow applies to all text between <b></b> tags |
{ ... } |
curly brackets mark the beginning and end of the declaration block (body) of the rule |
color:...; | 'color' is one of many properties that can be changed by the value after the colon (:). These attribute assignments must be finished with a semi-colon (;). Note that American spellings are used. |
Note that the spacing and line-breaks above are not mandatory, but when you have multiple properties, this style makes it infinitely more readable.
One of the most useful thing about CSS is it's ability to be incredibly specific. With no other rules but the one above, every single character of text in bold tags would be bold and red, but what if you had a table like the one above and wanted all the bold text in that table to be blue instead? Fortunately, CSS has the answer - it has an order of precedence that choses the most specific rule to the HTML at hand to apply. In general, it also reads from top to bottom. These make up the cascading nature of CSS. All you would need to do would be to add an additional rule that looks like this:
table b {
color: blue;
}
Here, the table b means this rule applies to any text between <b></b> AND <table></table> tags. Now, when coming across such text, the browser will notice that this new rule is more specific to the situation of the bold than the former rule about bold text in general. Therefore, any and all bold text in any and all tables on the webpage will be blue, while non-tabled bold text will remain red.
*while the word 'bold' is used for clarity in this blurb, it should be noticed that 'strong' is now the prefered way to mark out bolded text, for semantic reasons. In reality, the example HTML would look more like <strong>bold text</strong>, and the CSS pertaining to bold text would use strong instead of b (or sometimes both, to be safe).
© BrainMass Inc. brainmass.com March 28, 2024, 4:37 pm ad1c9bdddf