coding potpourri: css

CSS: Cascading Style SheetsTom Boone

Loyola Law School – Los [email protected]

h=p://www.slideshare.net/tomboone

#sc_drag_crop { bottom: -‐25px; text-‐align: center; right: 10px; min-‐width: 30px; padding: 0 10px;}

Tuesday, July 26, 11

mailto:[email protected]


2

Without CSS, all content is already on the page.


3

Without CSS, most content is unreadable.


4

For example...


CascadingStyleSheets


BrowserStyleSheet

#1

SiteStyleSheet

#2

UserStyleSheet

#3


BrowserStyleSheet

#1

SiteStyleSheet

#2

UserStyleSheet

#3

Default Styles


BrowserStyleSheet

#1

SiteStyleSheet

#2

UserStyleSheet

#3

***Website Styles***


BrowserStyleSheet

#1

SiteStyleSheet

#2

UserStyleSheet

#3

User Overrides


Style


Style100 pt


StyleTuesday, July 26, 11

Style300 pt


StyleTimes New Roman


StyleHelveAca


StyleBlack


StyleBlue


Style#0000FF


StyleBold


StyleItalic


STYLEUppercase


Three Kinds of Stylesheets

Linked

Embedded

Inline


Inline Styles

 Some text


Linked

Embedded

Inline


<head> <title>A page title</title> <style type="text/css"> div#header { color: #ffffff; font-‐weight: bold; } </style></head>

Embedded Stylesheet


Linked

Embedded

Inline


<head> <title>A page title</title> <link rel="stylesheet" type="text/css" href="style.css"></head>

Linked Stylesheet

div#header { background-‐color: #000000; color: #ffffff; border: 1px solid #ffffff; font-‐weight: bold;}

ul.menu { list-‐style-‐type: none;}

style.css


div#header { background-‐color: #000000; color: #ffffff; border: 1px solid #ffffff; font-‐weight: bold;}

ul.menu { list-‐style-‐type: none;}

style.css

LinkedStylesheet


<head> <title>A page title</title> <link rel="stylesheet" type="text/css" href="style.css"></head>

Linked Stylesheet


Linked

Embedded

Inline


52

Anatomy of a CSS Rule

p {color: red;}


53


p {color: red;}

Selector


54

p {color: red;}

DeclaraAon


Selector


55

p {color: red;}

DeclaraAon


Property Value

Selector


56

p {color: red;}


Selector


57

some text


Selector

58

p {color: red;}


Selector

Affects EVERY tag on the page.

59

some text


Selector

60

li {color: red;}


Selector


61

<li>some text</li>


Selector

62

li {color: red;}


Selector

Affects EVERY <li> tag on the page.

63

<li>some text</li>


Selector

64

SelecAng more specific elements

Classes

IDs

Descendant Selectors


65


Classes

IDs



66

some text

Classes

67


Classes


68

p.summary {color: red;}

Classes

Selector


69


Classes

Selector


70


Classes

Selector

Affects only tags assigned a “summary” class.

71


Classes


72

some textsome text

Classes

73


some text

Classes

74

p.summary {color: red;}p.body {color: blue;}

Classes

Selector


75


some text

Classes

76


Classes

IDs



77


Classes

IDs



78

some text

IDs

79


IDs


80


IDs

Each ID can only appear ONCE on a page.

Classes can repeat.


81

p#summary {color: red;}

IDs

Selector


82


IDs

Selector


83


IDs

Selector

Affects only tags assigned a “summary” id.

84


IDs


85

some textsome text

IDs

86



IDs


87

p#summary {color: red;}p.summary {color: blue;}

IDs

Selector


88

some textsome text


IDs

89


Classes

IDs



90


Classes

IDs



91

<ul> <li>some text</li> <li>some more text</li></ul>

92




93

ul li {color: red;}


Selector

White space between selectors means the la=er must be a “descendant” of the former.


94




95

ul li {color: red;}


Selector

<li> tags not descended from <ul> tags will NOT be affected.

96

<ul> <li>some text</li> <li>some more text</li></ul><ol> <li>some numbered text</li> <li>more numbered text</li></ol>

97

ul li {color: red;}ol li {color: blue;}


Selector


98

<ul> <li>some text</li> <li>some more text</li></ul><ol> <li>some numbered text</li> <li>more numbered text</li></ol>

99

<ul> <li class="first">some text</li> <li>some more text</li></ul>


Classes/IDs can be combined with descendant selectors

100

ul li.first {color: red;}


Selector



101

<ul> <li class="first">some text</li> <li>some more text</li></ul>

102


Classes

IDs



103

Types of ProperAes

Background

ColorsImagesPosihonSize


104

Types of ProperAes

Background


105

Types of ProperAes

Border

ColorWidth

Style (solid, dashed, do=ed)


106

Types of ProperAes

Border


107

Types of ProperAes

Font

FamilySize

Weight


108

Types of ProperAes

Font


109

Types of ProperAes

Posihoning

FloatClearDisplay


110

Types of ProperAes

Posihoning


111

Types of ProperAes

Text

ColorAlignmentLine HeightDecorahon


112

Types of ProperAes

Text


113

p { color: red; font-‐weight: bold;}

A DeclaraAon can contain Values for mulAple ProperAes.


114

p, li, ul#menu { color: red; font-‐weight: bold;}

A CSS rule can contain mulAple *disAnct* selectors


115

Latest Developments

Adaphve Web DesignA single web page with CSS that adapts

to any size screen.

CSS3Developing standard that includes animahon, rotahon, scaling, and

skewing


116

CSS Resources

w3schools.com CSS Tutorialh=p://www.w3schools.com/css/

“CSS: The Missing Manual”by David Sawyer McFarland

“CSS: The Definihve Guide”by Eric A. Meyer

“Stylin’ with CSS: A Designer’s Guide”by Charles Wyke-‐Smith


http://www.w3schools.com/css/

http://www.w3schools.com/css/

117

Sorware

Google Chrome/Safari“Inspect Element”

FirefoxFirebug -‐ Add-‐on

CSS Edit (Mac)


118

Tom BooneLoyola Law School – Los Angeles

[email protected]=p://www.slideshare.net/tomboone




coding potpourri: css

Technology

linked color

cascading style sheetstuesday

style helveacatuesday

style blacktuesday

style bluetuesday

style italictuesday

style uppercasetuesday

px text