Cascading Style Sheets

CSS
 Two recommendations for CSS
 1.CSS Level 1[w3c CSS 1.0]
 2.CSS Level 2
 3.CSS Level 3[ 2D Transform,3D
Transform,Animation,User
Interface,Background etc]

CSS Selector
 CSS selectors are the heart and soul of CSS.
 In a typical CSS statement you have the
following:
 SELECTOR { PROPERTY: VALUE }

Types of CSS
 EXTERNAL CSS
 INTERNAL CSS
 INLINE CSS

CSS FILE
 CSS Code:
 body{ background-color: gray;}
 p { color: blue; }
 h3{ color: white; }

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>

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.

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>

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>

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

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); }

CSS Background Image
 p { background-image: url(smallPic.jpg); }
 h4{ background-image:
url(http://www.tizag.com/pics/cssT/smallPic.jpg
); }

Background Image Repeat
 You can have a background image repeat vertically (y-
axis), horizontally (x-axis), in both directions, or in
neither direction.
 CSS Code:
 p { background-image: url(smallPic.jpg);
 background-repeat: repeat; }
 h4 { background-image: url(smallPic.jpg); background-
repeat: repeat-y;}
 ol { background-image: url(smallPic.jpg); background-
repeat: repeat-x;}
 ul { background-image: url(smallPic.jpg); background-
repeat: no-repeat;}

CSS Background Image
Positioning
 p { background-image: url(smallPic.jpg);
background-position: 20px 10px; }
 h4 { background-image: url(smallPic.jpg);
background-position: 30% 30%; }
 ol { background-image: url(smallPic.jpg);
background-position: top center; }

CSS Field Background Image
 body.noScroll { background-image:
url(smallPic.jpg); background-attachment:
fixed; }
 body{ background-image: url(smallPic.jpg);
background-attachment: scroll;}

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; }

 CSS Font Style
p { font-style: italic; }
h4{ font-style: oblique; }
CSS Font weight
p { font-weight: 100; }
ul{ font-weight: bolder; }

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%; }

 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; }

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; }

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.

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)

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s
slides
CSS Box Model

 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

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>

 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

CSS Border
 <head>
 <style>
 p.none {border-style: none;}
 p.dotted {border-style: dotted;}
 p.dashed {border-style: dashed;}
 p.solid {border-style: solid;}
 p.double {border-style: double;}
 p.groove {border-style: groove;}
 p.ridge {border-style: ridge;}
 p.inset {border-style: inset;}
 p.outset {border-style: outset;}
 p.hidden {border-style: hidden;}
 </style>
 </head>
 <body>

 <p class="none">No border.</p>
 <p class="dotted">A dotted border.</p>
 <p class="dashed">A dashed border.</p>
 <p class="solid">A solid border.</p>
 <p class="double">A double border.</p>
 <p class="groove">A groove border.</p>
 <p class="ridge">A ridge border.</p>
 <p class="inset">An inset border.</p>
 <p class="outset">An outset border.</p>
 <p class="hidden">A hidden border.</p>
 </body>
 </html>

Positioning
 There are four different positioning methods.
1. Static Positioning
2. Fixed Positioning
3. Relative Positioning
4. Absolute Positioning

Static Positioning
 HTML elements are positioned static by
default. A static positioned element is always
positioned according to the normal flow of the
page.

Fixed Positioning
 An element with fixed position is positioned
relative to the browser window
 p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}

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>

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;
}

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>

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;
}

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>

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)

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>

Cascading Style Sheets

Related slideshows

More Related Content

Cascading Style Sheets