In the first Learn the Lingo series, we discussed HTML, which is the basic structure of a website with content and special tags. Next, we discussed JavaScript, which adds basic or complex functionality to a website. This time, we’ll be concluding the series (and completing the website building experience) by discussing CSS.
What Is CSS?
CSS is an acronym for Cascading Style Sheets, which determine the appearance of HTML when rendered in the browser. CSS is a style sheet language that, like JavaScript, can be referenced inline or externally. First introduced in 1997, it has grown quite robust with the expansion of CSS3 syntax, which is supported in all modern web browsers. Multiple style sheets can be referenced for specific purposes and layouts on any given webpage. For example, you can use CSS to ensure that a webpage prints correctly by hiding some elements while printing others, or changing the color of the text to something more printer-friendly. Referencing style sheets for separate layouts can be done by defining the media type.
Media Types
| all | Used for all media type devices |
| aural | Used for speech and sound synthesizers |
| braille | Used for braille tactile feedback devices |
| embossed | Used for paged braille printers |
| handheld | Used for small or handheld devices |
| Used for printers | |
| projection | Used for projected presentations, like slides |
| screen | Used for computer screens |
| tty | Used for media using a fixed-pitch character grid, like teletypes and terminals |
| tv | Used for television-type devices |
Referencing a Style Sheet
Below is an example of an inline style in an HTML document with media types being set.
Website text goes here.
Below is an example of an external style in an HTML document with media types being set.
Website text goes here.
Cascade – The Best Part
Arguably, the best part of CSS is the cascading. When visiting a webpage there are three types of style sheets that can be applied to it:
- author style sheet – styles created by the author of the web page
- user style sheet – styles set by the user of the web page
- user agent style sheet – styles the browser applies to the web page
After the browser looks at these style sheets, the “cascading” occurs according to several rules.
- the browser finds all declarations that apply to an element and property
- declarations are sorted by weight and origin
- declarations are sorted by specificity of selector
- declarations are sorted by order specified
The author style sheet comes first in order of importance and overrides styles in the user style sheet which overrides styles in the user agent style sheet.
Learning the Lingo
Hypertext Markup Language – HTML
JavaScript – JS
Cascading Style Sheets – CSS
Note: The W3C CSS Reference guide has listed all the syntax for CSS1, CSS2, and CSS3.
