CSS Tutorial
CSS is an acronym for Cascading Style Sheets Styles. They define how to format and display HTML elements. It is now recommended that you use external style sheets only. Do no use inline styles as this not allowed in terms of the new XHTML standards. External styles sheets help separate content from display. You define/create your CSS style in a separate file that can be 'linked' to from within your HTML page. You link the style sheet to your web page with code such as the following:
<link rel=stylesheet type="text/css"
href="rdstyles.css"
title="RDS Styles">
With CSS you can style your documents and position elements within your web pages.
Now lets cover the most important aspects of CSS
With a style sheet you can control the overall look of your site, for example:
- backgrounds
- fonts
- colors
- margins
- padding
- width
and so on.
If you apply formatting directly to en element inside a document you wish to change it later, then you will need to change all occurrences of this style. When you define the style in an external style sheet, you only need to change it once in the style sheet and it will be applied wherever the style has been used.
In its basic form a style is rule that tells the browser how to display a particular element. Lets say we want to change the appearance of the h1 tag. We could create the following style rule;
h1 {color: red; font-family: Verdana; font-style: italic}
and the broswer will display all h1 tags in Red using (if possible) the Verdana font and render the text in italics.
A style rule consists of three parts:
- a selector
- a list of property: value declarations
- contained within curly braces { }
A selector
This refers to a tag, class or id for which the style is applied. You can use mulitple selectors and apply a specific style rule as follows:
h1, h2, h3 {text-align: center; font-style: italic}
You can apply a style contextually, i.e. apply a style to a tag based on a condition, for example
ol li {list-style: upper-alpha}
ol ol li {list-style:upper-roman}
h1 em, p strong, pre {color: red}
So when the li tag is nested within a ol tag, the style will be upper-alpha. When the li tag appears within a single nested ol tag, the style will be upper-roman.
Similarly, em within a h1 tag, strong within a p tag will be rendered in red. The content of the Pre tag will be rendered in red on its own.
Style Classes
We can create a class and define a style for this class. This class can the be applied to one or more tags
We have the following types of classes
- Regular
- Generic
- ID
- Pseudo
Regular class
This defines different styles for a particular tag. Lets consider an example using the P tag.
p.code {
width: 500px;
background:#CCCCCC;
font-size:14px;
font-weight:bold;
padding: 15px;
}
p.poetry {
font-family: "Bookman Old Style";
font-style:italic;
font-size:14px;
color:#0033FF
}
To use a particular class you add the class attribute to the tag in your HTML document:
<p class="poetry">
I must go down to the seas again,
to the lonely sea and the sky ...
</p>
Generic class
You can define a class that is independent of a particular tag. You can then apply the class selectively to tags. A generic class is pre-fixed wth a . (period)
.css_code {
width: 500px;
background:#CCCCCC;
font-size:14px;
font-weight:bold;
padding: 15px;
}
Now you can apply the class to any tag for example:
<div class="css_code">
ID Classes
Most HTML tags allow for an ID attribute. For example:
<div id="main-nav">
You can create a style for this id by pre-fixing the id name with the # symbol:
#main-nav {
color:#000000;
height: 35px;
margin-top: 5px;
font-size:16px;
padding-bottom: 0;
margin-bottom: 0;
}
Psuedo classes
These classes apply only to the a and p tags
The A tag has different states
- a:link
- a:active
- a:hover
- a:visited
You can apply Psuedo classes to the following P tag elements
- p:first-line
- p:first-letter
So for example you can define styles for the various states of the anchor tag:
#main-nav a:hover {
background:#0000FF;
color:#FFFFFF;
font-weight:bold;
}
The above example applies a style for the hover state of the A tag, but only when the A tag occurs within the id="main_nav" attribute.
Style Properties
Style properties are divided into the following groups:
- fonts
- colors & backgrounds
- text
- boxes & layout
- lists
Fonts
These are the font properties we will use the most
- font-family
- font-size
- font-style
- font-weight
Examples
div {font-family: Arial,"New Century Schoolbook",sans-serif}
p {font-size: 14pt}
p {font-size: larger}
h3 {font-style: italic}
.code {font-family: Verdana; font-size: 14pt; font-weight: bold}
Colors and Backgrounds
Each element has a foreground (text color) and a background color. Background can be a color or an image. The foreground color is inherited by child elements. So if body color is set to green the the paragraphs and other elements will be rendered in green as well (unless specifically overwritten with a style)
Background properties are not inherited. Each elemnt has a default transparent background. This allows the body background to shine through.
Here are the background properties we use the most
- background-color
- background-image
- background-repeat
You can also use the general background property
Colors
We specify colors using a hexadecimal value. Dreamweaver presents you with a color chart and inserts the hexadecimal code automatically. You can also specify color using a color name or a RGB value .
h1 {color: #FF0000}
h1 {color: red}
hr {color: yellow}
Text Properties
Here we deal with the text alignment and spacing as opposed to the font size and style.
- letter-spacing
- line-height
- text-align
- text-decoration
- text-indent
- text-transform
- vertical-align
- word-spacing
p {letter-spacing: 2px}
p {line-height: 2.0} /*for double spaced text/
h4 {text-align: center}
a:link {text-decoration: none}
h4 {word-spacing: 15px}
Box Properties
The idea is that HTML elements fit into rectangular boxes. Each box is surrounded by three layers
- padding
- border
- margin
The following diagram illustrates this
Padding
Controls the immediate space around the content element. The padding only has a numeric size value. It has no color or background image. It uses the background and color of the element.
#footer {padding: 10px}
Border
The border surrounding an element has color, thickness and style.
- border-color
- border-width
- border-style
Shorthand:
#header {border-top: thick solid red}
Margin
This lets you control the space just outside the border of an element. Magins are transparent and you can only specify the size.
#header {margin-top: 5px}
Positional Box properties
- float
- clear
- height
- width
Float
You can have an element float left or right. The text will the flow around it in a specified manner.
#header h1 {float: right}
Will cause the content of the h1 tag within the header section to float right. Text will flow around it to the left.
Clear
This tells the browser whether to place a floating elements text around it or on the first line below it. It accepts the values, left, right and both. The default is none.
#header h1 {float: right; clear: left}
Height / Width
This controls the height and width of a tags display region.
img {height: 200px; width: auto}
img {width 200px; height:auto}
List Properties
These control the appeaarnce of lists, ordered and unordered.
We will briefly discuss the list-style property
- list-style
(unordered)
- disc
- circle
- square
- none
- list-style (ordered)
- decimal
- lower-roman
- upper-roman
- lower-alpha
- upper-alpha
UL {list-style: disc}
OL.roman {list_style: lower-roman}
<ol class=roman>
<li>Item one</li>
<li>Item two</li>
</ol>
Specfying Property Values
We have seen property values can be expressed as keywords, hexadecimal values, relative values and size values. Depending on the property the following briefly summarizes property values
Keyword values
none, larger, xx_large, small, solid , underline, overline
Size values
- relative
- pixels
- absolute
Relative size means relative to the height of the current font, measured in em units or the height of the letter x, abbreviated ex.
The pixel unit (px) is the size of pixel on the display. Absolute values can be expressed in inches (in), centimeters (cm), points (pt) and picas (pc) (twelve points)
Percentage Values
This specifies the size in proportion to other content or an element.
line-height: 120%
width: 80%
Color Values
RGB
Hexadecimal
Color name
URL Values
URL values are specifies using the URL element.
BODY { background: url(bgimage.gif) }
BODY { background: url(http://www.rds.co.za/images/bgimage.gif) }
url(service://server.com/pathname)
The <SPAN> Tag
Use this tag to apply a style to an arbitrary content selection.
You can have an element float left or right. The <span class="css_code">text will the flow around it in a specified manner.</span>
We have reached the end of this tutorial. For a more in-depth study you may be interested in our new and enhanced ebook
Follow this link for an introduction to Style sheet layout techniques
Have not found what you looking for, try searching Google. Simply use the search box below: