bloggingwithstyle_2008
DESCRIPTION
TRANSCRIPT
CSSCascading Style Sheets
Describes the presentation of content
on a web page by defining design elements
such as layout, fonts, and colors.
How do they work together?
CSS lets you define visual styling by targeting rules to individual HTML elements.
HTML
<html>
<body>
<h1>This is a header</h1>
<p> Here is a block of paragraph text, blah blah blah etc. </p>
<h2>Another header</h2>
<p> And yet another paragraph with a block of text. </p>
</body>
</html>
CSS
body { font-family: "trebuchet ms", sans-serif; background-color: #ddeedd; padding: 20px 100px 0px 100px; }
h1, h2 { font-size: 1.8em; color: #88aa44; margin: 0px; }
h2 { font-size: 1.4em; background-color: #ffffff; padding: 0px 30px 0px 30px; }
p { background-color: #ffffff; padding: 30px; margin: 0px; }
<body>
<h1>This is a header</h1>
<p> Here is a block of paragraph text, blah blah blah etc. </p>
<h2>Another header</h2>
<p> And yet another paragraph with a block of text. </p>
</body>
body { font-family: "trebuchet ms", sans-serif; background-color: #ddeedd; padding: 20px 100px 0px 100px; }
h1, h2 { font-size: 1.8em; color: #88aa44; margin: 0px; }
h2 { font-size: 1.4em; background-color: #ffffff; padding: 0px 30px 0px 30px; }
p { background-color: #ffffff; padding: 30px; margin: 0px; }
HTML CSS
CSS Syntax
A stylesheet lists rules for presentation.
Each rule consists of a selector and a declaration block.
The Type Selector
p { color: #1662d8; background-color: #ffffff; padding: 10px; border: 5px solid #1bc8fe; }
Here is an example paragraph with a
styled font, color, padding and border.
p { color: #1662d8; background-color: #ffffff; padding: 10px; border: 5px solid #1bc8fe; }
The Class Selector
<p> This is a normal paragraph, nothing exciting going on here.</p>
<p class=”alert”> But this is a really important paragraph - pay attention!</p>
This is a normal paragraph, nothingexciting going on here.
But this is a really importantparagraph - pay attention!
The ID Selector
<ul id=”contents”> <li>Chapter 1</li> <li>Chapter 2</li> <li>Chapter 3</li></ul>
#contents { font-weight: bold; font-size: 18px; }
HTML
CSS
Descendant Selectors<p> This is a stand-alone paragraph.</p>
<blockquote>
<p> A paragraph inside our blockquote. </p>
<p> And another blockquoted paragraph. </p>
</blockquote>
This is a stand-alone paragraph.
A paragraph inside our blockquote.
And another blockquoted paragraph.
By Name
aqua, black, blue, fuchsia, gray, etc.
Full list of supported color names:http://www.w3schools.com/css/css_colornames.asp
{ width: 660px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; }
#outer-wrapper
background-color: #effcff;border-left: 10px solid #003;border-right: 10px solid #003;
#outer-wrapper { width: 660px; margin:0 auto; padding: text-align:$startSide; font: $bodyfont;
10px;
}
10px 40px 10px 40px;
background-color: #effcff;border-left: 10px solid #003;border-right: 10px solid #003;
#outer-wrapper { width: 660px; margin:0 auto; padding: text-align:$startSide; font: $bodyfont;}
10px 40px 10px 40px;
background-color: #effcff;border-left: 10px solid #003;border-right: 10px solid #003;
#outer-wrapper { width: 660px; margin:0 auto; padding: text-align:$startSide; font: $bodyfont;
}
10px 40px 10px 40px;
{ width:660px; margin:0 auto 10px; border:1px solid $bordercolor; }
{ margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; }
{ margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
#header-wrapper
#header
#header h1
{ width:660px; margin:0 auto 10px; border:1px solid $bordercolor; }
{ margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; }
{ margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
#header-wrapper
#header
#header h1
#header {
#header h1 { margin: padding: line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
#header-wrapper { width:660px; margin:
0 auto 10px;border:1px solid $bordercolor;}
}
margin: 5px; border: 1px solid $bordercolor; text-align: center;color:$pagetitlecolor;
5px 5px 0;15px 20px .25em;
#header {
#header h1 { margin: padding: line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
#header-wrapper { width:660px; margin: border:1px solid $bordercolor;}
}
margin: 5px; border: 1px solid $bordercolor; text-align: center;color:$pagetitlecolor;
5px 5px 0;15px 20px .25em;
0px 0px 20px 0px;
#header {
#header h1 { margin: padding: line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
#header-wrapper { width:660px; margin: }
}
margin: 5px; border: 1px solid $bordercolor; text-align: center;color:$pagetitlecolor;
5px 5px 0;15px 20px .25em;
0px 0px 20px 0px;border-bottom: 1px solid #c1cccf;
#header {
#header h1 { margin: padding: line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
#header-wrapper { width:660px; margin: }
}color:$pagetitlecolor;
5px 5px 0;15px 20px .25em;
0px 0px 20px 0px;border-bottom: 1px solid #c1cccf;
#header {
#header h1 { margin: padding: line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
#header-wrapper { width:660px; margin: }
}color:
5px 5px 0;15px 20px .25em;
0px 0px 20px 0px;border-bottom: 1px solid #c1cccf;
#000033;
#header {
#header h1 { margin: padding: line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
#header-wrapper { width:660px; margin: }
}color:
15px 20px .25em;
0px 0px 20px 0px;border-bottom: 1px solid #c1cccf;
0px;
#000033;
#header {
#header h1 { margin: padding: line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
#header-wrapper { width:660px; margin: }
}color:
0px 0px 20px 0px;border-bottom: 1px solid #c1cccf;
0px;30px 0px 0px 0px;
#000033;
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;margin:0 0 1.5em;
padding:0 0 1.5em; }
.sidebar .widget, .main .widget {
#sidebar-wrapper h2 { background-color: #113355; padding: 3px 0px 3px 5px; color: #ffffff; }
margin: padding:0 0 1.5em; }
0px;
Resources and Next Steps
Selectutorialhttp://css.maxdesign.com.au/selectutorial/
W3Schools CSS Tutorialhttp://www.w3schools.com/css/
CSS Zen Gardenhttp://www.csszengarden.com/