What is CSS?

CSS is the abbreviation for Cascading Style Sheets. It is used to layout items on a web page and to provide the required appearance in terms of font face, size. etc.

Why CSS?

HTML specifies what should be on a page (words, pictures, etc). CSS specifies the layout and appearance of those items.

With CSS it is very easy to change the layout and appearance without changing the HTML.

For example, if HTML Tables are used to position items on the page, it can be difficult to change the layout at a later date. However, if CSS is used for the layout it can be changed easily without altering the HTML.

Another example is the use of CSS to specify font face and size. With CSS these can be changed globally throughout the site just by changing one or two lines of CSS code.

What does CSS look like?

Example:

<!-- example of "class" -->
.subs-navbar {
border: 1px #091c5a solid;
margin-bottom: 10px;
padding-top: 0;
font-size: 14px;
background-color: #ffffff;}

<!-- example of "id" -->
#sidepanel {
position: absolute;
top: 20px;
left: 625px;
width: 220px;
margin-left: 0;
margin-right: 0;
font-family: Verdana, Helvetica, Arial, sans-serif;}

Which sort of style sheet?

With a "linked stylesheet", the CSS is in a separate file from the HTML. Where the same styles are to be used on more than one page, this is preferable. For example:

<head>
<link rel="stylesheet" type="text/css" href="http://www.westciv.com/style/style.css" />
</head>

This page uses a "linked" style sheet.

With an "embedded stylesheet", the CSS is in the HTML file. This is appropriate if a style is only to be used on the one page.

The CSS can be put in the HTML "head" section, or in a <div>, <span> or <p>. For example:

<head>
<style type="text/css">
.illustration_title {
position: absolute;
top: 250px;
left: 50px;
}
</style>
</head>

<body>
<span class="illustration_title"> 1. View of the beach</span>
</body>

or

<div style="position:absolute; left:50; top:700; width:300; font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
This website conforms to the following standards:
<!-- more stuff here -->
</div>

or

Which <span style="font-style: italic; text-decoration: underline">sort</span> of style sheet?

Class & ID

A class can be used in various places on a page, but an ID can only be used in one place.

The brackets "{" and"}" must be used in the class or ID definition instead of "(" and ")".

Class

A class definition takes this form:

.name { attribute1: value; attribute2: value; ... }

e.g.:

.red_text { color: #ff0000; }

and here's how you use it in HTML:

this text is <span class="red_text"> red </span>

it looks like this on the web page:

this text is red

ID

An ID definition takes this form:

#name { attribute1: value; attribute2: value; ... }

e.g.:

#cng_header { font-size: 28px; text-align: center; color:#800080; }

and here's how you use it in HTML:

<p id="cng_header">Comunn na Gàidhlig</p>

it looks like this on the web page:

Comunn na Gàidhlig

HTML tags

It is possible to combine styles and HTML tags like <body>, <p>, <h1>, <table>, etc in two ways:

Method 1 - name the style within the instance of the HTML tag

With this method, the style is only used where you explicitly name the class or ID to be used within the individual instance of HTML tag.

.purple_text { font-size: 18px; color: #800080 }

<p class="purple_text ">text with the new style</p>

<p>text with the default style<p>

like this:

text with the new style

text with the default style

Method 2 - specify the style for the HTML tag, to be used by all instances

With this method, you specify the style to be used by all instances of the HTML tag. You don't need to name the class or ID within each instance of the HTML tag.

p { font-size: 18px; color: #008080 }

<p>text with the new style</p>

<p>and here too<p>

like this:

text with the new style

and here too

HTML <span> , <div> & <p>

The tags <span>...</span> can be used to mark a small section of text where you want to apply a style. To apply a style to a complete paragraph or larger section of text, use <p>....</p>, or <div>...</div>.

for example, we previously saw:

this text is <span class="red_text"> red </span>

and <div> or <p> could be used like this:

<div class="centred_image"> (HTML for a picture here...) </div>"

<p class="monospaced_text"> (a paragraph of text here...) </p>