CSS – Cascading Style Sheets

What is CSS?

• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files

Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file

Three Ways to Insert CSS – Types of CSS

There are three ways of inserting a style sheet:

• External style sheet
• Internal style sheet
• Inline style

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 tag. The tag goes inside the head section:

  

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 is shown below: 

 hr {color:blue} p {margin-left:20px}  

 body {background-color:pink}

Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "margin-left:20px") will work in IE, but not in Firefox or Opera.

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 of an HTML page, by using the

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation.

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:

This is a paragraph.

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.

Multiple Styles Will Cascade into One

Styles can be specified:

• inside an HTML element
• inside the head section of an HTML page
• in an external CSS file

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 number four has the highest priority:

1. Browser default

2. External style sheet

3. Internal style sheet (in the head section)

4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or in a browser (a default value).

Note: If the link to the external style sheet is placed after the internal style sheet in HTML , the external style sheet will override the internal style sheet!

Now we explain style sheet in detail…. 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 want 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 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.

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:

This paragraph will be right-aligned.

This paragraph will be center-aligned.

Note: To apply more than one class per given element, the syntax is:

This is a paragraph.

The paragraph above will be styled by the class "center" AND the class "bold".

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:

.center {text-align:center}

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:

This heading will be center-aligned

This paragraph will also be center-aligned.

Do Not start a class name with a number! This is only supported in Internet Explorer.

Add Styles to Elements with Particular Attributes

You can also apply styles to HTML elements with particular attributes.

The style rule below will match all input elements that have a type attribute with a value of "text":

input[type="text"] {background-color:blue}

  The id Selector

You can also define styles for HTML elements with the id selector. The id selector is defined as a #.

The style rule below will match the element that has an id attribute with a value of "green":

#green {color:green}

The style rule below will match the p element that has an id with a value of "para1":

p#para1{   text-align:center;   color:red}

Do not start an ID name with a number! It will not work in Mozilla/Firefox.

CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. 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}

When a browser reads a style sheet, it will format the document according to it.

Background Color

The background-color property specifies the background color of an element.

The background color of a page is defined in the body selector:

Example

body {background-color:#b0c4de}

The background color can be specified by:

• name - a color name, like "red"
• RGB - an RGB value, like "rgb(255,0,0)"
• Hex - a hex value, like "#ff0000"

In the example below, the h1, p, and div elements have different background colors:

Example

h1 {background-color:#6495ed}p {background-color:#e0ffff}div {background-color:#b0c4de}

 Background Image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

Example

body {background-image:url('paper.gif')}

 All CSS Background Properties

Property

Description

Values

background

Sets all the background properties in one declaration

background-colorbackground-imagebackground-repeat background-attachment background-positioninherit

background-attachment

Sets whether a background image is fixed or scrolls with the rest of the page

scrollfixedinherit

background-color

Sets the background color of an element

color-rgbcolor-hexcolor-nametransparentinherit

background-image

Sets the background image for an element

url(URL)noneinherit

background-position

Sets the starting position of a background image

top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx% y%xpos yposinherit

background-repeat

Sets if/how a background image will be repeated

repeatrepeat-xrepeat-yno-repeatinherit

Text Color

The color property is used to set the color of the text. The color can be specified by:

• name - a color name, like "red"
• RGB - an RGB value, like "rgb(255,0,0)"
• Hex - a hex value, like "#ff0000"

The default color for a page is defined in the body selector.

Example

body {color:blue}h1 {color:#00ff00}h2 {color:rgb(255,0,0)}

 Text Alignment

The text-align property is used to set the horizontal alignment of a text.

Text can be centered, or aligned to the left or right, or justified.

When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

Example

h1 {text-align:center}p.date {text-align:right}p.main {text-align:justify}

 Text Decoration

The text-decoration property is used to set or remove decorations from text.

The text-decoration property is mostly used to remove underlines from links for design purposes:

Example

a {text-decoration:none}

It can also be used to decorate text:

Example

h1 {text-decoration:overline}h2 {text-decoration:line-through}h3 {text-decoration:underline}h4 {text-decoration:blink}

It is not recommended to underline text that is not a link, as this often confuse users.

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.

Example

p.uppercase {text-transform:uppercase}p.lowercase {text-transform:lowercase}p.capitalize {text-transform:capitalize}

   Text Indentation

The text-indentation property is used to specify the indentation of the first line of a text.

Example

p {text-indent:50px}

All CSS Text Properties

Property

Description

Values

color

Sets the color of a text

color

direction

Sets the text direction

ltrrtl

line-height

Sets the distance between lines

normalnumberlength%

letter-spacing

Increase or decrease the space between characters

normallength

text-align

Aligns the text in an element

leftrightcenterjustify

text-decoration

Adds decoration to text

noneunderlineoverlineline-throughblink

text-indent

Indents the first line of text in an element

length%

text-shadow

nonecolorlength

text-transform

Controls the letters in an element

nonecapitalizeuppercaselowercase

unicode-bidi

normalembedbidi-override

vertical-align

Sets the vertical alignment of an element

baselinesubsupertoptext-topmiddlebottomtext-bottomlength%

white-space

Sets how white space inside an element is handled

normalprenowrap

word-spacing

Increase or decrease the space between words

normallength

CSS Font Families

In CSS, there is two types of font family names:

• generic family - a group of font families with a similar look (like "Serif" or "Monospace")
• font family - a specific font family (like "Times New Roman" or "Arial")

Generic family

Font family

Description

Serif

Times New RomanGeorgia

Serif fonts have small lines at the ends on some characters

Sans-serif

ArialVerdana

"Sans" means without - these fonts do not have the lines at the ends of characters

Monospace

Courier NewLucida Console

All monospace characters has the same width

Font Family

The font family of a text is set with the font-family property.

The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman".

More than one font family is specified in a comma-separated list:

Example

p{font-family:"Times New Roman",Georgia,Serif}

Font Style

The font-style property is mostly used to specify italic text.

This property has three values:

• normal - The text is shown normally
• italic - The text is shown in italics
• oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Example

p.normal {font-style:normal}p.italic {font-style:italic}p.oblique {font-style:oblique}

Font Size

The font-size property sets the size of the text.

Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.

Always use the proper HTML tags, like

-

for headings and

for paragraphs.

The font-size value can be an absolute, or relative size.

Absolute size:

• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
• Absolute size is useful when the physical size of the output is known

Relative size:

• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers

If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

Setting Text Size Using Pixels

Setting the text size with pixels, gives you full control over the text size:

Example

h1 {font-size:40px}h2 {font-size:30px}p {font-size:14px}

The example above allows Firefox, Chrome, and Safari to resize the text, but not Internet Explorer.

The text can be resized in all browsers using the zoom tool (however, this resizes the entire page, not just the text).

Setting Text Size Using Em

To avoid the resizing problem with Internet Explorer, many developers use em instead of pixels.

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

Example

h1 {font-size:2.5em} /* 40px/16=2.5em */h2 {font-size:1.875em} /* 30px/16=1.875em */p {font-size:0.875em} /* 14px/16=0.875em */

In the example above, the text size in em is the same as the previous example in pixels. However, with the em size, it is possible to adjust the text size in all browsers.

Unfortunately, there is still a problem with IE. When resizing the text, it becomes larger than it should when made larger, and smaller than it should when made smaller.

Using a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for the body element:

Example

body {font-size:100%}h1 {font-size:2.5em}h2 {font-size:1.875em}p {font-size:0.875em}

Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text!

All CSS Font Properties

Property

Description

Values

font

Sets all the font properties in one declaration

font-stylefont-variantfont-weightfont-size/line-heightfont-familycaptioniconmenumessage-boxsmall-captionstatus-barinherit

font-family

Specifies the font family for text

family-namegeneric-familyinherit

font-size

Specifies the font size of text

xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength%inherit

font-style

Specifies the font style for text

normalitalicobliqueinherit

font-variant

Specifies whether or not a text should be displayed in a small-caps font

normalsmall-capsinherit

font-weight

Specifies the weight of a font

normalboldbolderlighter100200300400500600700800900inherit

CSS Border Properties

The CSS border properties allow you to specify the style and color of an element's border.

Border Style

The border-style property specifies what kind of border to display.

None of the other border properties will have any effect unless border-style is set.

border-style Values

none: Defines no border

dotted: Defines a dotted border

dashed: Defines a dashed border

solid: Defines a solid border

double: Defines two borders. The width of the two borders are the same as the border-width value

groove: Defines a 3D grooved border. The effect depends on the border-color value

ridge: Defines a 3D ridged border. The effect depends on the border-color value

inset: Defines a 3D inset border. The effect depends on the border-color value

outset: Defines a 3D outset border. The effect depends on the border-color value

Border Width

The border-width property is used to set the width of the border.

The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.

Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Example

p.one{   border-style:solid;   border-width:5px;}p.two{   border-style:solid;   border-width:medium;}

Border Color

The border-color property is used to set the color of the border. The color can be set by:

• name - specify a color name, like "red"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• Hex - specify a hex value, like "#ff0000"

You can also set the border color to "transparent".

Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Example

p.one{   border-style:solid;   border-color:red;}p.two{   border-style:solid;   border-color:#98bf21;}

Border - Individual sides

In CSS it is possible to specify different borders for different sides:

 Example

p{   border-top-style:dotted;   border-right-style:solid;   border-bottom-style:dotted;   border-left-style:solid;}

The example above can also be set with a single property:

Example

border-style:dotted solid;

The border-style property can have from one to four values.

• border-style:dotted solid double dashed;
  • top border is dotted
  • right border is solid
  • bottom border is double
  • left border is dashed
• border-style:dotted solid double;
  • top border is dotted
  • right and left borders are solid
  • bottom border is double
• border-style:dotted solid;
  • top and bottom borders are dotted
  • right and left borders are solid
• border-style:dotted;
  • all four borders are dotted

The border-style property is used in the example above. However, it also works with border-width and border-color.

Border - Shorthand property

As you can see from the examples above, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the border properties in one property. This is called a shorthand property.

The shorthand property for the border properties is "border":

Exampleborder:5px solid red;

When using the border property, the order of the values are:

• border-width
• border-style
• border-color

It does not matter if one of the values above are missing (although, border-style is required), as long as the rest are in the specified order.

All CSS Border Properties

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

Property

Description

Values

CSS

border

Sets all the border properties in one declaration

border-widthborder-styleborder-color

1

border-bottom

Sets all the bottom border properties in one declaration

border-bottom-widthborder-bottom-styleborder-bottom-color

1

border-bottom-color

Sets the color of the bottom border

border-color

2

border-bottom-style

Sets the style of the bottom border

border-style

2

border-bottom-width

Sets the width of the bottom border

border-width

1

border-color

Sets the color of the four borders

color_namehex_numberrgb_numbertransparentinherit

1

border-left

Sets all the left border properties in one declaration

border-left-widthborder-left-styleborder-left-color

1

border-left-color

Sets the color of the left border

border-color

2

border-left-style

Sets the style of the left border

border-style

2

border-left-width

Sets the width of the left border

border-width

1

border-right

Sets all the right border properties in one declaration

border-right-widthborder-right-styleborder-right-color

1

border-right-color

Sets the color of the right border

border-color

2

border-right-style

Sets the style of the right border

border-style

2

border-right-width

Sets the width of the right border

border-width

1

border-style

Sets the style of the four borders

nonehiddendotteddashedsoliddoublegrooveridgeinsetoutsetinherit

1

border-top

Sets all the top border properties in one declaration

border-top-widthborder-top-styleborder-top-color

1

border-top-color

Sets the color of the top border

border-color

2

border-top-style

Sets the style of the top border

border-style

2

border-top-width

Sets the width of the top border

border-width

1

border-width

Sets the width of the four borders

thinmediumthicklengthinherit

1

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

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 margins at once.

Possible Values

Value

Description

auto

The browser sets the margin.The result of this is dependant of the browser

length

Defines a fixed margin (in pixels, pt, em, etc.)

%

Defines a margin in % of the containing element

Note: It is possible to use negative values, to overlap content.

Margin - Individual sides

In CSS, it is possible to specify different margins for different sides:

Examplemargin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px; Margin - Shorthand property

To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property.

The shorthand property for all the margin properties is "margin":

Examplemargin:100px 50px;

The margin property can have from one to four values.

• margin:25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px
• margin:25px 50px 75px;
  • top margin is 25px
  • right and left margins are 50px
  • bottom margin is 75px
• margin:25px 50px;
  • top and bottom margins are 25px
  • right and left margins are 50px
• margin:25px;
  • all four margins are 25px

All CSS Margin Properties

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

Property

Description

Values

CSS

margin

A shorthand property for setting the margin properties in one declaration

margin-topmargin-rightmargin-bottommargin-left

1

margin-bottom

Sets the bottom margin of an element

autolength%

1

margin-left

Sets the left margin of an element

autolength%

1

margin-right

Sets the right margin of an element

autolength%

1

margin-top

Sets the top margin of an element

autolength%

1

Padding

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

Possible Values

Value

Description

length

Defines a fixed padding (in pixels, pt, em, etc.)

%

Defines a padding in % of the containing element

Padding - Individual sides

In CSS, it is possible to specify different padding for different sides:

Examplepadding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;Padding - Shorthand property

To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property.

The shorthand property for all the padding properties is "padding":

Examplepadding:25px 50px;

The padding property can have from one to four values.

• padding:25px 50px 75px 100px;
  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px
• padding:25px 50px 75px;
  • top padding is 25px
  • right and left paddings are 50px
  • bottom padding is 75px
• padding:25px 50px;
  • top and bottom paddings are 25px
  • right and left paddings are 50px
• padding:25px;
  • all four paddings are 25px

All CSS Padding Properties

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

Property

Description

Values

CSS

padding

A shorthand property for setting all the padding properties in one declaration

padding-toppadding-rightpadding-bottompadding-left

1

padding-bottom

Sets the bottom padding of an element

length%

1

padding-left

Sets the left padding of an element

length%

1

padding-right

Sets the right padding of an element

length%

1

padding-top

Sets the top padding of an element

length%

1

List

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.

In HTML, there are two types of lists:

• unordered list - the list items are marked with bullets (typically circles or squares)
• ordered list - the list items are marked with numbers or letters

With CSS, lists can be styled further, and images can be used as list item markers.

Different List Item Markers

It is possible to specify the type of list item marker with the list-style-type property:

Exampleul.circle {list-style-type:circle}ul.square {list-style-type:square}ol.upper-roman {list-style-type:upper-roman}ol.lower-alpha {list-style-type:lower-alpha}

Some of the values are for unordered lists, and some for ordered lists.

Unordered List - Possible Values

Value

Description

none

No marker

disc

Default. The marker is a filled circle

circle

The marker is a circle

square

The marker is a square

Ordered List - Possible Values

Value

Description

none

No marker

circle

The marker is a circle

disc

The marker is a filled circle. This is default

square

The marker is a square

armenian

The marker is traditional Armenian numbering

decimal

The marker is a number

decimal-leading-zero

The marker is a number padded by initial zeros (01, 02, 03, etc.)

georgian

The marker is traditional Georgian numbering (an, ban, gan, etc.)

lower-alpha

The marker is lower-alpha (a, b, c, d, e, etc.)

lower-greek

The marker is lower-greek (alpha, beta, gamma, etc.)

lower-latin

The marker is lower-latin (a, b, c, d, e, etc.)

lower-roman

The marker is lower-roman (i, ii, iii, iv, v, etc.)

upper-alpha

The marker is upper-alpha (A, B, C, D, E, etc.) 

upper-latin

The marker is upper-latin (A, B, C, D, E, etc.)

upper-roman

The marker is upper-roman (I, II, III, IV, V, etc.)

Note: Internet Explorer does not support all property values for ordered lists.

Positioning the List

The list-style-position property specifies the indentation of a list.

"outside" is the default value. The "inside" value further indents the list:

Exampleul.inside {list-style-position:inside}ul.outside {list-style-position:outside}Using an Image as List Item Marker

It is also possible to use an image as a list item marker:

Exampleul{list-style-image:url('arrow.gif');}

The example above will not show the exact same result in all browsers. IE and Opera will display the images slightly higher than in Firefox, Chrome, and Safari.

The example above will be fine for most occasions. However, there is a way to position the image more precisely.

For the same result in all browsers, you will have to use a background image on each list item, like this:

Exampleul{list-style-type:none;padding:0px;margin:0px;}li{background-image:url(arrow.gif);background-repe

at:no-repeat;background-position:0px 5px; padding-left:14px; }

Example explained:

• For ul:
  • Set the list-style-type to none to remove the list item marker
  • Both padding and margin must be set to 0px for cross-browser compatibility
• For li:
  • Set the URL of the image, and show it only once (no-repeat)
  • Use the background-position property to place the image where you want it (left 0px and down 5px)
  • Use the padding-left property to position the text in the list

List - Shorthand property

It is possible to specify all the list properties in a single property. This is called a shorthand property.

The shorthand property for list is "list-style":

Examplelist-style:square inside;

When using the shorthand property, the order of the values are:

• list-style-type
• list-style-position
• list-style-image

It does not matter if one of the values above are missing, as long as the rest are in the specified order.

All CSS List Properties

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

Property

Description

Values

CSS

list-style

Sets all the properties for a list in one declaration

list-style-typelist-style-positionlist-style-imageinherit

1

list-style-image

Specifies an image as the list-item marker

URLnoneinherit

1

list-style-position

Specifies where to place the list-item marker

insideoutsideinherit

1

list-style-type

Specifies the type of list-item marker

nonedisccirclesquaredecimaldecimal-leading-zeroarmeniangeorgianlower-alphaupper-alphalower-greeklower-latinupper-latinlower-romanupper-romaninherit

1