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?

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
print 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.

<html>
 <head>
 <style>
    @media screen { p.first {font-weight:bold; font-size:15px;} }
    @media print { p.second {color: #999; font-size:12px;} }
    @media screen,print { p.third {font-size:9px;} }
  </style>
  </head>
  <body>
   <p>Website text goes here.</p>
 </body>
</html>

Below is an example of an external style in an HTML document with media types being set.

<html>
 <head>
  <link rel="stylesheet" type="text/css" media="print, handheld" href="myfile.css">
 </head>
 <body>
   <p>Website text goes here.</p>
 </body>
</html>

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.