PROWAREtech
Cascading Style Sheets: Tutorial - Page 01
CSS can turn a drab, boring website into an exciting and dynamic one. A basic understanding of HTML is a prerequisite.
Adding Style
The first approach to adding style is inline with the style attribute of the HTML element. The following code modifies the text color of a paragraph: <p style="color: red;">This paragraph is red.</p>
<!DOCTYPE html>
<html>
<head><title>Inline CSS</title>
</head>
<body>
<p style="color: red;">This paragraph is red.</p>
</body>
</html>This paragraph is red.
The second approach is to embed a style sheet using a <style> element, which goes in the document's <head> section.
<!DOCTYPE html>
<html>
<head><title>Embeded CSS</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>
All paragraphs are red.
</p>
</body>
</html>The third approach, and the recommended one, is to place all this style formatting information in a separate file.
<!DOCTYPE html>
<html>
<head><title>Separate CSS</title>
<style href="DocStyles.css" rel="stylesheet" />
</head>
<body>
<p>
All paragraphs are red.
</p>
</body>
</html>Dissecting a Style Sheet
selector {
property: value;
property: value;
}
selector, selector {
property: value;
property: value;
}
The selector identifies what is to be styled. It can be an HTML tag, the ID of an HTML element, or a class. If it is an ID then a hash precedes it; if it is a class then a period precedes it (more on classes below):
element {
property: value;
property: value;
}
#id {
property: value;
property: value;
}
.class {
property: value;
property: value;
}
The property identifies the type of formatting wanting to be applied.
h1, h2 {
color: value;
text-align: value;
text-shadow: value;
}
#footer {
color: value;
text-align: value;
}
.bluecenter {
color: value;
text-align: value;
}The value identifies the value of the property. The curly braces define a declaration block and each line contained within, terminated by a semicolon, is a declaration.
h1, h2 {
color: black;
text-align: center;
text-shadow: 10px 10px 3px gray;
}
#footer {
color: navy;
text-align: center;
}
.bluecenter {
color: blue;
text-align: center;
}Common Style Sheet Properties
-
Borders:
- border-color
- border-style
- border-width
- border (sets all three: 1px solid red)
-
Colors:
- background-color
- color
-
Fonts:
- font (sets all properties: bold 12pt 'Courier New', Arial, Verdana)
- @font-face
- font-family
- font-size
- font-style
- font-weight
- font-variant
- text-decoration
-
Graphics:
- background-image
- background-position
- background-repeat
-
Layout:
- position
- float
- clear
- left
- right
- top
- bottom
-
Size:
- width
- height
-
Spacing:
- margin
- margin-bottom
- margin-right
- margin-left
- margin-top
- padding
- padding-bottom
- padding-right
- padding-left
- padding-top
-
Text Alignment:
- letter-spacing
- line-height
- text-align
- text-indent
- white-space
- word-spacing
