狠狠撸

CS134 Web Design &
Development
Cascading Style Sheets (CSS)
Mehmud Abliz

Selector Type
? Tag
– redefines the look of a specific tag
E.g. body {background-color: #000000;}
? Class
– can apply to any tag
E.g. .indent{margin-right:5%;margin-left: 5%;}
In HTML, <p class=“indent”>
? Advanced
– IDs, pseudo-class selectors
E.g. #myId {color: #38608A;}

Values - Lenghts
? Lengths [a number + unit identifier]
– Unit identifier can be
em (font size of the relevant font),
ex (x-height of the relevant font),
px (pixels),
in (inches), cm (centimeter), mm,
pt (points, =1/72 in), pc (picas, 1 pc = 12
pt)
– E.g.
h1 { margin: 0.5em }, h1 { margin: 1ex },
p { font-size: 12px }, h2 { line-height:
3cm }, h4 { font-size: 12pt }, h4 { font-
size: 1pc }

Values – Percentages &
URIs
? Percentages [a number + %]
– p { line-height: 120% }
? URLs & URIs
– url(“<A URI/URL>”), or
– url(<A URI/URL>)
– li { list-style:
url(http://www.cs.pitt.edu/~mehmud/image/bu
llet2.jpg) disc }
– body { background: url(/slideshow/lecture5-ppt-c-style-sheet-notes-for-b-ca-and-bit/273708274/"yellow.png") }
where, “yellow” is relative to the URI of the
style sheet.

Values - Colors
? Colors
– A color is either a keyword (e.g. white, red),
or a numerical RGB specification (e.g. ).
? A numerical RGB specification can be:
– An RGB value in hexadecimal notation,
which is a ‘#’ immediately followed by a 6
digit or 3 digit hexadecimal number, i.e.
#rrggbb or #rgb.
E.g. #ff0000, #f00
– An RGB value in functional notation, i.e.
rgb(rrr,ggg,bbb), rgb(r%,g%,b%)
E.g. rgb(255,0,0), rgb(100%,0%,0%)

Values - Colors
? 16 original predefined color codes
(names)
– http://www.cs.pitt.edu/~mehmud/cs13
4/resources/predefined_colors.html
? 216 browser safe colors
– Colors display correctly on all color
monitors
– http://www.cs.pitt.edu/~mehmud/cs13
4/resources/browser_safe_colors.html

Values - Strings
? String
– Sequence of characters written inside
double quotes ("") or single quotes ('').
? Examples
"this is a ’string’“
"this is a "string"“
’this is a "string"’
’this is a ’string’’

Box Properties
? margin : <length>
? border : <style> <width> <color>
? padding : <length>
? width & height : <length>
? Examples:
p{
margin: 50px;
padding: 30px;
float: right;
height: 200px;
width: 400px;
border: 5px solid #006633;
}

Box Properties
? Practice
– Create an internal style called
“boxStyle”
– Download and insert the following
image
http://www.cs.pitt.edu/~mehmud/cs13
4/images/lagerstrom_lrg.jpg
– Apply the “boxStyle” to the image and
let it appear as the following image:
[in next page]
– Color value: #9DACBF

Text Properties Practice
? Practice
– Create a paragraph text
– Create internal style for <p> tag as following
– Create a internal style called “textStyle” and
apply it to paragraph text and let it look like
this
p{
margin: 50px;
padding: 50px;
clear: right;
float: right;
border: 10px solid #0066CC;
}

Text Properties Practice
Color is #666666; font-family is Arial, Helvetica, sans-
serif; font-indent is 20%;

Values for position
property
Value Description
static Default. An element with position: static always
has the position the normal flow of the page gives
it (a static element ignores any top, bottom, left,
or right declarations)
relative An element with position: relative moves an
element relative to its normal position, so "left:20"
adds 20 pixels to the element's LEFT position
absolute An element with position: absolute is positioned at
the specified coordinates relative to its containing
block. The element's position is specified with the
"left", "top", "right", and "bottom" properties
fixed An element with position: fixed is positioned at the
specified coordinates relative to the browser
window. The element's position is specified with
the "left", "top", "right", and "bottom" properties.
The element remains at that position regardless
of scrolling. Works in IE7 (strict mode)

? A floated box is shifted to the left or
right until its outer edge touches the
containing block edge or the outer
edge of another float.
? Example .positionStyle {
height: 400px;
width: 200px;
left: 50px;
top: 50px;
right: 50px;
bottom: 50px;
position:absolute;
float: rigth;
}

? Practice – thumbnail image
– Create a table with only one cell
– Insert the following image 10 times
inside the only cell of the table
http://
www.cs.pitt.edu/~mehmud/image/Muzt
agh_Ata.jpg
– Create a rule called “.thumbImg” which
floats to left, has a margin of 20 pixels
on the top & bottom and 15 pixels on
the left & right; has a 5-pixel solid
border with silver color
– Apply the rule to all the 10 images

List Properties
? list-style: [disc | circle | square |
decimal | lower-roman | upper-
roman | lower-alpha | upper-alpha |
none] || [inside | outside] || [<url> |
none]
– Example
li { list-style:
url(http://www.cs.pitt.edu/~mehmud/image/bull
et2.jpg) disc inside; }
? Can use the list-style-type, list-style-
image, list-style-position separately.

List Properties
Difference between inside and outside
Outside

Background Properties
? background-color: <color> | transparent |
inherit
? background-image: <uri> | none | inherit
? background-position: [ [ <percentage> |
<length> | left | center | right ]
[<percentage> | <length> | top | center |
bottom ]? ] | [ [ left | center | right ] || [ top |
center | bottom ] ] | inherit
? background-repeat: repeat | repeat-x |
repeat-y | no-repeat | inherit
? background-attachment: scroll | fixed |
inherit

Background Properties
? Practice
body {
background-image:
url(http://www.cs.pitt.edu/~mehmud/image/bgd.
png);
background-repeat:no-repeat;
color: #FFFFFF;
background-position:center center;
background-color: #666666;
background-attachment: fixed;
}

<div> and <span> tags
? <div>
– is a generic block-level tag
? <span>
– is a generic inline tag, it spans a series
of characters
? Example
.subTitle {
font-family: Georgia, Times, serif;
font-size: 14px; font-weight: bold; color: #960000;
}
<p>blah blah blah <span class="subTitle">some text in
different style</span> text text text text</p>

<title> tag
? <title>:
– defines the title of the document .
– Placed between <head> and </head>
? Example
<html>
<head>
<title>XHTML Tag Reference</title>
…
</head>
…
</html>

狠狠撸

Lecture5.ppt C style sheet notes for B.CA and BIT

More Related Content

Lecture5.ppt C style sheet notes for B.CA and BIT

Editor's Notes