Cascading Style Sheets, CSS, contain instructions to the browser (user agent) on how to display the elements on a web page.

HTML, the language of the internet

Most web pages are created in a language called HTML, HyperText Markup Language. HTML is made up of tags. These tags tell the browser what each element is on the web page. It can be anything from the title for the page, links to outside files, the container for the content that is to be displayed on the screen, the header area, the columns, the headings, the paragraphs, images, ordered and unordered lists, tables, etc.

If there is no styling for the HTML web page, the browser will display it all to the very left of the screen, all in one column, in the default font set for the browser. The text will be all black, the links will be a bright blue, there are no background colors.. Images will come in at their original size. This is the way that the web pages looked in the early stages of the internet when it was a network set up for sharing technical documents.

What CSS does to the HTML

CSS styling instructs the browser to display fonts, colors, borders, backgrounds, drop-shadows, columns, and much more. CSS models the HTML document as a hierarchy of boxes. Each box contains words, lines, paragraphs, tables, images, etc. each with properties such as size, color and font.

Different ways to apply styling to a web page

There can be inline styles, the <style> section or the style sheet tells the browser to find certain elements on the page and then instructs the browser how to display these elements with the values set for the properties of the element.

Inline styles are placed inside the HTML for the page along with the element. It styles just that element, though it may effect the child elements if the property is inherited. Inline styles will only affect the element in question and will not affect other elements on the page or other pages on the site.

The <style> section is placed at the top of the HTML document in the <head> portion. The styles set in the <style> section will search for all of the elements within that document and style them accordingly. Changing properties and values for the elements listed in the <style> section will affect all of the elements on that page, but only on that one page.

The style sheet is an external file that is called with a <link> in the <head> section of the page. A single style sheet can be used with one, many or all of the web pages associated with the web site. Changing properties and values for the elements listed in a style sheet can affect the entire site.

If an element has not be styled with one of these methods, then the default display for that browser will be applied to the element.

CSS Properties

Each element has a set number of properties that can be modified to change its appearance. Here is a short list of just a few of the possible properties:

color: sets the color of text

font: sets what font, what style of font, what size, etc

background: sets the background color or background image

border: set a border with the width, style and color

float: tells the browser to push the element to the left or right side of the screen

width: how wide to make the element

height: how tall to make the element

margin: how much space to put between elements

padding: how much cushion to give the element

z-index: instruct the browser which element goes on top of the others if they occupy the same space on the screen

The values for the different properties with CSS

Each of the CSS properties has a number of values. These values can be which color to use for text, the name of the font family to use, a specific width in pixels or a percentage for an element such as an image or a column, the width of a border in pixels, the URL to the image file to use in the background.

The style sheet will display the element to look for then in curly brackets each of the properties that are to be styled followed by a colon and the value for that property. One or more properties can be assigned to each element, each separated with a semi-colon.

Example:

h2 {color: #CC2200; font-family: Arial, sans-serif; text-decoration: underline;}

This is <h2> text styled as indicated above.


Classes and ids used in CSS

Along with the element itself, CSS can target all elements that have a certain class or any element with a certain id assigned to it. This way, you can modify just certain elements without affecting others.

An example woud be that you want only certain <div> elements to have famous quotes. These quotes need to stand out from the page, with a larger font, different background color, and a wider margin on each side. In the HTML for the page you could have something like the following:

<div class="famousQ">
    <p>Give me liberty, or give me death!</p>
    <p class="credit">Patrick Henry</p>
</div>

To make this quote stand out from the page, you could target the styling for just the classes in question.

div.famousQ {
    width: 60%;
    margin: 0 auto;
    font-family: "Times New Roman", "Times New Roman", "Times", serif;
    font-weight: bold;
    font-size: 1.4em;
    color: #11008C;
    background: #fff2c5;
    padding: 10px 20px;
}
div.famousQ p.credit {
    font-style: italic;
    font-weight: normal;
    text-align: right;
}

The result would be that any <div> tag with that class would have the following appearance:

Give me liberty, or give me death!

Patrick Henry