BloggingWithStyle_2008

Style
Blogging with

An Introduction to CSS

Presented by Anthony Piraino at ConvergeSouth 2008

What is CSS and
why should I learn it?

HTML
HyperText Markup Language

Describes the semantics and structure
of content on a web page.

CSS
Cascading 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>
<body>
<h1>This is a header</h1>
<p>
Here is a block of
paragraph text, blah
blah blah etc.
HTML </p>
<h2>Another header</h2>
<p>
And yet another paragraph
with a block of text.
</p>
</body>
</html>

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;

CSS
}
h2 {
font-size: 1.4em;
background-color: #ffffff;
}
p {
padding: 30px;
margin: 0px;
}

body {
font-family: "trebuchet ms", sans-serif;
<body> background-color: #ddeedd;
<h1>This is a header</h1> }

<p> h1, h2 {
Here is a block of font-size: 1.8em;
paragraph text, blah color: #88aa44;
blah blah etc. margin: 0px;
</p> }

h2 {
<h2>Another header</h2> font-size: 1.4em;
<p> padding: 0px 30px 0px 30px;
And yet another paragraph }
with a block of text.
</p> p {
</body> 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;
padding: 10px;
border: 5px solid #1bc8fe;
}

Here is an example paragraph with a
styled font, color, padding and border.

p {
color: #1662d8;
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>

p {
color: gray;
font-size: 12px;
}

p.alert {
color: red;
font-size: 18px;
font-weight: bold;
}

This is a normal paragraph, nothing
exciting going on here.

But this is a really important
paragraph - pay attention!

The ID Selector
HTML <ul id=”contents”>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>

CSS #contents {
font-weight: bold;
font-size: 18px;
}

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>

blockquote p {
color: blue;
font-weight: bold;
border-left: 3px solid blue;
padding-left: 10px;
}

This is a stand-alone paragraph.

A paragraph inside our
blockquote.
And another blockquoted
paragraph.

Properties and Values

Value of my House
Jan Feb March April May June

Properties and Values

selector {
property: value;
property: value;
}

By Name

aqua, black, blue, fuchsia, gray, etc.

Full list of supported color names:
http://www.w3schools.com/css/css_colornames.asp

By Hex Value

Roses are #ff0000
Violets are #0000ff

The Box Model

element
padding
border
margin

Margin and Padding Values

margin: 0px 20px 10px 20px;

top right bottom left

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#outer-wrapper {
width: 660px;
margin:0 auto;
padding: 10px;
font: $bodyfont;
}

#outer-wrapper {
width: 660px;
margin:0 auto;
font: $bodyfont;
}

#outer-wrapper {
width: 660px;
margin:0 auto;
font: $bodyfont;
background-color: #effcff;
border-left: 10px solid #003;
border-right: 10px solid #003;
}

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
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-wrapper {
width:660px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
text-align: center;
}
#header h1 {
margin:5px 5px 0;
line-height:1.2em;
}

#header-wrapper {
width:660px;
border-bottom: 1px solid #c1cccf;
}
#header {
margin: 5px;
text-align: center;
}
#header h1 {
margin:5px 5px 0;
line-height:1.2em;
}

#header-wrapper {
width:660px;
}
#header {

}
#header h1 {
margin:5px 5px 0;
line-height:1.2em;
}

#header-wrapper {
width:660px;
}
#header {
color: #000033;
}

#header h1 {
margin:5px 5px 0;
line-height:1.2em;
}

#header-wrapper {
width:660px;
}
#header {
color: #000033;
}

#header h1 {
margin: 0px;
line-height:1.2em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

margin:0 0 1.5em;
padding:0 0 1.5em;
}

margin:0px;
padding:0 0 1.5em;
}

margin:0px;
padding:0 0 1.5em;
}

#sidebar-wrapper h2 {
background-color: #113355;
color: #ffffff;
}

Resources and Next Steps

Selectutorial
http://css.maxdesign.com.au/selectutorial/

W3Schools CSS Tutorial
http://www.w3schools.com/css/

CSS Zen Garden
http://www.csszengarden.com/

BloggingWithStyle_2008

Related slideshows

More Related Content

BloggingWithStyle_2008