What is CSS?

CSS is a simple code language used to format the visual presentation of a web page. By using simple tags, the web designer sets fonts, colors, background-images and more visual formatting elements to influence the website visual layout. CSS syntax uses self-explanatory English keywords. For example, applying font-size: 12px; to a paragraph, will display text in size of 12 pixels. Similarly, applying "background-color: blue;" will display a blue background.

CSS stands for Cascading Style Sheets. A style sheet includes the rules which specify the visual display of different elements on the website. The style sheet syntax is very simple and consists of selectors and declaration blocks. A property and its value make a declaration. In the example in the previous paragraph, font-size: 12px; the font-size is the property, and the 12px is the value. It is important to notice the syntax's special characters: Curly brackets { } are used to define the deceleration block, while each declaration includes colon and semi-colon in the following manner: "property: value;".

Example of a CSS rule:

p { font-size: 12px; background-color: blue; }

The selector "p" stands for paragraphs. Applying the above style rule will display all paragraphs on a web page with text size of 12 pixels and a blue background. Of course there is a way to set this rule to certain paragraphs while setting another rule to other paragraphs.

Sometimes for convenience reasons you may write the declaration blocks differently. Since web browsers ignore spaces and lines when reading CSS rules, the above declaration block will be read exactly the same as the following example:

p {
    font-size: 12px;
    background-color: blue;
}

Having each declaration on a new line makes it is easier to notice when the semi-colon is missing. When a semi-colon is missing, the particular style declaration and those which follow, will not be read properly by the web browser.

Comments in CSS

If you'd like to write a comment in the style sheet which will not be rendered by the browser, you can do so by using special characters in the following manner:

/* enter your css comment here */

Web designers use CSS comments for various purposes, for example: giving a title to a set of rules in the style sheet. Another use of comment tags in a CSS file is to permanently disable style rules.

Default Styles

Each web browser (i.e.: Firefox, Safari, Chrome, Internet Explorer) applies by default its own set of initial values onto elements on a web page. If a style sheet exists, then its rules take precedence over the browser's default rules. The paragraphs affected by the rule we gave as an example above, will display text in a default serif font, such as Times New Roman. To change that, we would need to add a font declaration to our declaration block, as follows:

p {
    font-size: 12px;
    background-color: blue;
    font-family: helvetica, arial;
}

Notice we have added two fonts to the font-family. If the person who is viewing the website does not have the "Helvetica" font installed on the personal computer, then the "Arial" font will be chosen to display the text in the paragraph. If neither of the fonts exists on the viewer's computer, then the default serif font, such as "Times New Roman", will be applied automatically by the browser.

Each and every element on a web page has a default display, which may vary from one browser to another. In other words, the browser assigns an initial style value to every element on the page. The html <h1> heading tag will display text in a certain default size. To change that, you would need to set a rule, for example:

h1 {font-size: 24px;}

Binding an independent style sheet onto a web page

There are several ways of including CSS rules to affect the display of elements on a web page:

• Inline styles are written inside an actual single element tag on the HTML page, for example:
  <p> This is a paragraph without an inline style </p>
  <p style="font-size: 12px;"> This is a paragraph with inline style </p>
• Embedded styles are usually written inside the header area on the HTML page, for example:
  <style type="text/css">
  p { font-size: 12px; }
  h1 {color: green; }
  </style>
• External style sheets, often called "CSS files", are independent style pages linked to the HTML page. By binding the same external style sheet to all website's pages, the web designer controls the design of several pages from one place. The CSS file has the extension ".css" and is referenced from the HTML page by adding the reference tag in the header area, for example:
  <link href="MyStyleSheet.css" type="text/css" rel="stylesheet" />
  There is no need to add special tags on the css page itself, and styles are written in a similar way to the example in the beginning of this article:
  p {font-size: 12px;}

Using an external style sheet for setting up style rules for elements throughout the website is the recommended method. Though an HTML web page can reference several style sheets, try to avoid using multiple style sheets.

Advantages of designing a website with CSS

Organize and simplify the design
CSS centralizes and organizes the website formatting rules. This creates an easy way to design a website and make changes to live websites, while keeping the design theme continuity throughout the site's pages.

Safe and prevent website code from breaking
CSS also provides a safe way for the designer to make visual design updates, without getting into the actual website code. If a mistake is made in the website's code, then the website may stop functioning. However, a mistake in the style sheet can be easily fixed by replacing the problematic CSS file with a backup CSS file.

Make websites pages load faster
Style sheets take a lot of the formatting code away from the actual website pages, decreasing the overall file-size of the pages and resulting in a faster-loading website. In addition, upon visiting the website , the CSS file is downloaded once, saved automatically into the browser's cache, and gets re-used for every page on the website. This also makes the website pages load faster.

Streamline the website design work and save time
Style sheets help web designers create new websites more easily and faster by simply copying style rules from another style sheet.

Provides additional functionality in user interface design
With CSS pseudo-classes a website can have nice user interaction effects. Pseudo-classes are style sheet selectors that point to a particular state or behavior of an element on the web page, such as a link that has been visited recently or a table-cell getting hovered my the mouse cursor.

Coming Next: How do I learn CSS? How do I design a website with CSS?