CSS Basics

The Cascading Style Sheets or CSS , constitute a combination of methods to control style elements of HTML pages, such as headers, text, color, margins and special effects. There are three types of style sheets:

  • Local CSS
  • Embedded CSS
  • Linked or external CSS

1- Local CSS

The local method allows you to take any HTML tag and from it
assign a particular style. This is possible for paragraphs, tables, table cells, headers, etc.

<H1> Hello </H1>
<P STYLE = "COLOR=red; FONT-SIZE =24" >
This text will appear larger and red

2- Embedded CSS

Called internal style sheet. The method embedded allows you to control a complete HTML page using of the <STYLE> tag placed inside the <HEAD> tag, the attributes will then be applied to the entire page. It is possible to assign a style for the body (BODY), for headers (H1), for paragraphs (P), etc., all this inside the <STYLE> and </STYLE> tags.

<TITLE> Embedded Style Example </TITLE>
BODY {COLOR: red; FONT-SIZE: 14pt}
H1 {COLOR: yellow; FONT-SIZE: 18pt}
<H1> This text will appear very large and yellow </H1>
This text will appear in red and large
<title>M2 Internet protocols example2 </title>
body { background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
font-family: sans-serif;
<title>M2 Internet Protocols </title>
<h1> This is the beginning of the course, with a great title</h1>
<p>To make the first paragraph with text and such</p>
<h2> This is a lower level heading. There are 6 levels </h2>

3- Linked CSS

Called external style sheet, powerful method of creation of generic styles, applicable to an entire site. A main document is created as a style sheet, having the extension .css, which contains styles to apply to one or more pages. Must therefore :

  • create a separate document from the HTML page
  • give it the extension .css
  • place it in the same directory as the pages that adopt this style (may be elsewhere)
<link rel="stylesheet"
type="text/css" />

The element must include:
– The type of link, either to a style sheet
• For a CSS sheet, this must be rel=”stylesheet”
– The location of the sheet
• Variable, must match the name of file and the location given to the sheet;
for example, href=”MySheet.css”
– The type of style sheet
• For a CSS sheet, this must be type=”text/css

Example style sheet (myStyle.css): When applied to a page, the header will appear in green, paragraphs in red, and links in pink and not underlined.

BODY { margin-top: .25in; margin-left : .75in ; margin-right : .75in }
H1 { font-size : 14pt; font-family: verdana ; color : green }
P {font-size : 12pt ;font-family: times ; text-indent: 0.5in ; color: red}
A {color : pink ; text-decoration : none}
<TITLE> Arts and Entertainment </TITLE>
<LINK rel=stylesheet type=text/css HREF=myStyle.css >
<H1> Beethoven </H1>
Born in 1770 in Bonn, Germany, Ludwig van Beethoven lived in Vienna...
<P> Johann Sebastian Bach was born in 1885 in Eisenach (Germany) </P>
<A HREF=>Description</A>

The style classes

If you want to apply a specific style to certain elements of a web page, marked by a particular tag, it is possible to create a class for this one.

Example: Create a class for introductory paragraphs (P.introduction), formatted differently from paragraphs ordinary (P).

To create a class, you must:

  • Define the class in the stylesheet (internal or external), specifying the name of the tag to associate with the class, and completing the properties of formatting of this class.
  • Use the CLASS attribute to specify the page elements to include, which must be marked with the class tag.
  • The elements included in a class respect the properties of the class, as well as the properties of the original tag.

The selector indicates the range of the rule (to which elements it applies)
– This is often an XHTML element name
h1 {color: blue;}
– It can be qualified by a class name
p.friends {font-size: 80%;}
– The class name refers to the attributes
class in XHTML documents:
<p class=”friends”>Hello friends</p>

Example: Elements of introductory paragraphs (class P.introduction) will respect the properties of this class AS WELL as those of the paragraphs (P tag).

In this example, we have:

•defined a class P.introduction in the <STYLE> tag by specifying its characteristics

• used this class in the body of the page thanks to the CLASS attribute in the <P> tag

<TITLE> Arts and Entertainment </TITLE>
P.introduction{font-size: 80%;color:red}
<H2> Beethoven </H2>
<P CLASS=introduction> Born in 1770 in Bonn, Germany, Ludwig van Beethoven lived in vienna.</p>
<P> Beethoven's music has always been appreciated by the public </P>

• A selector can specify several
elements (qualified or not); they are
separated by a ‘,’
h2, p.important {font-weight: bold}
• Instead of an element name, you can use “*”, which indicates all
*.important {color:red;}
– All elements with class=”important” are formatted with

If more than one rule applies to the same element, the properties are “merged”, as mentioned earlier.
h1, h2, h3 {color: red;}
*.important {font-size: 200%}
An h2 element with class=”important” would then be
formatted with font-size:200% AND color:red

Some properties (not all) are inherited from a parent element
by child elements.

Ex.: the color property (color of the text):
body {color: red;}
will ensure that all text of the document will be in red.

However, if another rule specifies another value for some
child elements, then it will take precedence.
body {color: red;}
h2 {color: blue;}
all text in the document will be in red, but within h2 it will be