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

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

strict.dtd">
<head>
<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.

strict.dtd">
<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">

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

strict.dtd">
<head>
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.

strict.dtd">
<head>
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.

strict.dtd">
<head>
body
{
background-image:
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.

strict.dtd">
<head>
body
{
background-image:
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.

strict.dtd">
<head>
body
{
background-image:
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.

strict.dtd">
<head>
body
{
background-image:
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.

strict.dtd">
<head>
body
{
background-image:
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.

strict.dtd">
<head>
body
{
background-image:
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.

<head> <title>this is the title of the web page</title>
body
{ background-image:
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
h1 {color: #00ff00;}
h3 {color: #dda0dd;}
p {color: rgb(0,0,255);}
</style>
</head> <body>
</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 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.

strict.dtd">
<head> <title>this is the title of the web page</title>
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.

strict.dtd">
<head>
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.

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.

strict.dtd">
<head>
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">
</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.
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.

strict.dtd">
<head>
h3 {font-family: times;}
h4 {font-family: courier;}
p {font-family: arial;}
</style>
</head>
<body>
</body>
</html>
The above HTML and CSS code produce the following examples, with each having a different font style.

This is a paragraph
How to set the font of a paragraph using the "caption" value

strict.dtd">
<head>
</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

strict.dtd">
<head>
h3 {font-size: 150%;}
h4 {font-size: 130%;}
p {font-size: 100%;}
</style>
</head>
<body>
<h3>
</h3>
<h4>
</h4>
<p>
This is a paragraph
</p>
</body>
</html>
The above HTML and CSS code produce the following examples.

This is a paragraph
How to set the size of a font using "font-size-adjust"

strict.dtd">

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

strict.dtd">
<head>
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

strict.dtd">
<head>
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

strict.dtd">
<head>
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.

strict.dtd">
<head>
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.

strict.dtd">

<head>
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>
This is a tablecell with equal padding of 2cm on each side.
</td>
</tr>
</table>
<table border="1">
<tr>
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>
This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 4cm.
</td>
</tr>
</table>
</body>
</html>

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

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

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

Hochgeladen von

Copyright:

Verfügbare Formate

Introduction to CSS

There are 3 ways to apply CSS to HTML

• internal styles (embedded)

Internal Style Sheets

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

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

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

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

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

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

the text in this paragraph will be red

I now know HTML and CSS

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

the text in this paragraph is red

CSS Background Code Tutorial

How to set the background color with CSS

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

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

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

How to repeat a background image

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

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

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

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

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-

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

How to place a background image

To place a background image, the background-position property is used.

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

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

How to place a background image using pixels

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

How to place a fixed background image

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

How to set the color of text

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

This is a level 1 header

How to set the background color of text

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

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-

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

This is a level 1 header

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

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

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

This is a level 4 header

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-

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

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-

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

This is a level 3 header

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

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

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