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.
The DOM also has uses within Javascript, and is how Javascript can control individual elements on the web page. So through the DOM, Javascript can make changes to the all of the page, or can effect all elements on a page, or can effect singular elements, either by selecting them by their position within the DOM (so the first link on the page, or a link within a certain paragraph), or by labelling it (eg <p id=”bernard”> tags that particular paragraph as labelled bernard, allowing it to receive it’s own individual CSS, and that CSS to be changed through the DOM).
So, we’ve covered why CSS is Cascading Style Sheets, we’ve mentioned on how that interacts with Javascript, making up the backbone of HTML5, but we haven’t really touched on how CSS differs from the controls already available through HTML.
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).
With Javascript and CSS combined, through the DOM you can get Javascript to change the location of elements, so can have text sliding onto the screen, by changing the size of images, you can have them zoom into place, and many other effects that you’ve no doubt seen.
Now, we’ve covered most of the technologies involved on the user side of things, how HTML forms the basis for a web page, how CSS provides the presentation of the web page, and how Javascript allows the web page to become something more than just a static object and respond and change to the users input. These technologies are referred to as Front-End technologies, as they are all operating on the user side of things, and in many ways are just the shiny chrome on the outside, rather than the engine which actually runs it.
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).
