Introduction to CSS and Styling

What is CSS?

We learned in the last chapter that XHTML is used to categorize data in a way that the browser can make meaningful inferences; for example, the browser knows that a heading tag should be displayed big and bold. CSS, or Cascading Style Sheets, is a way of overriding the browser’s default display style. In other words, CSS allows us to write a set of rules which define exactly how to display a particular type of data on a website. A CSS rule might translate to something like “display all paragraphs in the Arial font”.

Practical Applications

Beyond the ability to customize, CSS provides the ability to create a consistent look and feel across an entire website very easily. A website can use one CSS file for every page – each page will have its own unique data and information, but all pages will have a similar appearance, and changing the appearance for the entire website can be done instantly by modifying a single file. This consistency helps your website to maintain a unified visual theme or brand, providing an easy end-user experience for visitors.

More Information

Like XHTML, all features of the CSS language rules are standardized by the World Wide Web Consortium (the W3C). The most recent major language version for CSS is CSS3, but new sets of rules are being accepted as part of the official language all the time. W3C provides an online tool that anyone can use in order to test whether a piece of CSS code is completely valid, called the CSS Validation Service.

Because CSS is constantly evolving (even faster than XHTML), this textbook will introduce you to the syntax and uses of CSS and will discuss the most frequently used CSS rules. The content discussed in this textbook is a very small subset of what is possible in CSS, and, for further reading, one might peruse the Mozilla Developer Network’s CSS Documentation or the Official W3C Language Specification.

Important Programs

CSS files are written using plain-text editors, just like XHTML files. Most text editors which are specialized for editing HTML and XHTML documents also have specialized features for editing CSS files. One such recommended text editor for Windows users is Notepad++, for Mac OSX users is Textwrangler, and for Linux users is Gedit.

Learning Outcomes

  • Learn to override the browser’s default presentation style using CSS rules.
  • Understand selector scope, and utilize name, id, and class selectors.
  • Learn to define sizes and colors on the screen using accepted units.
  • Create a consistent style across multiple web pages using an external stylesheet.
  • Use the style attribute to handle edge cases.