css in all its glory
Post on 01-Nov-2014
2.883 Views
Preview:
DESCRIPTION
TRANSCRIPT
1
2
3
4
5
6
=6 + 1 holy crap
7
8
9
10
11
12
13
14
15
I hope you know HTML
16
The most important thing you need to
know...
17
18
Padding
200 x 80
10
10
1010
Border 5
5
55
Margin 10
10
1010
The Box Model
19
widthpadding-left
padding-rightborder-left
border-right+
Calculated Width
20
Padding
200 x 80
10
10
1010
Border 5
5
55
Margin 10
10
1010
Width = 250px
21
heightpadding-top
padding-bottomborder-top
border-bottom+
Calculated Height
22
Padding
200 x 80
10
10
1010
Border 5
5
55
Margin 10
10
1010
Height = 130px
23
Block Level ElementsParent Element
width:auto
If no width declared all block level elements within the parent
element will be set to 100%.
24
Block Level ElementsParent Element
width:200px
If you declare a width...well your block level element will
have that width, regardless of the parent element
25
Absolute ElementsParent Element
well hello there
If you don’t specify a width, the box will expand with the
content. It will expand until 100% of the parent, then wrap.
well hello there...the box expands
26
Floated ElementsParent Element
well hello there
Mimics the behavior of positioned elements.
Doesn’t depend on relative positioning
well hello there...the box expands
27
Rule of Thumb
Specify the width on:
• floated elements • positioned elements either fixed or absolute
28
Inline ElementsParent Element
well hello there
Just really long, skinny boxes
well hello there...the box expands
well hello there
well hello there...the box expands
29
CSS Rule Set
30
CSS Rule SetTells a browser how to render HTML boxes
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
31
CSS Rule SetTells a browser how to render HTML elements
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
32
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
Selector: “selects” an HTML element that should be affected by a rule set
33
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
Declaration Block: anything between the curly brackets
34
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
Declaration: Tells the browser how to draw any element on a page that is selected
35
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
Property: The aspects of the HTML element that you are choosing to style.
36
Selector Declaration Block
body { }
Declaration
Property Value
color black: ;
Declaration
Property Value
padding 1em: ;
Value: The exact style you want to set for the property
37
All together now
p{ margin: 10px; padding: 20px;}
Declarations can be grouped.
38
All together now
h1, h2, h3 { padding:10px;}
Selectors can be grouped.
39
CSS Shorthand
40
Font
h1{ font-family: Arial; font-size: 100%; font-style: normal; font-variant: small-caps; font-weight: bold; line-height:120%;}
41
Font
h1{ font: bold small-caps 100%/120% Arial;}
42
Font
style
font: bold
variant
small-caps
size
100%
line-height
120%
font-family
Arial ;
43
Margin/Paddingp{ margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px; padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;}
44
Margin/Padding
margin: 1px 2px 3px 4px;padding: 1px 2px 3px 4px;
T
R
B
L
45
Margin/Padding
margin: 1px 2px 3px 4px;padding: 1px 2px 3px 4px;
T R B L
46
Margin/Padding
margin: 1px 2px 3px 2px;padding: 1px 2px 3px 2px;
T R/L B
margin: 1px 2px 1px 2px;padding: 1px 2px 1px 2px;
T/B R/L
47
Margin/Padding
margin: 1px 1px 1px 1px;padding: 1px 1px 1px 1px;
T/R/B/L
48
Comments
/* Comment */
margin: 1px 2px 3px 4px;
/*padding: 1px 2px 3px 4px;*/
49
Document Tree
50
<body> <div id="container"> <h1>This is the document tree</h1> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <strong>dolor</strong> sit amet</p> </div> <div id="nav"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div></body>
51
body
div div
ph1 p
em
ul
lili li
52
body
div div
ph1 p
em
ul
lili li
AncestorAny element that’s connected but further
up the document tree, no matter how many level higher.
53
body
div div
ph1 p
em
ul
lili li
DescendantAny element that’s connected but lower down the document tree, no matter how
many levels lower.
54
body
div div
ph1 p
em
ul
lili li
ParentElement that is directly above and connected
to an element in the document tree
Parent
Child
55
body
div div
ph1 p
em
ul
lili li
ChildElement that is directly below and connected
to an element in the document tree
Parent
Child
56
body
div div
ph1 p
em
ul
lili li
SiblingsAn element that shares the same parent with
another element
57
SpecificityDetermines which CSS rule is applied to an
element by a browser
58
Basic Specificity
Inline Style > #ID > .Class > Element
59
Selectors
60
Type Selectors
li{color: red;}
body
div div
ph1 p
em
ul
lili li
61
Class Selectors
.red{color: red;}
body
div div
ph1 p.red
em
ul
lili li.red
62
Class + Type Selectors
p.red{color: red;}
body
div div
ph1 p.red
em
ul
lili li.red
63
Rule of Thumb
<div class="heading">Main Heading</div>
.heading{ font-weight: bold; font-size: 140%;}
Don’t use classes to style HTML elements to look like other elements
64
Rule of Thumb
<h1>Main Heading</h1>
h1{ font-size: 140%;}
Do HTML elements that already exist
65
Think before you class
1. Is there an existing HTML element that I can use instead?
2. Is there a class or ID further up the document tree that can be used?
66
ID Selectors
#nav{color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#
67
ID vs .classID’s
• They are unique • Each element can only have one ID • Each page can only have one element with the same ID • ID’s have special browser functionality • Javascript loves ID’s
<div id="nav header"></div>
68
ID vs .class
Classes
• They aren’t unique • The same class can be used on multiple elements • You can use multiple classes on the same element
<div class="nav header"></div>
69
Descendant Selectors
p em{color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#
70
Universal Selectors
* {color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#
71
Child Selectors
div > em {color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#em
72
Adjacent Sibling Selectors
h1 + p {color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#em
73
Attribute Selectors4 Types
74
Attribute SelectorsSelect based on the attribute
<img src="image.png" width="100" height="100" title="Main Image" alt="Main Image"/>
img[title] { border: 1px solid #000; }img[width] { border: 1px solid #000; }img[alt] { border: 1px solid #000; }
75
Attribute SelectorsSelect based on the attribute’s value
<img src="image.png" width="100" height="100" title="Main Image" alt="Main Image"/>
img[src="image.png"] { border: 1px solid #000; }
76
Attribute SelectorsSelect based on the space separated
instances of a value
<img src="image.png" width="100" height="100" title="Main Image" alt="Main Image"/>
img[alt~="Main"] { border: 1px solid #000;}
77
Attribute SelectorsSelect based on the hyphen separated
instances of a value
<img src="image.png" width="100" height="100" title="Main Image" alt="Main Image"/>
img[alt|="Main"] { border: 1px solid #000;}
78
:Pseudo Classes
79
Most Common
:link:visited:hover:active
80
:first-child
li:first-child {color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#em
81
:first-line
p:first-line {color: red;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum purus non risus porttitor convallis. In vitae nulla id felis.
82
:before and :after
p:before {content: “ extra stuff”}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum purus non risus porttitor convallis. In vitae nulla id felis. extra stuff
83
CSS3 Selectors
84
Most Common
:link:visited:hover:active
85
:first-child
li:first-child {color: red;}
body
div div
ph1 p.red
em
ul nav
lili li.red
#em
86
:first-line
p:first-line {color: red;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum purus non risus porttitor convallis. In vitae nulla id felis.
87
:before and :after
p:before {content: “ extra stuff”}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum purus non risus porttitor convallis. In vitae nulla id felis. extra stuff
88
CSS 3I shall now cheat...I’m also lazy
http://www.css3.info/
89
CSS Tricks
90
• Absolute Positioning (z-index)
• Multi-Column Layouts with floats
• .clearfix
• Image Sprites
• Image Replacement
• Center align elements
• display:none vs visibility:hidden
• Multiple background images
91
A Clean Stylesheet
92
?http://twitter.com/killermoo
http://bermonpainter.com
http://facebook.com/bermon
93
Books
Designing withWeb StandardsJeffry Zeldman
Transcending CSSAndy Clarke
CSS MasteryAndy Budd
94
top related