CSS Styles

Home
XHTML
CSS
PHP
MySQL
SEO
JavaScript
Computer Basics
Number Systems
LINUX

Styles are rules assigned to XHTML tags. Styles are made up of various properties and values that define color, font, and layout attributes. A style is made up of a selector and declaration. The selector is the name of the selected XHTML tag. The declaration is the combination of properties and values that make up the rule. The declaration is declared within { } curly brackets. The : colon separates the property and value. The ; semicolon is coded after each value and ends the declaration statement. The CSS file is coded as...

selector {property:value;}

All properties have a default value if no style is declared.

A style can define the text color of all paragraph elements. The CSS file is coded as...

p {color:red;}

The XHTML file is coded as...

<html>
<head>
<title>Title of Webpage</title>

<link rel="stylesheet" type="text/css" href="file.css" />

</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

The output to the browser is...

This is a paragraph.

Sixteen predefined color values can be declared by name including black, white, gray, silver, blue, navy, aqua, teal, green, lime, olive, yellow, red, purple, maroon, or fuchsia. All other colors use hexadecimal, percentage, or integer RGB values, as defined on the Colors page.

Multiple properties and values can be defined within a single declaration. The CSS file is coded as...

p {color:red; font-size:20px;}

The output to the browser is...

This is a paragraph.

The font size is measured in pixels (px). The font size can be measured with different value types, as defined on the Value Types page. Common value types for the web are pixels and percentages. Tutorials for fonts are on the Fonts-Text page.

A declaration can be defined by multiple selectors. The selector tags are separated by commas...

p, em {color:red; font-size:20px;}

If multiple selectors are declared without commas, the secondary selector tags are only affected when declared within the primary selector tags. In the following example, only the emphasis tags within the paragraph tags are modified...

p em {color:red; font-size:20px;}

The different link states can be modified with pseudo-classes, which are appended to the anchor selector tag. The link pseudo-class is when the link is in original form. The visited pseudo-class is when the link has already been clicked on. The hover pseudo-class is when the mouse cursor hovers over the link. The active pseudo-class is when the link is currently being clicked on. The link states should be in order as link, visited, hover, then active. The CSS file is coded as...

a:link {color:red;text-decoration:underline;}
a:visited {color:red;text-decoration:underline;}
a:hover {color:red;text-decoration:underline;}
a:active {color:red;text-decoration:underline;}

The output to the browser is...

This is a paragraph.