Scribd
Upload
3 views

03 Css

Uploaded by

Rr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

03 Css

Uploaded by

Rr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 33

1 CSS for Styling

CS380
The good, the bad and
2
the… ugly!
<p>
<font face="Arial">Shashdot.</font>
News for <b>nerds!!</b> You will <i>never</i>, <u>EVER</u>
be
<font size="+4" color="red">BORED</font> here!
</p> HTML

Slashdot. News for nerds!! You will never, EVER be BORED


here!

output
 Tags such as b, i, u, and font are
discouraged in strict XHTML
 Why is this bad?
CS380
Cascading Style Sheets
3
(CSS)
 Describes the appearance, layout, and
presentation of information on a web
page
 HTML describes the content of the page
 Describes how information is to be
displayed, not what is being displayed
 Can be embedded in HTML document or
placed into separate .css file

CS380
Basic CSS rule syntax
4

selector {
property: value;
property: value;
...
property: value;
}
CSS
p {
font-family: sans-serif;
color: red;
}
CSS
 A CSS file consists of one or more rules
 Each rule starts with a selector
 A selector specifies an HTML element(s) and then
applies style properties to them
 a selector of * selects all elements
Attaching a CSS file <link>
5

<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML

<link href="style.css" type="text/css" rel="stylesheet" />


<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css" />

HTML
 A page can link to multiple style sheet files
 In case of a conflict (two sheets define a style for the
same HTML element), the latter sheet's properties will
be used
CS380
Embedding style sheets:
6
<style>
<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>

HTML

 CSS code can be embedded within the head of an


HTML page
 Bad style and should be avoided when possible
(why?)
CS380
Inline styles: the style
7
attribute
<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>

HTML
This is a paragraph

output

 Higher precedence than embedded or linked


styles
 Used for one-time overrides and styling a

particular element
 Bad style and should be avoided when possible
CS380
CSS properties for colors
8

p {
color: red;
background-color: yellow;
}

CSS
This paragraph uses the style above
output

property description
color color of the element's text
color that will appear behind
background-color
the element

CS380
Specifying colors
9

p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS

This paragraph uses the first style above

This h2 uses the second style above.

This h4 uses the third style above.


output
 color names: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal,
white (white), yellow
 RGB codes: red, green, and blue values from 0 (none)
Grouping styles
10

p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS

This paragraph uses the above style.


This h2 uses the above styles.

output
 A style can select multiple elements separated by
commas
 The individual elements can also have their own

styles
CS380
CSS comments /*…*/
11

/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS

 CSS (like HTML) is usually not commented as


rigorously as programming languages such as
Java
 The // single-line comment style is NOT supported

in CSS
 The <!-- ... --> HTML comment style is also NOT

supported in CSS
CS380
CSS properties for fonts
12

property description
font-family which font will be used
how large the letters will be
font-size
drawn
used to enable/disable italic
font-style
style
used to enable/disable bold
font-weight
style
omplete list of font properties (http://www.w3schools.com/css/css_reference.asp#

CS380
font-family
13

p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS

This paragraph uses the first style above.

This h2 uses the second style above.


output
 Enclose multi-word font names in quotes

CS380
More about font-family
14

p {
font-family: Garamond, "Times New Roman", serif;
} CSS

This paragraph uses the above style.

output
 We can specify multiple fonts from highest to
lowest priority
 Generic font names:
 serif, sans-serif, cursive, fantasy, monospace

 If the first font is not found on the user's


computer, the next is tried
 Placing a generic font name at the end of your
CS380
font-family value, ensures that every computer
font-size
15

p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output
 units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em
 vague font sizes: xx-small , x-small , small , medium , large , x-large,
xx-large, smaller, larger

percentage font sizes, e.g.: 90%, 120%

CS380
font-size
16

p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output
 pt specifies number of point, where a point is
1/72 of an inch onscreen
 px specifies a number of pixels on the screen

em unit of measurement which indicates
size relative to the size of the font
specifies number of m-widths, where 1 em is
equal to the font's current size
CS380
font-weight, font-style
17

p {
font-weight: bold;
font-style: italic;
} CSS

This paragraph uses the style above.

output
 Either of the above can be set to normal to turn
them off (e.g. headings)
 h1, h2, h3 {
 font-weight: normal; /* Turns off bold */
 font-style: normal; /* Turns off italic */ }
CS380
CSS properties for text
18

property description
alignment of text within its
text-align
element
decorations such as
text-decoration
underlining
line-height,
gaps between the various
word-spacing,
portions of the text
letter-spacing
indents the first letter of each
text-indent
paragraph
omplete list of text properties (http://www.w3schools.com/css/css_reference.asp#

CS380
19

CS380
text-align
20

blockquote { text-align: justify; }


h2 { text-align: center; }
CSS

The Gollum’s Quote

We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!

output
 text-align can be left, right, center, or
justify

CS380
text-decoration
21

p {
text-decoration: underline;
}
CSS
This paragraph uses the style above.

output
 can also be overline, line-through, blink,
or none
 effects can be combined:

text-decoration: overline underline;

CS380
The list-style-type property
22

ol { list-style-type: lower-roman; }

ol: This targets all ordered lists (<ol>) in your HTML


document. An ordered list is used when the order of the
items matters, and it typically uses numbers by default.

list-style-type: lower-roman;: This property changes the


style of the list items to use lowercase Roman numerals
(i, ii, iii, iv, etc.) instead of the default numeric
style.
CSS

CS380
23

 Possible values:
i. none : No marker
ii. disc (default), circle, square
iii. Decimal: 1, 2, 3, etc.
iv. decimal-leading-zero: 01, 02, 03, etc.
v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
x. lower-greek: alpha, beta, gamma, etc.
others: hebrew, armenian, georgian, cjk-ideographic,
hiragana…
CS380
Body styles
24

body {
font-size: 16px;
}

CSS

 Applies a style to the entire body of your page


 Saves you from manually applying a style to each
element

CS380
Cascading Style Sheets
25

 Properties of an element cascade


together in this order:
 browser's default styles
 external style sheet files (in a <link> tag)
 internal style sheets (inside a <style> tag
in the page's header)
 inline style (the style attribute of the HTML
element)

CS380
Inheriting styles
26

body { font-family: sans-serif; background-color:


yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; }

CSS
This is a heading
A styled paragraph. Previous slides are available on the website.

• A bulleted list
output
 when multiple styles apply to an element, they
are inherited
 a more tightly matching rule can override a more
CS380
general inherited rule
Styles that conflict
27

p, h1, h2 { color: blue; font-style: italic; }


h2 { color: red; background-color: yellow; }

CSS
This paragraph uses the first style above.
This heading uses both styles above.
output

 when two styles set conflicting values for the


same property, the latter style takes precedence

CS380
W3C CSS Validator
28

<p>
<a
href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a>
</p> CSS

output

 jigsaw.w3.org/css-validator/
 checks your CSS to make sure it meets the
official CSS specifications
CS380
CSS properties for
29
backgrounds
property description
background-color color to fill background
background-image image to place in background
placement of bg image within
background-position
element
whether/how bg image should
background-repeat
be repeated
whether bg image scrolls with
background-attachment
page
shorthand to set all
background
background properties

CS380
background-image
30

body {
background-image: url("images/draft.jpg");
}
CSS

 background image/color fills the element's


content area

CS380
background-repeat
31

body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS

 can be repeat (default), repeat-x, repeat-y, or no-


repeat

CS380
background-position
32

body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS

 value consists of two tokens, each of which can


be top, left, right, bottom, center, a percentage,
or a length value in px, pt, etc.
 value can be negative to shift left/up by a given
CS380
amount
Aside: Favorites icon
33
("favicon")
<link href="filename" type="MIME type" rel="shortcut icon"
/> HTML

<link href="yahoo.gif" type="image/gif" rel="shortcut


icon" />
HTML

 The link tag, placed in the HTML page's head


section, can specify an icon
 this icon will be placed in the browser title bar and
bookmark/favorite
CS380

You might also like