CSS Simple

CSS Syntax

CSS 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 HTML 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}

Note: 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 must separate each
property with a semicolon. 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. All header elements will
be displayed in green text color:

h1,h2,h3,h4,h5,h6 
{
color: green
}


The class Selector

With the class selector you can define
different styles for the same type of HTML element.

CSS How To

CSS How To...

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")}

Do NOT leave spaces between the property value and the units! If you
use "margin-left: 20 px" instead of "margin-left: 20px" it will only work
properly in IE6 but it will not work in Mozilla/Firefox or Netscape.

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:

CSS background

CSS Background Properties

The CSS background properties allow you to control the background
color of an element, set an image as the background, repeat a background image
vertically or horizontally, and position an image on a page.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation
the property is defined (CSS1 or CSS2).

CSS text

CSS Text Properties

The CSS text properties allow you to control the appearance of text.
It is possible to change the color of a text, increase or decrease the space between
characters in a text, align a text,
decorate a text, indent the first line in a text, and more.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation
the property is defined (CSS1 or CSS2).

CSS font

CSS Font Properties

The CSS font properties allow you to change the font family, boldness,
size, and the style of a text.

Note: In CSS1 fonts are identified by a font name. If a browser does not
support the specified font, it will use a default font.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation
the property is defined (CSS1 or CSS2).

CSS border

CSS Border Properties

The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element.

Browser support:
IE: Internet Explorer, F: Firefox, N: Netscape.

W3C:
The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

CSS outline

CSS Outline Properties

An outline is a line that is drawn around elements, outside the border edge, to make the element "stand out".

The CSS outline properties sets the outlines around elements. You can specify the style, color, and width of the outline.

Note:
Outlines do not take up space, and they do not have to be rectangular.

Browser support:
IE: Internet Explorer, F: Firefox, N: Netscape.

W3C:
The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

CSS margin

CSS Margin Properties

The 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.

Note:
Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well!

Browser support:
IE: Internet Explorer, F: Firefox, N: Netscape.

W3C:
The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Property Description Values IE F N W3C
margin A shorthand property for setting the margin properties in one declaration
margin-top


margin-right


margin-bottom


margin-left



4 1 4 1

margin-bottom

Sets the bottom margin of an element auto



length


%


4 1 4 1

margin-left

CSS padding

CSS Padding Properties

The 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.

Browser support:
IE: Internet Explorer, F: Firefox, N: Netscape.

W3C:
The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Property Description Values IE F N W3C
padding A shorthand property for setting all of the padding properties in one declaration
padding-top


padding-right


padding-bottom


padding-left



4 1 4 1

padding-bottom

Sets the bottom padding of an element
length


%

4 1 4 1

padding-left

Sets the left padding of an element
length


%

4 1 4 1

padding-right

CSS list

CSS List Properties

The CSS list properties allow you to place the list-item marker, change between different list-item markers, or set an image as the list-item marker.

Browser support:
IE: Internet Explorer, F: Firefox, N: Netscape.

W3C:
The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Syndicate content