Introduction to CSS CSS (cascading style sheets) is a stylesheet language that is used to define the presentation of a document written in a markup language such as HTML and XHTML, but the language can be applied to any kind of XML document. For example, it can be used to define the colors, fonts and layout of a web page. A cascading style sheet has a file extension of ".css". The CSS specifications are maintained by the World Wide Cosortium (W3C).

There are 3 ways to apply CSS to HTML • • •

internal styles (embedded) external style shees in-line styles

Internal Style Sheets An internal style sheet is only placed within the web page which they are intended for. The styles are placed within the openning and closing tags and the openning and closing <style> tags enclose all of the styles for the web page. The following HTML and CSS code is an example of an internal style sheet that will make the text within the paragraphs on that web page red. <style type="text/css"> p { color: red; }

the text in this paragraph will be red

the text in this paragraph is also going to be red

External Style Sheets External style sheets are styles that can be applied to as many web pages as you like that are on the same website. With external style sheets there are at least 2 documents: the document that the styles are on and the the web page that the styles apply to (of course you can apply the styles to multiple web pages on the same site). The web page(s) need to link to the style sheet by using the following code within the openning and closing tags. Now open a new (blank) document and copy and paste below HTML code into the document and save it as "whatever.html".

the text in this paragraph is red

I now know HTML and CSS

After you have saved the above HTML code as "whatever.html", open another new (blank) document and copy and paste the following CSS code. p { color: red; } Now upload both files to your website. The web page should have the following 2 paragraphs in it and the color of the text should be red. note: if you are not connected to the internet, you should link to the style sheet something like: file:///C:/Documents/mystylesheet.css depending on where on your computer the file is located. the text in this paragraph will be red I now know HTML and CSS

In-line Styles To use in-line styles you place the "style" attribute within the relevant HTML tag. The style attribute can contain any CSS property. An in-line style can apply to a whole HTML element or it can apply to a selected area within that element. For example it can apply to a whole paragraph or it can apply to only a string of text within the paragraph. The following HTML and CSS code shows you how to apply in-line styles.

the text in this paragraph is red

this is the <span style="color: red">best CSS and HTML tutorial available on the world wide web

The above HTML and CSS code will make a web page with the following 2 paragraphs. the text in this paragraph is red this is the best CSS and HTML tutorial available on the world wide web

CSS Background Code Tutorial You can define the background effects of an HTML element with the use of CSS background properties.

How to set the background color with CSS The following HTML and CSS code example shows you how to set the background color of an element. <style type="text/css"> body {background-color: yellow;} h1 {background-color: #00ff00;} h2 {background-color: red;} p {background-color: rgb(250,0,255);}

This is a level 1 header

This is a level 2 header

This is a paragraph

How to set an image as the background The HTML and CSS code example below shows you how to set an image as the background. <style type="text/css"> body { background-image: url('csshtmltutorial-image.jpg') }

How to repeat a background image The HTML and CSS code below shows you how to repeat a background image. <style type="text/css"> body { background-image: url('csshtmltutorial.jpg'); background-repeat: repeat; } The following link is to the web page that the above HTML and CSS code makes: HTML and CSS background example

How to repeat an image vertically only The HTML and CSS code example below shows you how to repeat a background image vertically only. <style type="text/css"> body { background-image: url('csshtmltutorial.jpg'); background-repeat: repeat-y; }

How to repeat a background image horizontally only The HTML and CSS code example below shows you how to repeat a background image horizontally only. <style type="text/css"> body { background-image: url('csshtmltutorial.jpg'); background-repeat: repeat-x; }

How to repeat one background image at a time The HTML and CSS code example below shows you how to display one background image at a time. <style type="text/css"> body { background-image: url('csshtmltutorial.jpg'); background-repeat: no-repeat; }

How to place a background image To place a background image, the background-position property is used. The values that can be used for the background-position property are: • • • • • • • • • • •

top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos

The HTML and CSS code example below shows you how to place a background image on a web page. <style type="text/css"> body { background-image: url('csshtmltutorial.jpg'); background-repeat: no-repeat; background-position: top center; }

How to place a background image using % The HTML and CSS code example below shows you how to place a background image on a web page using percent. <style type="text/css"> body { background-image: url('csshtmltutorial.jpg'); background-repeat: no-repeat; background-position: 75% 25%; }

How to place a background image using pixels The HTML and CSS code example below shows you how to place a background image on a web page using pixels. <style type="text/css"> body { background-image: url('csshtmltutorial.jpg'); background-repeat: no-repeat; background-position: 50px 200px; }

How to place a fixed background image The HTML and CSS code example below shows you how to place a fixed background image. <style type="text/css"> body { background-image: url('csshtmltutorial.jpg'); background-repeat: no-repeat; background-attachment: fixed; }

CSS Text Code Tutorial You can define the appearance of text with the use of CSS text properties.

How to set the color of text The below HTML and CSS code example shows you how to set the color of text with CSS. <style type="text/css"> h1 {color: #00ff00;} h3 {color: #dda0dd;} p {color: rgb(0,0,255);}

This is a level 1 header

This is a level 3 header

This is a paragraph

The above HTML and CSS code makes the level 1 and 2 headings and the paragraph below.

This is a level 1 header This is a level 3 header This is a paragraph

How to set the background color of text The below HTML and CSS code example shows you how to set the background color of text with CSS. <style type="text/css"> span.backgroundcolor { background-color:yellow; } <span class="backgroundcolor">This is a text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. <span class="backgroundcolor">This is a text.

The above HTML and CSS code make the paragraph below. This is a text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is a text.

How to increase or decrease the space between characters The HTML and CSS code example below shows you how to increase or decrease the space between characters. <style type="text/css"> h1 {letter-spacing: -3px;} h3 {letter-spacing: 0.5cm;}

This is a level 1 header

This is a level 3 header

The above HTML and CSS code make the level 1 and 2 headings below.

This is a level 1 header T

h

i

s

i

s

a

l

e

v

e

l

3

h

e

a

d

e

r

How to specify the space between lines The HTML and CSS code example below shows you how to specify the space between lines. <style type="text/css"> p.one { line-height: 90%; } p.two { line-height: 200%; }

This is a paragraph with a standard line-height. The default line height in most browsers is about 110% to 120%. This is a paragraph with a standard line-height. This is a paragraph with a standard line-height.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

The above HTML and CSS code example makes the 3 paragraphs below. This is a paragraph with a standard line-height. The default line height in most browsers is about 110% to 120%. This is a paragraph with a standard line-height. This is a paragraph with a standard line-height. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

CSS Font Code Tutorial You can define the font of text with the use of CSS font properties. The below HTML and CSS code example shows you how to set the font of text with CSS. <style type="text/css"> h3 {font-family: times;} h4 {font-family: courier;} p {font-family: arial;}

This is a level 3 header

This is a level 4 header

This is a paragraph

The above HTML and CSS code produce the following examples, with each having a different font style.

This is a level 3 header

This is a level 4 header This is a paragraph

How to set the font of a paragraph using the "caption" value <style type="text/css">

This is a normal paragraph

This is a paragraph with a "caption" font

The above HTML and CSS code makes the below paragraph. This is a normal paragraph This is a paragraph with a "caption" font

How to set the font size <style type="text/css"> h3 {font-size: 150%;} h4 {font-size: 130%;} p {font-size: 100%;}

This is a level 3 header

This is a level 4 header

This is a paragraph

The above HTML and CSS code produce the following examples.

This is a level 3 header This is a level 4 header This is a paragraph

How to set the size of a font using "font-size-adjust" <style type="text/css">

This is a paragraph.

<span style="font-size-adjust: 0.50;">This is a paragraph with a font-size-adjust of 0.50

<span style="font-size-adjust: 0.80;">This is a paragraph with a font-size-adjust of 0.80

The HTML and CSS code above will produce the paragraphs below. This is a paragraph with a font-size-adjust of 0.50 This is a paragraph with a font-size-adjust of 0.80

How to set the style of a font <style type="text/css"> p.styleone {font-style: normal;} p.styletwo {font-style: arial;} p.stylethree {font-style: italic;}

This paragraph has a normal font-style.

This paragraph has an italic font-style.

This paragraph has an oblique font-style.

The HTML and CSS code example above make the following paragraphs. This paragraph has a normal font-style. This paragraph has an italic font-style. This paragraph has an oblique font-style.

How to set the variant of a font <style type="text/css"> p.normal {font-variant: normal;} p.small {font-variant: small-caps;}

This is a paragraph with a font-variant of normal.

This is a paragraph with a font-variant of small-caps.

The above HTML and CSS code produce the 2 paragraphs below. This is a paragraph with a font-variant of normal. THIS

IS A PARAGRAPH WITH A FONT-VARIANT OF SMALL-CAPS.

How to set the boldness of a font <style type="text/css"> p.normal {font-weight: normal;} p.bold {font-weight: bold;} p.thick {font-weight: 600;}

This is a paragraph with font-weight of normal. This is a paragraph with a font-weight of bold.

This is a paragraph with a font-weight of 600.

The above HTML and CSS code example produces the 3 paragraphs below. This is a paragraph with a font-weight of normal. This is a paragraph with a font-weight of bold. This is a paragraph with a font-weight of 600.

CSS Padding Code Tutorial Padding is the space inside of an HTML element and the margin is the space outside of an HTML element.

How to set all of the padding properties in one declaration This example shows you how to set all of the padding properties in one declaration in an HTML element. <style type="text/css"> p.normal { border-style: solid; } p.padding { border-style: solid; padding: 0.5cm 2cm 4cm 8cm; }

This is a paragraph with specified padding.

This paragraph has a top padding of 0.5cm, a right padding of 2cm, a bottom padding of 4cm and left padding of 8cm.

This is a paragraph with specified padding.

How to set all of the padding properties in one declaration This example shows you how to set all of the padding properties in one declaration in an HTML element. <style type="text/css"> td.padding1 { padding: 1cm; } td.padding2 { padding: 2cm; } td.padding3 {padding: 0.5cm 2cm; } td.padding4 {padding: 0.5cm 4cm;}

This is a tablecell with equal padding of 1cm on each side.

This is a tablecell with equal padding of 2cm on each side.

This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2cm.

This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 4cm.