CSS Basics - Stylesheets and Color

Inline Style
• <tag style=”color: black; font-size: 16pt; “>text
to be styled</tag>
• Drawback: labor intensive; style is only
applied one tag at a time

What if we could apply a single style to
many tags at once?
• We can, by separating the styling code (CSS)
from the information on the page (HTML).

Method 1: Move styling to the
<head> section
Syntax:
selector {property: value; property: value;}
Or:
selector {
property: value;
property: value;
}

Example:
<head>
<style type="text/css">
p {
font-family: Verdana;
color: #000099;
font-size: 12pt;
}
h1 {
font-family: Tahoma;
color: #000;
font-size: 24pt;
font-weight: bold;
}
</style>
<head>

Method 2: Move the styling to a
separate document
Web page content: index.html
Styling: stylesheet.css
Insert a <link> tag into the <head> section of the
html file.

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

All that page contains is the selectors
and declarations
p {
font-family: Verdana;
color: #000099;
font-size: 12pt;
}

Specifying Color
• Can choose from a list of standard colors and
call them by name, but this limits you to a few
dozen “web-safe” colors.
• We can actually choose from…

16 million colors.
• color: black = color: #000000
• color: white = color: #ffffff

Every digit can be one of 16 choices
(hexadecimal):
0 1 2 3 4 5 6 7 8 9 A B C D E F
0 is no color, F is the brightest

16 million
There are two digits each for red, green, and
blue, so 16 x 16 = 256
256 red levels
256 green levels
x 256 blue levels
16,777,216
possible colors

Examples
Bright red: #ff0000
Bright green: #00ff00
Bright blue: #0000ff

CSS Basics - Stylesheets and Color

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to CSS Basics - Stylesheets and Color

Similar to CSS Basics - Stylesheets and Color (20)

Recently uploaded

Recently uploaded (20)

CSS Basics - Stylesheets and Color