Website Design Resources - CSS (Cascading Style Sheets)
Web Site Design Resources: Tips on the basic principles of good website design.
Using CSS to Style Web Pages
CSS (Cascading Style Sheets)
Style sheets store the information that determines the way text on a web page will be displayed, including attributes such as font, font size, font color, and much more. Styles can be specified inside an html element, in the head element of a document, or in an external style sheet.
Inline Declarations
Any HTML element can be styled by listing declarations inside it's style attribute. Almost any HTML element can be assigned a style attribute, as in the following example:
<p style="color:grey; text-decoration: underline;">Inline Declarations</p>
These types of declarations are referred to as inline because they are defined "inline" with the HTML element on the page.
Embedded CSS
When style properties are specified in an embedded style sheet, a style element is placed in the head of a document's HTML that contains all the style rules.
Consider the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title Here</title>
<style type="text/css">
<!--
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #414E81;
}
.h1 {
font-family: "MS Reference Sans Serif", Arial;
color: #13559D;
font-size: 11px;
font-weight: bold;
}
body {
margin-top: 0px;
background-color: #DDDFE3;
}
</head>
The CSS rules defined in the style block in the head of the document apply to all of the designated parts within the document.
External CSS
External CSS are style sheets linked to in the head element of a web page that determine the styles of that particular page. External CSS are the preferred method of controlling the look of your web pages as they keep the html code clean.
Using CSS to Modify the Appearance of Header Tags
Originally header tags were created to define the content within the header tags, not the color and size of the font. Consequently, the search engine ranking algorithms were developed to give priority to the content of the header tags, as they are expected to contain the most important information on the page. With the advent of cascading style sheets, the appearance of a header tag can be modified while preserving its influence on search engine ranking.
For example, consider the following code added to the header tag in a style sheet:
H1 {
Font-size: 14px;
Font-family: Verdana, Arial, sans-serif;
Color: #434343; }
Properly implementing these basic principles of CSS design will give you control over the look of your web pages without having to sacrifice search engine friendliness.