Select an Account to Sign In

Thryv

Text & Email, Appointment Scheduling, Customer Database

MyDex Account

Pay Bills, View Reporting, Manage Your Listings

Business Websites

Learn the Lingo – What Is CSS?

Learn the Lingo – What Is CSS?

By | 03.19.13
Learn the Lingo – What Is CSS?

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

allUsed for all media type devices
auralUsed for speech and sound synthesizers
brailleUsed for braille tactile feedback devices
embossedUsed for paged braille printers
handheldUsed for small or handheld devices
printUsed for printers
projectionUsed for projected presentations, like slides
screenUsed for computer screens
ttyUsed for media using a fixed-pitch character grid, like teletypes and terminals
tvUsed 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.

(Visited 99 times, 1 visits today)
Comments

Like what you see?
Get more free content.

Next Up In Business Websites

Explore the Blog