Cascading Style Sheets

CSS

CASCADING STYLE SHEET

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>

Result

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>

output

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>

result

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>

Result

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

Education

Transcript of Cascading Style Sheets