A Cascading Style Sheet is essentially a control mechanism. Anything that you write in CSS code – within proper guidelines – can be used to control the presentation of elements on an individual page or an entire website.
I graduated with a degree in print design and worked as a media director and layout editor before I became a web designer. The Eureka moment for me, which I had early on, was finding the similarities between CSS and setting page parameters, character styles and paragraph styles in InDesign.
HTML controls the structure of the document, while CSS is used to control the presentation of elements within the document. The word ‘cascading’ simply refers to the way in which the CSS rules are applied to HTML pages, while ‘style sheet’ is just that:a list of rules for the way a designer wants elements on a page to be styled, including font colour, font size, font height, padding, margins, text decoration and so on. Anything that is used as a CSS rule will need to be referenced within the area in which the designer wants it to be applied. For example, if we create a rule for maroon text that’s going to appear over an entire section on multiple pages of a website, the first step will be to write the rule itself:
.huzzah {color:#5E2525}
Formatting or style rules are placed inside curly brackets and are in two parts, divided by a colon:the property (such as ‘colour’) and the value (in this case the colour hex code). If a second rule is added – to underline the text, for instance – a semi-colon is used to tell the browser it’s moving on to another rule:
.huzzah {color:#5E2525; text-decoration:underline;}
The full stop before the name – . huzzah – signifies that this is a ‘class’ selector and the style will be used more than once. If we put a hash (#) before the name instead – #huzzah – it would be an ID. IDs are used for a specific purpose and are generally used once per a page. The ‘. huzzah’ part itself is the selector, which tells the web page which element to style. Then we need to link the name with the element that we want to style on the page:
<p class="huzzah">
This is for a connected external stylesheet. For inline styles – where CSS rules are simply written within the code for one individual page – you would use the word ‘style’ instead of ‘class’. This tells the paragraph to look at this particular CSS rule in the stylesheet.
The most common mistakes that I see are mixing up classes and IDs. I’ve had to fix multiple problems where designers have made a class rule for an individual element, and an ID for multiple elements, which confuses the code and gives other designers a headache.
Another error is when people misunderstand the absolute versus relative positions of elements on a page. If you position an element absolutely, it simply appears at the exact pixel that you specify. You might want a graphic to appear 40 pixels from the top of the page and 60 pixels from the right: img {position: absolute;top:40px;right:80px}
Relative positioning, on the other hand, is used to move an element from where it would normally appear, rather than specifying an exact position. I’ve also seen beginners place a ton of CSS rules in an individual HTML page and copy that to other pages on the same site. It would have saved them hours of work to just put all of the code on one external style sheet and be done with it.
By Michael Dambold, print and web designer
Want to learn more about CSS and JavaScript? Check out the top CSS and JavaScript tutorials and examples of CSS from our sister site Creative Bloq.
