CSS (Cascading Style Sheets) is used to style and lay out web documents. There are three levels of CSS, and CSS selectors are used to apply styles to HTML elements. Styles can be defined internally, externally, or inline. Common CSS properties include fonts, text, backgrounds, borders, positioning, and the box model which describes the layout of elements.
6. HTML FILE
<html> <head>
<link rel="stylesheet" type="text/css"
href="test.css" />
</head>
<body>
<h3> A White Header </h3> <p> This
paragraph has a blue font. The background
color of this page is gray because we changed
it with CSS! </p> </body> </html>
7. Why Use External CSS?
It keeps your website design and content
separate.
It's much easier to reuse your CSS code if you
have it in a separate file. Instead of typing the
same CSS code on every web page you have,
simply have many pages refer to a single CSS
file with the "link" tag.
You can make drastic changes to your web
pages with just a few changes in a single CSS
file.
8. INTERNAL STYLE SHEETS
<html> <head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style> </head>
<body>
<p>White text on a black background!</p>
</body>
</html>
9. Inline style sheets
<html> <head>
<title>welcome</title>
<body>
<p style="background: blue; color: white;">A
new background and font color with inline
CSS</p>
</body>
</html>
10. CSS Classes
CSS Code:
p.first{ color: blue; } p.second{ color: red; }
HTML Code:
<html> <body> <p>This is a normal
paragraph.</p>
<p class="first">This is a paragraph that uses
the p.first CSS code!</p> <p
class="second">This is a paragraph that uses
the p.second CSS code!</p> ...
11. Style Rule Cascading and
Inheritance
CSS Background
CSS Background Color
h4 { background-color: white; }
p { background-color: #1078E1; }
ul { background-color: rgb( 149, 206, 145); }
16. CSS Font
Font –color
h4 { color: red; }
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }
css font family
h4 { font-family: sans-serif; }
h5 { font-family: serif; }
h6 { font-family: arial; }
CSS Font size
p { font-size: 120%; }
ol{ font-size: 10px; }
ul{ font-size: x-large; }
17. CSS Font Style
p { font-style: italic; }
h4{ font-style: oblique; }
CSS Font weight
p { font-weight: 100; }
ul{ font-weight: bolder; }
18. CSS TEXT
Text Decoration
h4{ text-decoration: line-through; } h5{ text-
decoration: overline; } h6{ text-decoration:
underline; } a { text-
decoration: none; }
Text Indent
p { text-indent: 20px; }
h5 { text-indent: 30%; }
19. Text Align
p { text-align: right; }
h5{ text-align: justify; }
Text Transform
p { text-transform: capitalize; }
h5{ text-transform: uppercase; }
h6{ text-transform: lowercase; }
CSS White Space
p { white-space: nowrap; }
20. CSS Lists
Lists come in two basic flavors: unordered and
ordered
CSS Lists With Images
ul { list-style-image: url("listArrow.gif"); } ol {
list-style-image: url("listArrow2.gif"); }
CSS List Position
ul { list-style-position: inside; }
ol { list-style-position: outside; }
21. CSS Box Model
All HTML elements can be considered as
boxes. In CSS, the term "box model" is used
when talking about design and layout.
The CSS box model is essentially a box that
wraps around HTML elements, and it consists
of: margins, borders, padding, and the actual
content.
The box model allows us to place a border
around elements and space elements in
relation to other elements.
22.
23. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s
slides
CSS Box Model
Every rendered element occupies a box:
(or inner edge)
(or outer edge)
31. Margin - Clears an area around the border. The
margin does not have a background color, it is
completely transparent
Border - A border that goes around the padding
and content. The border is inherited from the color
property of the box
Padding - Clears an area around the content. The
padding is affected by the background color of the
box
Content - The content of the box, where text and
images appear
32. example
<!DOCTYPE html>
<html><head>
<style>
div.ex {
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0px;
}
</style>
</head>
<body>
<img src="w3css.gif" width="250" height="250">
<div class="ex">The picture above is 250px wide. The total width of this element is also
250px.</div>
</body>
</html>
33. The total width of an element should be
calculated like this:
Total element width = width + left padding +
right padding + left border + right border + left
margin + right margin
The total height of an element should be
calculated like this:
Total element height = height + top padding +
bottom padding + top border + bottom border
+ top margin + bottom margi
37. Positioning
There are four different positioning methods.
1. Static Positioning
2. Fixed Positioning
3. Relative Positioning
4. Absolute Positioning
38. Static Positioning
HTML elements are positioned static by
default. A static positioned element is always
positioned according to the normal flow of the
page.
39. Fixed Positioning
An element with fixed position is positioned
relative to the browser window
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
40. example
<!DOCTYPE html>
<html><head>
<style>
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
color: red;
}
</style></head>
<body><p><b>Note:</b> IE7 and IE8 supports the fixed value only if a !DOCTYPE
is specified.</p>
<p>Some text</p>
<p class="pos_fixed">Some positioned text.</p>
</body>
</html>
42. Relative Positioning
A relative positioned element is positioned relative
to its normal position.
Example
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
43. example
<!DOCTYPE html>
<html><head><style>
h2.pos_left {
position: relative;
left: -20px;}
h2.pos_right {
position: relative;
left: 20px;
}</style></head>
<body>
<h2>Heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal
position</h2>
<h2 class="pos_right">This heading is moved right according to its normal
position</h2></body></html>
45. Absolute Positioning
An absolute position element is positioned
relative to the first parent element that has a
position other than static. If no such element is
found, the containing block is <html>:
Example
h2 {
position: absolute;
left: 100px;
top: 150px;
}
46. Example
<!DOCTYPE html>
<html><head>
<style>
h2 {
position: absolute;
left: 100px;
top: 150px;
}</style>
</head><body>
<h2>This heading has an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on
a page. The heading below is placed 100px from the left of the page
and 150px from the top of the page.</p>
</body></html>
48. CSS Cursor Icons
default - Display the normal mouse cursor
icon
wait - The mouse icon to represent the
computer "thinking"
crosshair - A cross hair reticle
text - An "I" shaped icon that is displayed
when selecting text
pointer - A hand icon that you see when you
hover over an HTML link
help - A question mark (usually)
49. CSS Cursor Code
<html>
<head>
<style>
p { cursor: wait; }
h4 { cursor: help; }
h5 { cursor: crosshair; }
</style>
</head>
<body>
<h4>We Want to Help You!</h4>
<p>This may take a while to load....so don't worry, be happy!</p>
<h5>Do You Like To Play Shooting Games on the Computer?</h5>
</body>
</html>