Library tutorials & articles
Using Cascading Style Sheets (CSS)
- Introduction
- Specifying Styles within an HTML Document
- External Style Sheets
- Priority of Styles
- Inheritance of Styles
- Syntax of Styles
- CSS Units of Measurement
- Pseudo Classes
Specifying Styles within an HTML Document
Styles specified within the document may either apply to the whole document, or a tag contained in the document.
Applying the Style to the whole Document
To apply a style to the whole document, the style information must be placed in the head of the document. The style information is a set of rules that determine how the HTML document is formatted. The following example sets the style for links so they're not underlined and have a colour of black, that turn blue when the mouse is moved over the link. The actual syntax for the style is explained later in this tutorial.
<head>
<title>Title for this Page</title>
<style type="text/css">
a
{
text-decoration:none;
color:#00c;
background:transparent;
}
a:hover
{
color:#900;
background:transparent;
}
</style>
</head>
Applying the Style to a Tag
Applying a style directly to a tag is called an inline style. To apply a style to a tag, use the style attribute of the particular tag you want to apply the style to. The following example sets the contents of a cell in a table so that the background colour is light blue.
<td style="background-color:#39C;">content of cell</td>
Further styles maybe added, separated by a semicolon.
<td style="background-color:#39C;font-size:small;">content
of cell</td>
I'm available for contract work. Please visit Juicify for details.
Related articles
Related discussion
-
Create this kind of website
by maidentv (1 replies)
-
$200 Website Design and Development
by manypeopledesign (1 replies)
-
Dallas Interactive Marketing & Internet SEO SEM October Meetup
by dsafmx (4 replies)
-
Contract: ActionScript/FlashBuilder Developer
by mattmeigs (2 replies)
-
Can I design web site by using ASP.net
by pradeepfusion (1 replies)
Related podcasts
-
Despise the listener
We have a great lineup this week: Paul talks about getting things done in web design and an alternative approach to your reading list. Marcus explains the exciting area of insurance for web designers and we have Andy Clarke on the show to give us an update on CSS 3.
Events coming up
-
Nov
23
Dan Cederholm Workshop
London, United Kingdom
Handcrafted Bulletproof CSSwith Dan Cederholm of "Simplebits"Learn how craftsmanship can apply to the intangibility of web design. Dan Cederholm will guide you though a case study, pointing out the details that matter most when designing fle...
This is a good tutorial as it covers the basics.
Nevertheless, readers should know that CSS can be taken to the extreme and should know the other side of the story in regards to fully integrated CSS.
One of the points to always remember in any technology is the K.I.S.S. principle.
Tables versus fully CSS (i.e. replacing all table tags with div tags)
http://www.decloak.com/Products/Dreamweaver/NestedTemplates/TablesOrLayers.aspx
This thread is for discussions of Using Cascading Style Sheets (CSS).