Transcript CSS Overview - Jonathan Grover

WEB DEVELOPMENT IMMERSIVE
STYLING THE FRONT END; HELLO CSS
TOPICS
•
•
•
•
•
•
•
2
CSS Overview
Syntax
Selectors
Authority
Color Values
Font Declarations
Box Model
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CSS OVERVIEW
• CSS stands for Cascading Style Sheet
• Created as a better solution to style HTML
elements
• Has unique syntax separate from HTML
• There are 3 distinct formats for using CSS
3
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CSS SYNTAX
4
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CSS FORMATS
• Inline
• Internal
• External
5
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
INLINE CSS
Looks like:
<p style="font-style:italic;">Lorem Ipsum</p>
Used in HTML Newsletters. Its disadvantage
is that changing a style across many
elements involves going back into the HTML
and changing line by line.
6
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
INTERNAL CSS
Looks like:
<style>
p { color:red; }
</style>
Used inside HTML pages. Its disadvantage
is that its styles only effect those on the page
it is embedded into.
7
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
EXTERNAL CSS
Looks like:
<link rel="stylesheet" href="style.css" />
--------------------inside style.css---------------------p{
color:black;
}
----------------------------------------------------------
Used by linking an external CSS file to all the html
pages we wish to style. Advantage is that you can
change styles site-wide from a single location.
8
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
SELECTORS (PART 1)
• Type
p {…}
• Id
#box {…}
• Class
.thick {…}
• Compound
h1, h2, #box {…}
9
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
TYPE SELECTORS
p{
color:black;
}
Selects all elements with the matching selector
name.
<p>Lorem Ipsum</p>
10
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
ID SELECTORS
#box {
background:blue;
}
Selects all elements with an id attribute value
matching the selector name.
<div id="box">I’m a box.</div>
11
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CLASS SELECTORS
.thick {
font-weight:bold;
}
Selects all elements with a class attribute value
matching the selector name.
<span class="thick">I’m thick.</span>
12
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
COMPOUND SELECTORS
h1, h2, #box {
font-family:Arial,Helvetica, Sans-serif;
}
Selects all matched elements in the compound set.
<h1>Header</h1>
<h2>Subhead</h2>
<div id="box">I’m a box</div>
13
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
SELECTORS (PART 2)
• Descendent
#nav li {…}
• Child
#list > li {…}
• Sibling
h3 + p {…}
• Preceded
.styleafter ~ h2 {…}
14
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
SELECTORS (PART 2)
• Universal
* {…}
• Attribute
img[alt="Cat"] {…}
• Psuedo
li:first-child {…}
a:link {…}
15
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
DESCENDENT SELECTOR
#nav li {
color:black;
}
Selects elements that are descendants of the
matching selector name.
<ul id="nav">
<li>child</li>
</ul>
16
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CHILD SELECTOR
#list > li {
color:black;
}
Select only the elements that are direct children of
the matching selector name (not grandchildren)<ul
id="list">
<li>child</li>
<ul><li>grandchild</li></ul>
</ul>
17
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
SIBLING SELECTOR
h3 + p {
color:black;
}
Selects only sibling elements that apear directly
after the matching selector name.
<h3>An h3 Element</h3>
<p>I'm a p directly after an h3 element.</p>
<p>Not selected</p>
18
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
PRECEDED SELECTOR
.styleafter ~ h2 {
color:black;
}
Styles all matched elements preceding after the
selector name.
<p class="styleafter">Class of styleafter.</p>
<h2>I'm an h2 positioned after</h2>
19
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
UNIVERSAL SELECTOR
*{
color:black;
}
This will style anything that has not been
previously styled by anything else.
…
20
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
ATTRIBUTE SELECTOR
img[alt="Cat"] {
border: 1px solid black;
}
Selects elements who have an attribute with
matching value condition.
<img src="myimage.jpg" alt="Cat">
21
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
PSUEDO SELECTOR
a:link {
text-decoration:none;
}
Selects elements based on a particular event state
or relationship among other elements.
<a href="#">link</a>
22
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
COLOR VALUES
•
•
•
•
23
Names
Hexadecimal
Rgb
Rgba
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
NAMES
There are 147 color names 16 of which are
standard:
aqua, black, blue, fuchsia, (gray, grey),
green, lime, maroon, navy, olive, purple, red,
silver, teal, white, and yellow.
24
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
HEXADECIMAL
There are exactly 16,777,216 (see 16 million colors).
These colors when used in different combinations
can produce any color that is needed. For example,
in the color red, the color code is #FF0000, which
is '255' red, '0' green, and '0' blue.
Hex system values use combinations of the
characters 0-9 as well as A-F.
25
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
RGB & RGBA
RGB (Red Green Blue) and RGBA (Red Green Blue
Alpha) offer millions of colors by mixing varying
amounts of red green and blue light; using a sclae
of (0-255).
rgb(100,86,92);
A (Alpha) allows an additional accepted value from
0-1 (o%-100% opacity)
rgba(100,86,92,0.5);
26
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
AUTHORITY / INHERITANCE RULES
If you use conflicting styles on the same element, Id over
rules Class which over rules Type which over rules *
(universal). Generally the more specific a selector the more
authority it has. If a more specific selector is not defined for
an element it will inherit styles from a previously defined
general selector statement.
If multiple Classes are applied to the same element the
Class listed furthest to the right over rules its neighbors to
the left.
Uses “last man” rule. When conflicts with equal authority
arise, CSS will listen to the last style it was told to apply.
27
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
BOX MODEL
• Padding (spacing inside an element)
• Margin (spacing outside an element)
• Border (colors, styles)
28
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
W3C BOX MODEL
29
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
IE BOX MODEL
30
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
IE BOX MODEL FIX SOLUTIONS
• CSS 1 & 2 hacks
• Box in a box method
• CSS 3 box-sizing property
31
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CSS Hacks (Don’t Do this!)
div {
width: 100px;
}
div {
\width: 140px;
w\idth: 100px;
}
32
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
BOX IN A BOX METHOD (100% SUPPORT)
div { width: 100px; padding:0; margin:0; }
.i { padding: 1em; }
<div>
<div class="i"> Text </div>
</div>
33
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CSS 3 BOX-SIZING PROPERTY (90.2% SUPPORT)
div {
box-sizing:border-box;
}
/* IE model = border-box
W3C model = content-box */
34
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CSS 3 BOX-SIZING SUPPORT
35
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
SCALING ELEMENTS
•
•
•
•
36
Static (px)
Fluid (%)
Responsive (min, max)
Auto
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CONTENT OVERFLOW
37
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
38
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY