Escolar Documentos
Profissional Documentos
Cultura Documentos
1. Inline Style
h1
{
font:verdana;
font-size:24px;
color:red;
}
p
{
font:times new roman;
font-size:12px;
color:blue;
}
1. id Selector
2. class Selector
THE ID SELECTOR
Used to Specify Style for Single Element
#paragraph
{
align:center;
font-size:18px;
}
#heading
{
align:right;
font-size:24px;
}
THE ID SELECTOR----EXAMPLE
<html>
<head>
<style type="text/css">
#para1
{
text-align:right;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
THE CLASS SELECTOR
Used to Specify Style for Group of Element
.paragraph
{
align:center;
font-size:18px;
}
THE CLASS SELECTOR----EXAMPLE
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned
heading</h1>
<p class="center">Center-aligned
paragraph.</p>
</body>
</html>
CSS BACKGROUND COLOR
Uses background-color Property
<html>
<head>
<style type="text/css">
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>Background Color</h1>
<p>Paragraph</p>
</body>
</html>
CSS BACKGROUND IMAGE
<html>
<head>
<style type="text/css">
body {background-
image:url('paper.gif');}
</style>
</head>
<body>
<h1>Background Image</h1>
</body>
</html>
CSS FONT FAMILY
<html>
<head>
</head>
<body>
<p style="font-family:georgia,garamond,serif;">This text
is rendered in either georgia, garamond, or the default serif
font (depending on which font the user's system has).</p>
</body>
</html>
CSS FONT SIZE
<html>
<head>
</head>
<body>
<p style="font-size:20px;">This text is using a font size of 20
pixels.</p>
</body>
</html>
CSS FONT ADJUST SIZE
<html>
<head>
</head>
<body>
<p style="font-size-adjust:0.58;">This text is using a font-
size-adjust value.</p>
</body>
</html>
CSS FONT STRETCH
<html>
<head>
</head>
<body>
<p style="font-stretch:ultra-expanded;">If your computer
has an expanded version of the font being used, this text will
be stretched.</p>
</body>
</html>
CSS FONT STYLE
<html>
<head>
</head>
<body>
<p style="font-style:italic;">This text is in italics.</p>
</body>
</html>
CSS FONT VARIANT
<html>
<head>
</head>
<body>
<p style="font-variant:small-caps;">This Text Is Using
Small Caps.</p>
</body>
</html>
FONT WEIGHT
<html>
<head>
</head>
<body>
<p style="font-weight:bold;">This text is bold.</p>
</body>
</html>
CSS FONT PROPERTY
<html>
<head>
</head>
<body>
<p style="font:italic small-caps bold 20px
georgia,garamond,serif;">The styles for this text has been
specified with the 'font' shorthand property.</p>
</body>
</html>
CSS TEXT COLOR
<html>
<head>
</head>
<body>
<p style="color:olive;">This CSS text color is olive</p>
</body>
</html>
CSS TEXT ALIGN
<html>
<head>
</head>
<body>
<p style="text-align:right;">This CSS text is aligned
right</p>
</body>
</html>
CSS LETTER SPACING
<html>
<head>
</head>
<body>
<p style="letter-spacing:5px;">This text has letter spacing
applied</p>
</body>
</html>
CSS WORD SPACING
<html>
<head>
</head>
<body>
<p style="word-spacing:50px;">This text has word spacing
applied</p>
</body>
</html>
TEXT DECORATION
<html>
<head>
</head>
<body>
<p style="text-decoration:overline;">This text has a line over
the top</p>
<p style="text-decoration:line-through;">This text has a line
through the middle</p>
<p style="text-decoration:underline;">This text has a line
underneath</p>
</body>
</html>
TEXT TRANSFORM
<html>
<head>
</head>
<body>
<p style="text-transform:uppercase;">This text has been
transformed to uppercase</p>
<p style="text-transform:lowercase;">THIS TEXT HAS BEEN
TRANSFORMED TO LOWERCASE</p>
<p style="text-transform:capitalize;">this text has been
capitalized.</p>
</body>
</html>
CSS TEXT DIRECTION
<html>
<head>
</head>
<body>
<p style="direction:rtl;">This text is running from right to
left.</p>
</body>
</html>
CSS TEXT SHADOW
<html>
<head>
</head>
<body>
<p style="text-shadow:4px 4px 8px blue;">If your browser
supports the CSS text-shadow property, this text will have a
shadow.</p>
</body>
</html>
CSS TEXT BACKGROUND COLOR
<html>
<head>
</head>
<body>
<p style="background-color:yellow;">This text has a
background color applied.</p>
</body>
</html>
CSS TEXT BACKGROUND IMAGE
<html>
<head>
</head>
<body>
<p style="height:100px;background-
image:url(1.png);">This text has a background image
applied. </p>
</body>
</html>
CSS BACKGROUND IMAGE REPEAT
<html>
<head>
</head>
<body>
<p style="height:100px;background-
image:url(1.png);background-repeat:repeat-x;">This
background image repeat w.r.t x direction </p>
</body>
</html>
CSS BORDER STYLES
<html>
<head>
</head>
<body>
<p style="border:4px solid blue;“>Solid Border</p>
<p style="border:4px dotted blue;">Dotted Border</p>
<p style="border:4px dashed blue;">Dashed Border</p>
<p style="border:4px double blue;">Double Border</p>
</body>
</html>
CSS BORDER WIDTH
<html>
<head>
</head>
<body>
<p style="border-width:6px;border-style:solid;” >This text
has border styles border width=6px</p>
</body>
</html>
CSS BORDER COLOR
<html>
<head>
</head>
<body>
<p style="border-width:1px;border-style:solid;border-
color:blue;">This text has border styles applied using the
border-width, border-style, and border-color properties.</p>
</body>
</html>
CSS MARGINS ALL SIDES
<html>
<head>
</head>
<body>
<div style="border:1px solid blue;"><p style="border:1px solid
orange;margin:20px;">This text has a margin of 20 pixels on
all four sides.It is nested within a div with a border to make it
easier to see the effect of the margin.</p>
</div>
</body>
</html>
CSS MARGINS EACH SIDE
<html>
<head>
</head>
<body>
<div style="border:1px solid blue;width:200px;"><p
style="border:1px solid orange;margin:40px 10px 1px
40px;">This text has a different sized margin for each side. It
is nested within a div with a border to make it easier to see the
effect of the margin.</p></div>
</body>
</html>
CSS PADDING ALL SIDES
<html>
<head>
</head>
<body>
<p style="border:1px solid orange;padding:20px;">This text
has padding of 20 pixels on all four sides.</p>
</body>
</html>
CSS PADDING EACH SIDE
<html>
<head>
</head>
<body>
<p>With padding:</p>
<div style="border:1px solid orange;width:100px;padding:20px
10px 0px 100px;">Padded div</div>
<p>Without padding:</p>
<div style="border:1px solid orange;width:100px;">Non-padded
div</div>
</body>
</html>
CSS LIST TYPES
<html>
<head>
</head>
<body>
<ul style="list-style-type:circle;">
<li>List item one</li>
<li>List item two</li>
</ul>
</body>
</html>
CSS LIST STYLE IMAGE
<html>
<head>
<title>Image Bullets</title>
</head>
<body>
<h4>Custom Bullets</h4>
<ul style=“list-style-image: url(bullet_img.gif)"
>
<li>America</li>
<li>England</li>
<li>Pakistan</li>
<li>Austrailia</li>
</ul>
</body>
</html>
CSS LIST STYLE POSITION
<html>
<head>
</head>
<body>
<ul style="list-style-position:inside;">
<li>List item one</li><li>List item two</li>
</ul>
<ul style="list-style-position:outside;">
<li>List item one</li><li>List item two</li>
</ul>
</body>
</html>
CSS MARKER OFFSET
<html>
<head>
</head>
<body>
<ul>
<li style="display:marker;marker-offset:10px;">
List item one
</li>
<li>List item two</li>
</ul>
</body>
</html>
CSS HEIGHT AND WIDTH
<html>
<head>
</head>
<body>
<div style="background-
color:orange;height:125px;width:75px;">This div has height
and width applied.</div>
</body>
</html>
CSS MAXIMUM HEIGHT AND MAXIMUM
WIDTH
<html>
<head>
</head>
<body>
<div style="background-color:orange;max-height:125px;max-
width:75px;">This div has max-height and max-width
applied.</div>
</body>
</html>
CSS MINIMUM HEIGHT AND MINIMUM
WIDTH
<html>
<head>
</head>
<body>
<div style="background-color:orange;min-height:125px;min-
width:75px;">This div has min-height and min-width
applied.</div>
</body>
</html>
CSS RELATIVE POSITIONING
<html>
<head>
</head>
<body>
<div style="position:relative;left:80px;background-
color:yellow;width:100px;">This div has relative
positioning.</div>
</body>
</html>
CSS ABSOLUTE POSITIONING
<html>
<head>
</head>
<body>
<div
style="position:absolute;top:100px;left:60px;background-
color:yellow;">
This div is absolutely positioned 100 pixels from the top and 60
pixels from the left of its containing block.
</div>
</body>
</html>
CSS FIXED POSITIONING
<html>
<head>
</head>
<body>
<div
style="position:fixed;top:100px;left:60px;width:180px;backg
round-color:red;">
This div is using a fixed position of 100 pixels from the top and
60 pixels from the left of its containing block. When this page
scrolls, this box will remain in a fixed position - it won't scroll
with the rest of the page. Go on - SCROLL!
</div>
</body>
</html>
CSS FLOAT
The CSS float property enables you to determine where
to position an element relative to the other elements on the
page. When you use the float property, other elements will
simply wrap around the element you applied the float to.
<html>
<head>
</head>
<body>
<div style="width:300px;">
<h1 style="float:left;margin-right:10px;">CSS float</h1>
<p>If your browser supports the CSS float Property, this text
will be flowing around the heading.If this does not seem to
work, it could be a browser compatibility thing...</p>
</div>
</body>
</html>
CSS CELL PADDING
<html>
<head>
</head>
<body>
<table border="1" cellpadding="10px">
<tr>
<td>Padded Cell 1</td>
<td>Padded Cell 2</td>
</tr>
<tr>
<td>Padded Cell 3</td>
<td>Padded Cell 4</td>
</tr>
</table>
</body>
</html>
CSS PADDING EXAMPLE
<html>
<head>
<style type="text/css">
table.padded-table td
{
padding:10px;
}
</style>
</head>
<body>
<table border="1" class="padded-table">
<tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr>
<tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr>
</table>
</body>
</html>
PADDING EACH SIDE INDEPENDENTLY
<html>
<head>
<style type="text/css">
table.padded-table-2 td
{
padding-top:20px;
padding-right:10px;
padding-bottom:0px;
padding-left:100px;
}
</style>
</head>
<body>
<table border="1" class="padded-table-2">
<tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr>
<tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr>
</table></body></html>
CSS HYPERLINKS
You can use CSS to change the appearance and
behavior of hyperlinks.
To do this, you can use the following
selectors/pseudo-classes:
1. a
2. a:link
3. a:visited
4. a:hover
5. a:active
CSS HYPERLINKS EXAMPLE
<html>
<head>
<style type="text/css">
a {font-family:Georgia, "Times New Roman", Times, serif;font-size:large;cursor:
auto}
a:link {color:blue;}
a:visited {color: #660066;}
a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}
a:active {color: #ff0000;text-decoration: none}
</style>
</head>
<body>
<p><a href="/css/css_hyperlinks.cfm" target="_blank">CSS Hyperlinks</a></p>
</body>
<head>
<style type="text/css">
a {font-family:Georgia, "Times New Roman", Times, serif;font-size:large;cursor:
auto}
a:link {color:blue;}
a:visited {color: #660066;}
a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}
a:active {color: #ff0000;text-decoration: none}
</style>
</head>
<body>