CSS Properties Table

Introduction to CSS

Cascading Style Sheets

Cascading style sheets are a way of formatting your page layout, text, fonts, images, and almost anything you put on the page. They allow you to position things on your page down to the exact pixel. Also, if a style is declared in the head section of a page, a change to the style changes the style on the entire page.

Style sheets allow you to define a consistent look for your website by defining them once and then applying them to whichever pages you want.

Style sheets can be applied in 3 different ways

Linked

This means you create a single style sheet (a separate file from your html file) that each page of your website links to. All or some of you web pages can be linked to the style sheet

Embedded

This means you include the style sheet at the beginning of a specific web page and it is part of the same html file. This will define the appearance of that page only and cannot affect any other pages unless you repeat the same code in each page

Inline

This allows the application of styles to a section or group of tags in a web page. Inline styles are applied in the BODY section of your html document. Inline styles are what we have been using to change <FONT> for example but it must be done each time we want the change

Advantages of Defining Styles and Style Sheets

The advantage of defining styles is that if we want to change the appearance of an element that has been repeated many times in our web document, this can be done with one change to the style instead of having to change it each time it is used in a document

This gets even better if you use an external (linked) style sheet for more than one web page. Changing the style properties in the external style sheet will now adjust every page that uses that style sheet, so you can avoid editing each page individually to change it

An external style sheet is a separate document from your HTML documents and is saved as type All Files and with the extension .css for example: “firststyle.css”

What does Cascading Mean?

When more than one type of style is used in a document there may be a fight over which style is to be displayed. There is a definite order in which styles will be applied to text and other elements of your document as follows:

This is the order

An inline style applied to a particular element will always win out and be the one to be displayed in the browser. It is found in the <BODY> section of a html document. For example is we use the <FONT> …</FONT> element in a web page then regardless of what styles are linked or placed in the HEAD section of the document it is the <FONT> in the body that will take precedence over the others

Styles set in an embedded style sheet will override a linked style sheet’s styles. These are styles defined in the HEAD section of the document

Lastly the linked style sheets styles will prevail if no inline or embedded styles have been applied to a particular element

Linking a Stylesheet

To link a style sheet to a HTML document we put the following line into the HEAD section of the document

Now we will look at the most common ELEMENTS that would be defined in a style sheet and some examples.

For BODY we can define

Background color, background-image, link colours, text colour and margins. The properties of each of these elements must be defined in the style sheet

The PROPERTIES of an Element

What properties can we define?

The properties of FONT are family, style, weight and size.

The properties of text-align are left, center, right or justify.

The property of a background-image is the path and name and of the image

The ATTRIBUTES/VALUES

These are the actual values we give to a property such as

font-family:Verdana;

color:red;

text-align:right;

In this example Verdana is the value of the property font-family.

Red is the value of the property color

Right is the value of the property text-align

Creating the Stylesheet

Open Notepad and start a new document. Do not use any HTML tags. Now let us define the properties for the BODY of our document. Key in exactly what you see below. The layout is not important but has been used for clarity. What is important here is that we are defining the properties of the BODY element and that they are enclosed in the type of brackets shown and that the exact punctuation (syntax) is used.

Body{background-image:url(foresttree.jpg);

background-repeat:repeat; font-family:Times New Roman, Verdana, Book Antiqua;

font-size:12pt; font-weight:400; color:white; text-align:left;

margin-left:50pt; margin-right:50pt}

Inside the BODY definition we have defined the body background, which is the image foresttree.jpg, the font family, the font size, the color of the text, the text alignment and the margins to be left on each side of the screen. Notice that more than one font family has been defined. This means that if the first font named is not available in the viewer’s browser it will look for the second and so on. Notice there is not any punctuation sign before the last bracket. If the background image is not in the same folder make sure to put the path in the definition. Here are some examples of what we might define

H1{font-family:Comic Sans MS; font-size: 36pt; color: red;

text-align:center}

H2{font-family:Arial; font-size: 28pt; color: yellow;

text-align:center}

H3, H4, H5, H6{color:blue; font-family: Verdana}

See above we were able to group elements in the style sheet to give them the same properties. The groups need to be separated by commas as shown

The Stylesheet now looks like this

Body{background-image:url(foresttree.jpg); background-repeat:repeat; font-family:Times New Roman, Verdana, Book Antiqua; font-size:12pt; font-weight:400; color:white; text-align:left; margin-left:50pt; margin-right:50pt}

H1{font-family:Comic Sans MS; font-size: 36; color:red; text-align: center}

H2{font-family: Arial; font-size:28; color: yellow; text-align:center}

H3, H4, H5, H6(color:blue; font-family: Verdana}

Defining a Background color

If we want a background colour instead of a background image we use the following in the BODY definition above

background-color:brown; or its hexadecimal equivalent

Defining a Background image

background-image:url(“here put the actual url of the image”);

If an image is used as a background it will need to be repeated to fill the screen. This is done with the background repeat attribute as follows:

background-repeat:repeat;(this tiles the image to fill the screen)

background-repeat:repeat-x;(this repeats the image only horizontally across screen)

background-repeat:repeat-y;(this repeats the image only vertically on screen)

Defining Margins in your web pages

Margins can be specified in either pixels, points or centimeters

margin-top:50px;

margin-top:50pt;

margin-top:5cm;

This specifies the margins for the element you are defining. It might be BODY or P or DIV etc. In the same way you can specify margin-left, margin-right, and margin-bottom

Font Property - Values

This will determine the font to be used throughout your HTML document.

The font values we can define are

font-family: Arial;

font-style:italic; (bold, underline etc)

font-size:12pt;

font-weight: 300;

Note that font-weight determines the boldness of the text and the values are from 100 to 900 with 900 being the boldest!

Also note that if you do not put pt after the font-size the size will be determined in pixels. It is best to use pt as you do not know the size of a pixel on the viewers monitor

Text alignment - Values

text-align:left;

text-align:center;

text-align:right;

text-align:justify;

Color - Values

On its own defines the colour of text throughout the document or section. It can be a named or hexadecimal colour

Color: white;

Links

The colour of your links is very important to your navigation system. If we do not colour them they will have the browser default colours anyway but some designers like to define their own colours. It is important, however, to remember that most people expect links to be blue!!

A:link { }

This determines the colour of a link when the page is loaded in the browser

A:visited { }

This determines what a link looks like after it has been clicked and used

A:active { }

When you click the link it first it turns to the defined colour. When you visit the link it changes to the “visited” colour

Changing Scrollbar Colour

Here is the code to change the scroll bar colors. You can change the colors already in there, obviously, and put other colors into the area between the single quotes (').

The code above is for an embedded style sheet. If you are adding this to an existing style sheet just add the blue lines to the BODY area of the style sheet in question. The various lines above refer to different parts of the scrollbar. The track-color is the panel that forms on the side of the screen, the face-color is the button that you drag up and down! Go ahead and experiment with different colours and see the effects.

Colors can be either hexadecimal values or words.

Classes

We can define a “class” that only affect a particular HTML markup tag such as <H1> or <P> or we can define a class that can be used with ANY markup tag. You make up the names of the classes yourself (here it is called ‘question’). Using classes we can put special formatting on certain instances (occurrences) of an element and you can use the element with or without the class alternately. If you define and use the examples below it will illustrate the point being made. These can be put into your style sheet and tested.

Imagine that you are preparing an FAQ page for your website and you want the style of the questions to be different from the style of the answers so that the viewer can read the page more easily. Here we will define a class for the ‘question’ text and then apply it to our web page. This is how to do it.

Defining Classes for use with specific tags - Case 1

In your style sheet type in the following line and then save your style sheet again. The class you are now defining can only be used with the <P> tag in your web pages

P.question{color:green; font-style:italic; font-size:14}

Now in the BODY of your web page key in the following text and tags:

<P class=”question”>What is a Style Sheet?</P>

<P>A Style Sheet is a separate file listing different attributes for HTML tags which when applied to a page controls how that page is displayed in the Browser</P>

<P class=”question”>Whey would you use a Style Sheet?</P>

<P>To give a consistent look to all the pages in your web pages</P>

Here are other examples of Classes that you might define in your Style Sheet

H3.centered{text-align:center; color:red}

We can use this in the BODY section to make our H3 headings centered and colour Red. This cannot be used with any other tag

The next example shows what you might do if your page had a lot of “quotes” and you want the text to be smaller, you want them indented from existing margins and you want the text to be justified

P.quote(font-style:italic; font-size:9; margin-left: 200px; margin-right:200px:

text-align:justify}

Defining Classes for use with any tag - Case 2

It can be useful to define Classes that are not tied to a particular HTML tag. Below we see how to do this in your Style Sheet. Any of the classes below can be then attached to any HTML tag as shown. We simply define the class without attaching it to any tag as shown below. Defining a class like this must begin with a dot

This is what you put in your Style Sheet

.question{color:green; font-style: italic; font-size:14}

.centered{text-align:center; color:red}

.quote(font-style:italic; font-size:9; margin-left: 200px; margin-right:200px:

text-align:justify}

This is how we might USE the Class in the Body of our document

<P class=”centered”> This paragraph of text will be centered</P>

<H2 class=”centered”>This heading will have the properties of the ‘centered’ class</H2>

We can use the classes with any element that can use the properties defined

The main advantage of defining Classes is that you can define a whole range of attributes in your

Style Sheet for a single tag such as <P> or <H2> etc. This will save a lot of coding in the BODY of the page. The other advantage is that by changing your Style Sheet all HTML documents linked to the Style Sheet will automatically change – thus saving a lot of time

ID’s

Define a unique style for an element. We would use this for unusual characters such as the use of the Copyright symbol or other special character. Here we show how to use the copyright ID in your Style Sheet

Add the following line to your Style Sheet and save

#copyright{font-style: italic: font-size: smaller; text-align:right}

To use an ID add the following line at the end of your HTML file

Please NOTE that the &copy puts the copyright symbol © in your web page and is a special character. The other attributes that it will have such as right alignment, colour and size are determined by the ID definition in the Style Sheet

Creating An Embedded Style Sheet

This is a style sheet that belongs to a single web page. It will only affect the web page that it is embedded in. It is inserted into the <HEAD> section of the document as follows.

Look at the example:

<HTML>

<HEAD>

<TITLE>This is an embedded Style Sheet example

</TITLE>

<HEAD>

<--

H1{font-family: Comic Sans MS; font-size: 36; color: red; text-align: center}

H2{font-family: Arial; font-size: 28; color: yellow; text-align: center}

H3, H4, H5, H6(color:blue; font-family: Verdana}

-->

</STYLE>

</HEAD>

<BODY>

(Your text for your web page goes here. Each time you use H1 it will have the attributes determined above and so also for any other tags that you have defined)

</BODY>

</HTML>

Creating An Inline Style

An inline style is defined in the BODY section of a web document next to the element that it is to affect as follows:

Inline styles should be used sparingly and only when a style is to be applied to a single occurrence of an element as above.

Creating a Linked Stylesheet

Follow the instructions given earlier to create a Style Sheet as an independent file

Save as type All files

Save with the file extension .css

To link a style sheet to a HTML document we put the following line into the HEAD section of the document

All the elements that have been defined in the style sheet will be reflected in those elements when used in any html document that has the style sheet linked to it. If we change something in the style sheet any pages linked to it will automatically change.

Be careful if you copy and paste any of the lines above into your HTML document. If double-quote marks are not the right type your style sheet will not work. Syntax must be exact. Note the use of colon and semi-colon – they have different uses so make sure you put in the correct symbol

Page 1