|
Introduction to CSS
Cascading Style
Sheets is a programming language designed to help web masters
and authors modify the look of web pages. It is with CSS, you
can dramatically alter the appearance of your MySpace profile.
In order to understand the basic building blocks of CSS, you
should know the difference between ‘CSS styles,’ ‘CSS
selectors,’ and ‘CSS properties.’ This basic introduction to
CSS gives you an introduction into the aforementioned syntax.
CSS Styles
Before a web
browser must be told to use CSS. The easiest way to tell a web
browser to use CSS is by using the CSS identifying style tag.
In the example below, the blue text indicates the beginning and
end of the style tag. The blue text is how you will begin and
end CSS code. The other text basically changes the font of a
web page to ‘arial’ with a red color.
<style type=”text/css”>
font {font-family: arial; color: red;}
</style>
CSS Selectors
and Properties
Cascading Style
Sheets definitions have two components: Selectors and
Properties. The selectors tell the browser which elements or
parts of the web page will be modified and changed. The
properties portion of the CSS definition tells how (e.g. font,
color, etc.) will be changed. In the previous code example, the
selector is: font. The properties are: Arial and Red.
There are many
different selectors in CSS definitions. They include tag,
pseudo-class, class, contextual, and ID selectors.
Tag selectors
– applies the style to every instance of a specific html tag.
The following example highlights the tags: body, p, td, th, div,
blockquote, dl, ul, and ol.
<style type=”text/css”>
body, p, td, th, div, blockquote, dl, ul, ol {font-family: arial;
color: red;}
</style>
Pseudo-Class
selectors – applies the style to different condition of a
specific tag. The following example highlights the different
states of the “a” tag. Basically, a:link is the color of a
regular link; a:visited is the color of a link that has already
been visited; a:hover is the color of the link when the mouse is
over a link; and a:active is the color of a link when it is
clicked. In CSS, the latter selectors override the preceding
selectors. That is, a:hover will override a:link.
<style type=”text/css”>
a:link { color: red; }
a:visited { color: blue; }
a:hover { color: pink; }
a:active { color: yellow; }
</style>
Class and ID
Selectors – Basically, the class selector can be used to
modify specific sections of your web page with CSS. You
can specify class and ID names and their properties.
|
