• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
BloggingWithStyle_2008
 

BloggingWithStyle_2008

on

  • 1,569 views

 

Statistics

Views

Total Views
1,569
Views on SlideShare
1,569
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    BloggingWithStyle_2008 BloggingWithStyle_2008 Presentation Transcript

    • Style Blogging 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
    • 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; padding: 0px 30px 0px 30px; } p { background-color: #ffffff; padding: 30px; margin: 0px; }
    • body { font-family: "trebuchet ms", sans-serif; <body> background-color: #ddeedd; padding: 20px 100px 0px 100px; <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; background-color: #ffffff; <p> padding: 0px 30px 0px 30px; And yet another paragraph } with a block of text. </p> p { background-color: #ffffff; </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.
    • 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, 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.
    • { The Declaration Block }
    • Properties and Values Value of my House Jan Feb March April May June
    • Properties and Values selector { property: value; property: value; }
    • color
    • 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
    • Red Green Blue #00 00 00
    • 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
    • #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; }
    • #outer-wrapper
    • #outer-wrapper { width: 660px; margin:0 auto; padding: 10px; text-align:$startSide; font: $bodyfont; }
    • #outer-wrapper { width: 660px; margin:0 auto; padding: 10px 40px 10px 40px; text-align:$startSide; font: $bodyfont; }
    • #outer-wrapper { width: 660px; margin:0 auto; padding: 10px 40px 10px 40px; text-align:$startSide; 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 #header #header h1
    • #header-wrapper #header #header h1
    • #header-wrapper #header #header h1
    • #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 { 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 { width:660px; margin: 0px 0px 20px 0px; 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 { width:660px; margin: 0px 0px 20px 0px; border-bottom: 1px solid #c1cccf; } #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 { width:660px; margin: 0px 0px 20px 0px; border-bottom: 1px solid #c1cccf; } #header { 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 { width:660px; margin: 0px 0px 20px 0px; border-bottom: 1px solid #c1cccf; } #header { color: #000033; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
    • #header-wrapper { width:660px; margin: 0px 0px 20px 0px; border-bottom: 1px solid #c1cccf; } #header { color: #000033; } #header h1 { margin: 0px; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
    • #header-wrapper { width:660px; margin: 0px 0px 20px 0px; border-bottom: 1px solid #c1cccf; } #header { color: #000033; } #header h1 { margin: 0px; padding: 30px 0px 0px 0px; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
    • .sidebar .widget, .main .widget { border-bottom:1px dotted $bordercolor; margin:0 0 1.5em; padding:0 0 1.5em; }
    • .sidebar .widget, .main .widget { margin:0 0 1.5em; padding:0 0 1.5em; }
    • .sidebar .widget, .main .widget { margin:0px; padding:0 0 1.5em; }
    • .sidebar .widget, .main .widget { margin:0px; padding:0 0 1.5em; } #sidebar-wrapper h2 { background-color: #113355; padding: 3px 0px 3px 5px; 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/
    • </slideshow >