Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is a language that is used to style HTML documents (web pages) and also to control the content layout. CSS is independant of HTML and can also be used with any XML-based markup language such as XHTML.

CSS also controls the presentation on different types of devices, for example, screens of different sizes, printers, hand held devices, etc.

Most HTML formatting elements have been deprecated in HTML 4.0, however, most web browsers still support most of them and will display web pages with deprecated HTML.

CSS Syntax

To apply CSS styles to HTML elements,a series of CSS rules are used. CSS rules are a statements that define the style of an HTML element or group of elements. The syntax of a CSS rule is shown below.

css syntax

Every CSS rule has the following:

  • Selector - The selector tells the web browser what HTML elements to apply the CSS styles to.
  • Declaration Block - Everything within the curly braces ({ and }) is called the declaration block.
  • Declaration - In a declration block you can one or more declarations. Each declaration is combination of a CSS property and one or more property values. If there are multiple property values within a declaration they must be seperated by a comma. If there are multiple declarations they must separated by a semi-colon.
  • Property - The CSS property tells the web browser what attribute of the HTML element you want to apply the style to.
  • Property Value - A property value assigns a value to the CSS property.

The code below is an example of a CSS rule.

p { margin:10px; padding:0; color:red; font-size:15px; }

The CSS rule in the example above specifies that all paragraphs (p) should have a margin of 10 pixels (margin:10px;), a padding of 0 pixels (padding:0;), the text should be the color red (color:red;) and the font size should be 15 pixels (font-size:15px;).

CSS Comment Tags

CSS comment tags allow you to add comments within your CSS styles code.

Comments begin with a forward slash immediately followed by an asterisk (/*) and ends with an asterisk immediately followed by a forward slash (*/).

/* This is a comment and will be ignored by the web browser. */ p { margin:10px; padding:0; color:red; font-size:15px; }

Where to Apply CSS Styles to HTML Documents

You can apply CSS styles to your HTML documents one of 4 ways: including an embedded style sheet, linking to external style sheets, inline styles and importing style sheets.

Linking to an External Style Sheet

Adding styles to your web pages through the use of external style sheets allows you to make changes to multiple web pages by making a change to only one external style sheet.

Adding styles to your web pages through the use of external style sheet is the recommended method to add styles to your web pages.

To link to an external style sheet, create a new document and place your CSS rules in the new document. The external style sheet should only contain CSS rules. The new document must be saved with a .css extension. For example, the CSS document can be name my_style_sheet.css.

Within the HTML document that you want to apply the styles within the CSS document to, include a <link> tag within the <head> tag. The <link> tag must contain 3 attributes: rel, type and href.

  • rel attribute - The rel attribute must have the value stylesheet.
  • type attribute - The type attribute must have the value text/css.
  • href attribute - The href attribute value is the name and location of the CSS style sheet, for example, my_style_sheet.css.

An example of how to link to an external style sheet is shown below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <link rel="stylesheet" type="text/css" href="my_style_sheet.css" /> <style type="text/css"> </style> </head> <body> </body> </html>

Including an Embedded Style Sheet in HTML Documents

CSS can be included in an HTML document by embedding a style sheet within the document itself. Embedded style sheets are also sometimes called internal style sheets. To include a style sheet within the HTML document itself, you must include a starting <style> tag and an ending </style> tag within the starting <head> tag and the ending </head> tag. The starting <style> tag must include the type attribute with a value of text/css.

The syntax to include a style sheet within an HTML document is shown below.

<head> <style type="text/css"> </style> </head>

Inline Styles

Inline styles allow HTML elements to have styles applied to them within the HTML document.

To apply inline styles to an HTML element, include the style attribute within the element that you want the styles applied to, for example:

<p style="margin:20px; padding:10px; color:red;"> This is a paragraph. </p>

Importing Style Sheets

External style sheets can also be linked to by using the @import rule. An exmple of how to do this is shown below.

<style type="text/css"> @import url(http://mysite.com/styles/style_sheet.css); @import url(/style_sheet/style_sheet.css); </style>