View
2.609
Download
0
Category
Tags:
Preview:
DESCRIPTION
A tutorial on CSS for a Web Development class.
Citation preview
CSSCascading Style Sheets
Parts of a CSS rule
h2 {color: #000000;}
Parts of a CSS rule
h2 {color: #000000;}
SELECTOR
CURLY BRACKETS
Parts of a CSS rule
h2 {color: #000000;}
PROPERTY
Parts of a CSS rule
h2 {color: #000000;}
Parts of a CSS rule
h2 {color: #000000;}
VALUE
Parts of a CSS rule
h2 {color: #000000;}
START WITH SELECTOR
Three Kinds of Selectors
TYPE SELECTORS
div
p
h2
strong
CLASS SELECTORS
.headlines
.paragraphs
.bylines
.summary
ID SELECTORS
#container
#first-‐article
#footer
#sidebar
Type Selectors
h2 {
font-style: bold;
}
p {
font-family: Helvetica;
}
<body><div id=“container”>
<h2 class=“headline”>Hello World</h2>
<p class=“byline”>By Jeremy Rue.</p>
<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>
<div id=“sidebar”><h2>Side Bar Story</h2><p class=“byline”>By John Doe.</p><p>This is a related story.</p>
</div>
</div></body>
Type Selectors
h2 {
font-style: bold;
}
p {
font-family: Helvetica;
}
<body><div id=“container”>
<h2 class=“headline”>Hello World</h2>
<p class=“byline”>By Jeremy Rue.</p>
<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>
<div id=“sidebar”><h2>Side Bar Story</h2><p class=“byline”>By John Doe.</p><p>This is a related story.</p>
</div>
</div></body>
Class Selectors
.headline {
text-decoration: underline;
}
.byline {
font-size: 8px;
}
<body><div id=“container”>
<h2 class=“headline”>Hello World</h2>
<p class=“byline”>By Jeremy Rue.</p>
<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>
<div id=“sidebar”><h2>Side Bar Story</h2><p class=“byline”>By John Doe.</p><p>This is a related story.</p>
</div>
</div></body>
Class Selectors
.headline {
text-decoration: underline;
}
.byline {
font-size: 8px;
}
<body><div id=“container”>
<h2 class=“headline”>Hello World</h2>
<p class=“byline”>By Jeremy Rue.</p>
<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>
<div id=“sidebar”><h2>Side Bar Story</h2><p class=“byline”>By John Doe.</p><p>This is a related story.</p>
</div>
</div></body>
ID Selectors
#container {
font-size: 30px;
}
#sidebar {
font-size: 8px;
}
<body><div id=“container”>
<h2 class=“headline”>Hello World</h2>
<p class=“byline”>By Jeremy Rue.</p>
<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>
<div id=“sidebar”><h2>Side Bar Story</h2><p class=“byline”>By John Doe.</p><p>This is a related story.</p>
</div>
</div></body>
ID Selectors
#container {
font-size: 30px;
}
#sidebar {
font-size: 8px;
}
<body><div id=“container”>
<h2 class=“headline”>Hello World</h2>
<p class=“byline”>By Jeremy Rue.</p>
<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>
<div id=“sidebar”><h2>Side Bar Story</h2><p class=“byline”>By John Doe.</p><p>This is a related story.</p>
</div>
</div></body>
More ways to use selectors
More Selector Options
.headline{
font-size: 30px;
}
<body><div id=“container”>
<h2 class=“headline”>Hello World</h2>
<p class=“byline”>By Jeremy Rue.</p>
<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>
<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>
</div>
</div></body>
More Selector Options
h2.headline {
font-size: 30px;
}
<body><div id=“container”>
<h2 class=“headline”>Hello World</h2>
<p class=“byline”>By Jeremy Rue.</p>
<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>
<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>
</div>
</div></body>
More Selector Options
#sidebar p {
font-size: 30px;
}
<body><div id=“container”>
<h2 class=“headline”>Hello World</h2>
<p class=“byline”>By Jeremy Rue.</p>
<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>
<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>
</div>
</div></body>
A space means descendant.
More Selector Options
#container #sidebar h3 {
font-size: 30px;
}
<body><div id=“container”>
<h2 class=“headline”>Hello World</h2>
<p class=“byline”>By Jeremy Rue.</p>
<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>
<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>
</div>
</div></body>
More Selector Options
#container #sidebar h3 {
font-size: 30px;
}
<body><div id=“container”>
<h2 class=“headline”>Hello World</h2>
<p class=“byline”>By Jeremy Rue.</p>
<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>
<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>
</div>
</div></body>
More Selector Options
#container #sidebar h3 {
font-size: 30px;
}
<body><div id=“container”>
<h2 class=“headline”>Hello World</h2>
<p class=“byline”>By Jeremy Rue.</p>
<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>
<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>
</div>
</div></body>
More Selector Options
#container #sidebar h3 {
font-size: 30px;
}
<body><div id=“container”>
<h2 class=“headline”>Hello World</h2>
<p class=“byline”>By Jeremy Rue.</p>
<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>
<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>
</div>
</div></body>
NOT to be confused with...
HTML vs CSS
HTML CSS
<div class=“headline lead-story article”> .headline p {
}
These spaces give multiple classes This space means a <p> tag inside another tag with class .headline
Example from Richmond Site
<div id="post-38661" class="hentry p1 post publish author-lexi-pandell category-education category-featured category-front tag-big-brother-big-sister tag-mentoring tag-nonprofit tag-youth y2012 m02 d07 h13">
A few others
h3, p { color:orange; } <div id=“container”><h3>Here is one headline</h3>
<div><h3>Another</h3><p>Some text here</p>
</div>
<p>Another paragraph.</p><h3>Last graph.</h3>
</div>
A few others
#container > h3 { color:orange; } <div id=“container”><h3>Here is one headline</h3>
<div><h3>Another</h3><p>Some text here</p>
</div>
<p>Another paragraph.</p><h3>Last graph.</h3>
</div>
A few others
h3 + p { color:orange; } <div id=“container”><h3>Here is one headline</h3>
<div><h3>Another</h3><p>Some text here</p>
</div>
<p>Another paragraph.</p><h3>Last graph.</h3>
</div>
A few others
h3:first-child { color:orange; } <div id=“container”><h3>Here is one headline</h3>
<div><h3>Another</h3><p>Some text here</p>
</div>
<p>Another paragraph.</p><h3>Last graph.</h3>
</div>
The Cascade
What happens if there is a conflict?
The more specific rules take precedence.
External Style Sheet Embedded Style Sheet Inline Styles
<head><style>
.headlines {color:black;
}
</style></head>
<div style= “color:black;”>
Which rule wins out?
#container {
font-size: 30px;
}
#headline {
font-size: 10px;
}
<div id="container">
<div id="headline">
<p>My headline</p>
</div>
</div>
<div id="container">
<div id="headline">
<p>My headline</p>
</div>
</div>
Which rule wins out?
#container {
font-size: 30px;
}
#container {
font-size: 10px;
} Because it comes last
Cascade Recap
Stylesheet Order
1. External
2. Embedded (<head>)
3. Inline
Last Rule
Rules that come last
Inheritance
Specificity
Properties
Text Color
COLOR NAMES
147 predefined names
DarkCyanPurpleBlackRed
color: #ee3e80;
RGB VALUES
Values for red, green and blue
rgb(100,100,90);rgb(255,255,255);rgb(0,0,0);rgb(30,44,200);
Hexadecimal
Six or three digit alpha-numeral.
#FFFFFF;#000000;#000;#AF0;
Backgroundsbackground-‐color: #ee3e80;
background: url(‘path_to_image.jpg’) no-‐repeat 0px 0px;
background-‐image:url(‘image.jpg’);background-‐position:0px 50%;background-‐repeat:repeat;
Short code
Font Family
FALL BACK
A comma separated list of fonts to use if the system doesnʼt have the font installed.
font-‐family: Helvetica, Arial, san-‐serif;
QUOTES
Use quotes when a font is multiple words, like “Times New Roman.”
END WITH GENERIC
End with a generic font, like serif or san-serif. This way the browser will pick for you.
Font Size
PIXELS
Pixels are considered a fixed font size. Fonts will appear at this size relative to the screen size.
font-‐size: 12px;
PERCENTAGES
Percentages are relative from the default size of the text. 100% means the default size.
EM
EM is another way of doing relative measurement. Varies only slightly from %.
Othersfont-‐weight: normal;font-‐weight: bold;
font-‐style: normal;font-‐style: italic;font-‐style: oblique;
text-‐transform: uppercase;text-‐transform: lowercase;text-‐transform: capitalize;
line-‐height: 1em;line-‐height: 1.4em;
letter-‐spacing: 1em;word-‐spacing: 1em;text-‐decoration:none;
text-‐align: left;text-‐align: right;text-‐aling: center
Linksa:linka:visiteda:hovera:active
a:link
Before a user clicks on a link.
a:visited
After a user clicks on a link.
a:hover
When a user hovers over a link.
a:active
When the user clicks down on a link.
Border, Margin and Padding
he l loMargin Border Padding
Width
margin-‐top:10px;margin-‐right:10px;margin-‐bottom:10px;margin-‐left:10px;
margin:5px 10px 6px 5px;
borders
border-‐style
soliddotteddashedgroove...
border-‐colorborder-‐width
border:1px solid #000000;
border-‐top-‐color:#ffffff;border-‐left-‐width: 20px;
Combined
Single sides
Inline vs Block
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<img><span><strong><em>
Inline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p><div><li><h1>
block
List of the best pies• Apple• Cherry• Pumpkin
Inline vs Block
display:inline;display:block;display:none;
• Apple• Cherry• Pumpkin
display:block;
• Apple • Cherry • Pumpkin
display:inline;
Visibility
visibility:visible; visibility:hidden;
Hi Mom!
CSS Reset
CSS Reset
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-‐size: 100%; font: inherit; vertical-‐align: baseline;}
Recommended