Styles Solve a Common Problem
HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.
As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.
To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium responsible for standardizing HTML - created STYLES in addition to HTML 4.0.
Both Netscape 4.0 and Internet Explorer 4.0 support Cascading Style Sheets.
Style Sheets Can Save a Lot of Work
Styles in HTML 4.0 defines how HTML elements are displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in files external to your HTML documents. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing a single CSS document. If you have ever tried to change the font or color of all the headings in all your Web pages, you will understand how CSS can save you a lot of work.
CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.
Multiple Styles Will Cascade Into One
Style Sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external Style Sheets can be referenced inside a single HTML document.
Cascading Order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where the highest number has the highest priority:
1.Browser default
2.External Style Sheet
3.Internal Style Sheet (inside the <head> tag)
4.Inline Style (inside HTML element)
So, an inline style (inside an HTML element) has the highest priority,
which means that it will override every style declared inside the <head>
tag, in an external style sheet, and in a browser (a default value).
Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
The selector is normally the element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon and surrounded by curly braces:
body {color: black}
If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}
Note: If you wish to specify more than one property, you should separate each property with a semi-colon. The example below shows how to define a center aligned paragraph, with a red text color:
p {text-align: center; color: red}
To make the style definitions more readable, you can describe one property on each line, like this:
p
{
text-align: center;
color: black;
font-family: arial
}
Grouping
You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. Each header element will be green:
h1, h2, h3, h4, h5, h6
{
color: green
}
The class Attribute
With the class attribute you can define different styles for the same element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
p.right {text-align: right}
p.center {text-align: center}
You have to use the class attribute in your HTML document:
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
You can also omit the tag name in the selector to define a style that can be used by many elements:
.center {text-align: center}
In the code below both the h1 element and the p element are classed with "center". This means that both of the elements will follow the rules in the ".center" selector:
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
The id Attribute
The id attribute has to be unique on the page. There can only be one element with a given id in a document. They are marked in the HTML document with id instead of class:
<p id="intro">
This paragraph will be right-aligned.
</p>
The id attribute can be defined in two ways. It can be defined to match all elements with a particular id, or to match only one element with a particular id.
In this example the id attribute will match all elements with id="intro":
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
In this example the id attribute will match only p elements with id="intro":
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
CSS Comments
You can insert comments in CSS to explain your code, which can help you when you edit the source code at a later date. A comment will be ignored by the browser. A CSS comment begins with "/*", and ends with "*/", like this:
/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
Examples
Look at Example
1
Look at Example
2
How to Insert a Style Sheet
When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
The browser will read the style definitions from the file mystyle.css, and format the document according to it.
An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
The browser will now read the style definitions, and format the document according to it.
Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is possible to prevent an old browser from displaying the content by hiding it in the HTML comment element:
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
Multiple Style Sheets
If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align: right;
font-size: 20pt
}
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color: red;
text-align: right;
font-size: 20pt
The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
CSS Background Properties
CSS Background properties define the background effects of an element.
Examples
Set
the background color
This example demonstrates how to set the background color for an element.
Set
an image as the background
This example demonstrates how to set an image as the background.
How
to repeat a background image
This example demonstrates how to repeat a background image only vertically.
How
to place the background image
This example demonstrates how to place the image on the page.
How
to set a fixed background image
This example demonstrates how to set a fixed background image. The image
will
not scroll with the rest of the page.
All
the background properties in one declaration
This example demonstrates how to use the shorthand property for setting
all of the
background properties in one declaration.
CSS Text Properties
CSS Text properties defines the appearance of text.
Examples
Set
the color of the text
This example demonstrates how to set the color of the text.
Specify
the space between characters
This example demonstrates how to increase or decrease the space
between characters.
Align
the text
This example demonstrates how to align the text.
Decorate
the text
This example demonstrates how to add decoration to text.
Indent
text
This example demonstrates how to indent the first line of a paragraph.
Control
the letters in a text
This example demonstrates how to control the letters in a text.
CSS Font Properties
CSS Font properties defines the font in text. The Font properties allow you to change the font family, boldness, size, and the style of a text.
Examples
Set
the font of a text
This example demonstrates how to set a font of a text.
Set
the size of the font
This example demonstrates how to set the size of a font.
Set
the style of the font
This example demonstrates how to set the style of a font.
Set
the variant of the font
This example demonstrates how to set the variant of a font.
Set
the boldness of the font
This example demonstrates how to set the boldness of a font.
All
the font properties in one declaration
This example demonstrates how to use the shorthand property for
setting all of the font properties in one declaration.
Notes - Useful Tips
Fonts are identified by their name in CSS1. Note that if a browser does not support the font that is specified, it will use a default font.
CSS Border Properties
CSS Border properties define the borders around an element. The Border properties allow you to specify the style, color, and width of an element's border. In HTML we used tables to create borders around a text, but with the Border properties we can create borders with nice effects, and it can be applied to any element.
Examples
Set
the style of the four borders
This example demonstrates how to set the style of the four borders.
Set
different borders on each side
This example demonstrates how to set different borders on each side of
the
element.
Set
the color of the four borders
This example demonstrates how to set the color of the four borders. It
can
have from one to four colors.
Set
the width of the bottom border
This example demonstrates how to set the width of the bottom border.
Set
the width of the left border
This example demonstrates how to set the width of the left border.
Set
the width of the right border
This example demonstrates how to set the width of the right border.
Set
the width of the top border
This example demonstrates how to set the width of the top border.
All
the bottom border properties in one declaration
This example demonstrates a shorthand property for setting all of the
properties for the bottom border in one declaration.
All
the left border properties in one declaration
This example demonstrates a shorthand property for setting all of the
properties for the left border in one declaration.
All
the right border properties in one declaration
This example demonstrates a shorthand property for setting all of the
properties for the right border in one declaration.
All
the top border properties in one declaration
This example demonstrates a shorthand property for setting all of the
properties for the top border in one declaration.
All
the width of the border properties in one declaration
This example demonstrates a shorthand property for setting the width of
the
four borders in one declaration, can have from one to four values.
All
the border properties in one declaration
This example demonstrates a shorthand property for setting all of the
properties for the four borders in one declaration, can have from one to
three values.
CSS Margin Properties
CSS Margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once.
Examples
Set
the left margin of a text
This example demonstrates how to set the left margin of a text.
Set
the right margin of a text
This example demonstrates how to set the right margin of a text.
Set
the top margin of a text
This example demonstrates how to set the top margin of a text.
Set
the bottom margin of a text
This example demonstrates how to set the bottom margin of a text.
All
the margin properties in one declaration
This example demonstrates how to set a shorthand property for
setting all of the margin properties in one declaration.
CSS Padding Properties
CSS Padding properties define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple sides at once.
Examples
Set
the left padding
This example demonstrates how to set the left padding of a tablecell.
Set
the right padding
This example demonstrates how to set the right padding of a tablecell.
Set
the top padding
This example demonstrates how to set the top padding of a tablecell.
Set
the bottom padding
This example demonstrates how to set the bottom padding of a
tablecell.
All
the padding properties in one declaration
This example demonstrates a shorthand property for setting all of the
padding properties in one declaration, can have from one to four
values.
CSS List Properties
The List properties allow you to change between different list-item markers, set an image as a list-item marker, and set where to place a list-item marker.
Examples
The
different list-item markers in unordered lists
This example demonstrates the different list-item markers in CSS.
The
different list-item markers in ordered lists
This example demonstrates the different list-item markers in CSS.
Set
an image as the list-item marker
This example demonstrates how to set an image as the list-item marker.
Place
the list-item marker
This example demonstrates where to place the list-item marker.
All
list properties in one declaration
This example demonstrates a shorthand property for setting all of the
properties for a list in one declaration.