After a basic understanding of HTML (see my previous blog post on this), the next thing you’ll want to get a handle on is a thing called “CSS”. It is the language used to control the visual presentation of the content you see on a web page. And when I say “visual presentation” I mean everything from colors, sizes, fonts, positioning on the page, background images, borders and a lot more.
Definitions
CSS stands for Cascading Style Sheets. And yes, even when not abbreviated, it sounds like a formidable term. Here’s the breakdown of its meaning, but this time I’m going to take these words and define them in reverse order – as it will make a lot more sense if you learn the words in that sequence:
SHEET: A sheet in this sense just means a text document (analogous to a “sheet” of paper).
STYLE: This is just the basic meaning of style – the particular way something is designed or arranged. In this case, it particularly is referring to the VISUAL appearance of something.
STYLE SHEET: A text document containing specially written instructions for a web browser, used to delineate the specific visual look, feel and arrangement of a web page. This particular kind of text document always ends in a “.css”. Very commonly this file is named “style.css”, but you can name it whatever you want. At the top of a web page, there is a section where the creator of the web page can specify what CSS document is going to be used to style this page, and where that CSS document can be found. That’s how your browser knows what styles to apply to what web page.
CASCADING: The basic English word “cascade” means “a consecutive sequence of items, events or actions”. The derivation of the term comes from an Italian word meaning “waterfall” – which is a good analogy here: one thing falling into place right after another in sequence.
The way this applies to style sheets is that a style sheet has a number of directions, or “rules” in it that say how the parts or “elements” of a particular web page should be displayed. Each of these rules are read by the browser and applied in the sequence they were written on the page (i.e. one right after the other, from the top to the bottom of the CSS document). If there is any conflict between the rules of a page, the later rule (i.e. the one written lower on the page) takes precedence. For instance, if a rule on line 5 of the CSS document says that all paragraphs should have the font of “Arial”, that change would be made to the web page. But if later, on line 55 of the CSS document, it says that the second paragraph should have the font of “New Times Roman”, then that rule would be applied as well and would override the earlier rule for that one paragraph. (Of course all this happens in the blink of an eye, so you as the user only see the final result after ALL rules are applied to the page).
But “cascading” has one more aspect to it. In addition to all of the rules in one CSS document being applied in a “cascading” sequence, there is also the situation when you have more than one CSS document being applied to the same web page (a very common occurrence). In this case, those CSS documents are implemented in a “cascading” sequence, based simply on the order that those files are listed on the web page. So if there are three style sheets listed on a web page, and a rule in the first style sheet conflicts with a rule in the third style sheet, then the third style sheet’s rule is what wins out in the end.
So CSS is a web-related computer language, used in special text documents (.css files) to specify rules that are applied in sequence, that delineate the styles (the specific colors, fonts, borders, positions and sizes) of the elements of a web page.
And, yes, it IS slightly counter-intuitive, that the words “Cascading Style Sheets” seems to be referring to just the SHEETS (text documents) themselves, but in actual fact it is referring to the LANGUAGE of CSS as well as the SHEETS of rules written in that language. So CSS is referring to this whole specific SYSTEM (as outlined above) of applying styles to web pages.
A SIMPLE EXAMPLE:
Let’s say we have a web page named: “bestfriends.html”, and on one line of that web page you have the following:
<p>The boy walked his dog.</p>
(The <p> tag, of course, indicates a “paragraph” in HTML.)
And let’s say at the top of the web page (in a hidden section of the page that the visitor of a web page does not normally see, called the “head” section), it says that this web page is supposed to use a CSS file called “style.css” for its style rules (it also tells the browser where that file can be found).
And in the file “style.css” there exists the following rule:
p {font-weight: bold;
font-color: green; }
(This basically tells your browser that every paragraph in the document should have its words in bold and their color made green.)
And the end result in your browser is:
The boy walked his dog.
SUMMARY
The above gives you a basic idea. There is A LOT more to learn about the subject and how to use it effectively, and a number of little pitfalls you can run into along the way. There are also a few ways that you can include the CSS rules right on the same page as the HTML code, rather than separating those rules out in a “.css” file and linking to it. But the usual and most acceptable way to use CSS is as a separate style sheet or sheets, as outlined above.
