bloggingwithstyle_2008

StyleBlogging with

An Introduction to CSS

Presented by Anthony Piraino at ConvergeSouth 2008

What is CSS and why should I learn it?

Your Blog: Under the Hood

HTML vs. CSS

HTMLHyperText Markup Language

Describes the semantics and structure

of content on a web page.

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.

selector { property: value; }

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>

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

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

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>

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.

{ The Declaration Block }

Properties and Values

Jan Feb March April May June

Value of my House

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

http://www.w3schools.com/css/css_colornames.asp

http://www.w3schools.com/css/css_colornames.asp

By Hex Value

Roses are #ff0000

Violets are #0000ff

Red Green Blue

#00 00 00

http://www.colorpicker.com/

http://www.colorpicker.com

http://www.colorpicker.com

background-color

margin

padding

border

The Box Model

element

padding

border

margin

Margin and Padding Values

margin: 0px 20px 10px 20px;

top right bottom left

Pimp my CSS

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

#outer-wrapper

#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;


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



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

}


{ 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-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-wrapper { width:660px; margin: border:1px solid $bordercolor;}

}


5px 5px 0;15px 20px .25em;

0px 0px 20px 0px;

#header {


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

}


5px 5px 0;15px 20px .25em;

0px 0px 20px 0px;border-bottom: 1px solid #c1cccf;

#header {



}color:$pagetitlecolor;

5px 5px 0;15px 20px .25em;


#header {



}color:

5px 5px 0;15px 20px .25em;


#000033;

#header {



}color:

15px 20px .25em;


0px;

#000033;

#header {



}color:


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; }


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


margin: padding:0 0 1.5em; }

0px;


#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/

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






</slideshow >

bloggingwithstyle_2008

Technology