Continuing my series of the past week, working my way through the terms and technologies of websites and web design, next I’m on to CSS, Cascading Style Sheets. These as the name suggests, control the style of each web page, and were created in an effort to separate the presentation of a page, from the content of the page.
The idea is, that the style information could be put into a seperate file, which would contain all of the presentation information, what fonts to use, what colours, how pictures are to be displayed, everything inside 1 file. Then every page within the website, could just simply load that file, and they would all look alike. And if it came time to change the site, just edit the style sheet, change what you want to change, and the entire site reflects those changes without having to edit every single page to make those changes.
So that explains the Style and Sheet parts of the CSS name, but what about the Cascading? Well, Style sheets work using a thing called the DOM, the Document Object Model. This is the structure of how a web page is made up.
So for example, if you have a really simple web page, consisting of a paragraph, which has a single link in it. The paragraph is part of the page, and the link is part of the paragraph. So any change made to the page (for example, deciding all text on the page should be bright pink) will cascade down to elements within it. So while you can over-rule that by making all paragraphs a different colour, by default, all settings cascade down the hierarchy to elements within that structure.
For example in HTML, you can use the <font> tag to change the font, the size and the colour of text within a paragraph, well CSS allows you to do all of those, plus you can change the depth of the text (so it appears in front of other elements like pictures and other text, and you can display the text anywhere you want. So CSS can drop text boxes over the top of the rest of the page, centred on the screen (I’m sure you’ve seen a similar effect a million times).
So next time I’m going to go into the backbones behind the web pages, the technologies which really power the web (I am by training a “back-end” web developer, so naturally I would feel that way).