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.
<HTML>
<BODY>
<H1> Hello </H1>
<P STYLE = "COLOR=red; FONT-SIZE =24" >
This text will appear larger and red
</p>
</BODY>
</HTML>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.
<HTML>
<HEAD>
<TITLE> Embedded Style Example </TITLE>
<STYLE>
BODY {COLOR: red; FONT-SIZE: 14pt}
H1 {COLOR: yellow; FONT-SIZE: 18pt}
</STYLE>
</HEAD>
<BODY>
<H1> This text will appear very large and yellow </H1>
This text will appear in red and large
</BODY>
</HTML><html>
<head>
<title>M2 Internet protocols example2 </title>
<styletype="text/css">
body { background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
font-family: sans-serif;
}
</style>
</head>
<html>
<head>
<title>M2 Internet Protocols </title>
</head>
<body>
<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>
</body>
</html>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"
href="MySheet.css"
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}<HTML>
<HEAD>
<TITLE> Arts and Entertainment </TITLE>
<LINK rel=stylesheet type=text/css HREF=myStyle.css >
</HEAD>
<BODY>
<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=http://www.google.ca>Description</A>
</BODY>
</HTML>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
<HTML>
<HEAD>
<TITLE> Arts and Entertainment </TITLE>
<STYLE>
P.introduction{font-size: 80%;color:red}
</STYLE>
</HEAD>
<BODY>
<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>
</BODY>
</HTML>• 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
elements
*.important {color:red;}
– All elements with class=”important” are formatted with
color:red
If more than one rule applies to the same element, the properties are “merged”, as mentioned earlier.
Example:
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.
Example:
body {color: red;}
h2 {color: blue;}
all text in the document will be in red, but within h2 it will be
blue.
