Scribd
Upload
107 views

Introduction To CSS: There Are 3 Ways To Apply CSS To HTML

CSS (Cascading Style Sheets) allows defining the presentation of HTML documents, including colors, fonts, and layout. There are three ways to apply CSS styles: internally within the HTML document, externally in a separate .css file linked from the HTML, or inline within individual HTML elements. The document then describes the different CSS properties for backgrounds, colors, images and positioning.

Uploaded by

profktr
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
107 views

Introduction To CSS: There Are 3 Ways To Apply CSS To HTML

CSS (Cascading Style Sheets) allows defining the presentation of HTML documents, including colors, fonts, and layout. There are three ways to apply CSS styles: internally within the HTML document, externally in a separate .css file linked from the HTML, or inline within individual HTML elements. The document then describes the different CSS properties for backgrounds, colors, images and positioning.

Uploaded by

profktr
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 16

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">
p
{
color: red;
}
</style>

</head>
<body>
<p>
the text in this paragraph will be red
</p>
<p>
the text in this paragraph is also going to be red
</p>
</body>
</html>
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 <head>
tags.

<link rel="stylesheet" type="text/css" href="mystylesheet.css" />

Now open a new (blank) document and copy and paste below HTML code into the document and save it as
"whatever.html".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<link rel="stylesheet" type="text/css" href="mystylesheet.css" />

</head>
<body>
<p>
the text in this paragraph is red
</p>
<p>
I now know HTML and CSS
</p>
</body>
</html>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <title>this is the title of the web page</title> </head>
<body>
<p style="color: red"> the text in this paragraph is red </p>
<p> this is the <span style="color: red">best CSS and HTML tutorial </span> available on the world wide web
</p>
</body>
</html>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
<style type="text/css">
body {background-color: yellow;}
h1 {background-color: #00ff00;}
h2 {background-color: red;}
p {background-color: rgb(250,0,255);}
</style>
</head>
<body>
<h1> This is a level 1 header </h1>
<h2> This is a level 2 header </h2>
<p> This is a paragraph </p>
</body>
</html>
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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

body
{
background-image:
url('csshtmltutorial-image.jpg')
}

</style>

</head>
<body>
</body>
</html>

How to repeat a background image

The HTML and CSS code below shows you how to repeat a background image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: repeat;
}

</style>

</head>
<body>
</body>
</html>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>
<style type="text/css">
body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: repeat-y;
}
</style>
</head>
<body>
</body>
</html>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: repeat-x;
}

</style>

</head>
<body>
</body>
</html>
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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>

<style type="text/css">

body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: no-repeat;
}
</style> </head> <body> </body> </html>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
<style type="text/css">
body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: no-repeat;
background-position: top center;
}
</style> </head> <body> </body> </html>
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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
<style type="text/css">
body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: no-repeat;
background-position: 75% 25%;
}
</style> </head> <body> </body>
</html>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
<style type="text/css">
body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: no-repeat;
background-position: 50px 200px;
}
</style>
</head> <body> </body> </html>

How to place a fixed background image

The HTML and CSS code example below shows you how to place a fixed background image.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head> <title>this is the title of the web page</title>
<style type="text/css">
body
{ background-image:
url('csshtmltutorial.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style> </head> <body> </body> </html>
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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
<style type="text/css">
h1 {color: #00ff00;}
h3 {color: #dda0dd;}
p {color: rgb(0,0,255);}
</style>
</head> <body>
<h1> This is a level 1 header </h1>
<h3> This is a level 3 header </h3>
<p> This is a paragraph </p>
</body> </html>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <title>this is the title of the web page</title>
<style type="text/css">
span.backgroundcolor
{
background-color:yellow;
}
</style>
</head> <body>
<span class="backgroundcolor">This is a text.</span> 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.</span>
</p>
</body>
</html>
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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">
h1
{letter-spacing: -3px;}
h3
{letter-spacing: 0.5cm;}
</style>

</head>
<body>
<h1>This is a level 1 header</h1>
<h3>This is a level 3 header</h3>
</body>
</html>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">
p.one
{
line-height: 90%; }
p.two
{
line-height: 200%;
}
</style>

</head>
<body>
<p>
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.
</p>
<p class="one">
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.
</p>
<p class="two">
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.
</p>
</body>
</html>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
<style type="text/css">
h3 {font-family: times;}
h4 {font-family: courier;}
p {font-family: arial;}
</style>
</head>
<body>
<h3> This is a level 3 header </h3>
<h4> This is a level 4 header </h4>
<p> This is a paragraph </p>
</body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

</style>

</head>
<body>
<p>
This is a normal paragraph </p>
<p style="font: caption">
This is a paragraph with a "caption" font
</p>
</body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">
h3 {font-size: 150%;}
h4 {font-size: 130%;}
p {font-size: 100%;}
</style>
</head>
<body>
<h3>
This is a level 3 header
</h3>
<h4>
This is a level 4 header
</h4>
<p>
This is a paragraph
</p>
</body>
</html>

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"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
<title>this is the title of the web page</title>
<style type="text/css">
</style>
</head>
<body>
<p> This is a paragraph. </p>
<p> <span style="font-size-adjust: 0.50;">This is a paragraph with a font-size-adjust of 0.50</span> </p>
<p> <span style="font-size-adjust: 0.80;">This is a paragraph with a font-size-adjust of 0.80</span> </p>
</body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
<style type="text/css">
p.styleone {font-style: normal;}
p.styletwo {font-style: arial;}
p.stylethree {font-style: italic;}
</style>
</head>
<body>
<p class="styleone">
This paragraph has a normal font-style.
</p>
<p class="styletwo">
This paragraph has an italic font-style.
</p>
<p class="stylethree"> This paragraph has an oblique font-style. </p>
</body> </html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
<style type="text/css">
p.normal {font-variant: normal;}
p.small {font-variant: small-caps;}
</style>
</head>
<body>
<p class="normal"> This is a paragraph with a font-variant of normal. </p>
<p class="small"> This is a paragraph with a font-variant of small-caps. </p>
</body> </html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
<style type="text/css">
p.normal {font-weight: normal;}
p.bold {font-weight: bold;}
p.thick {font-weight: 600;}
</style>
</head>
<body>
<p class="normal"> This is a paragraph with font-weight of normal. </pgt;
<p class="bold"> This is a paragraph with a font-weight of bold. </p>
<p class="thick"> This is a paragraph with a font-weight of 600. </p>
</body>
</html>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
<style type="text/css">
p.normal
{
border-style: solid;
}
p.padding
{
border-style: solid;
padding: 0.5cm 2cm 4cm 8cm;
}
</style>
</head>
<body>
<p class="normal">
This is a paragraph with specified padding.
</p>
<p class="padding1">
This paragraph has a top padding of 0.5cm, a right padding of 2cm, a bottom padding of 4cm and left padding of
8cm.
</p>
<p class="normal">
This is a paragraph with specified padding.
</p>
</body>
</html>
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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
<title>this is the title of the web page</title>
<style type="text/css">
td.padding1 { padding: 1cm; }
td.padding2 { padding: 2cm; }
td.padding3 {padding: 0.5cm 2cm; }
td.padding4 {padding: 0.5cm 4cm;}
</style>

</head>
<body>
<table border="1">
<tr>
<td class="padding1">
This is a tablecell with equal padding of 1cm on each side.
</td>
</tr>
</table>
<table border="1">
<tr>
<td class="padding2">
This is a tablecell with equal padding of 2cm on each side.
</td>
</tr>
</table>
<table border="1">
<tr>
<td class="padding3">
This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2cm.
</td>
</tr>
</table>
<table border="1">
<tr>
<td class="padding4">
This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 4cm.
</td>
</tr>
</table>
</body>
</html>

You might also like