• Save
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Upcoming SlideShare
Loading in...5
×
 

Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)

on

  • 1,715 views

A presentation by Tom Hapgood for WordCamp Fayetteville, in Fayetteville, AR, dealing with basic Cascading Style Sheets (CSS) in web design. CSS is likened to the "mullet," being the party in the ...

A presentation by Tom Hapgood for WordCamp Fayetteville, in Fayetteville, AR, dealing with basic Cascading Style Sheets (CSS) in web design. CSS is likened to the "mullet," being the party in the back, with HTML as the "business in the front."

Statistics

Views

Total Views
1,715
Views on SlideShare
1,712
Embed Views
3

Actions

Likes
3
Downloads
0
Comments
1

3 Embeds 3

http://twitter.com 1
http://blackboard.muhlenberg.edu 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • Based on my concept last year of the mullet hair style and its relationship to web markup (HTMLis the ‘business front’ and CSS is the ‘party in the back’), this presentation will be a demonstration on the fun and effectiveness of implementing graphic design with HTML and cascading style sheets, with special attention to CSS3 techniques.
  • “To those of you in the room still rocking the mullet, I salute your bravery and dedication to the past.”
  • Tom Hapgood in front of the Berlin Wall with a mullet, Monsters of Rock ‘86 (Mannheim) and pegged, torn jeans. The quintessential ‘80s picture.
  • Rocky Grove Sun Company web site design and coding by Tom Hapgood, using WordPress and the Pods plugin. A project of Haden Interactive.
  • Vertz and Company web site design and coding by Tom Hapgood, using WordPress and the Pods plugin. A project of Haden Interactive.
  • Deutsch | Parker Design web site design and coding by Tom Hapgood, using WordPress and the Pods plugin.
  • When a web page starts to load, it’s all business. HTML tags providing a skeleton structure for marking up the content. As the page continues to load in the browser, the browser reads the code very quickly line-by-line starting at the top. In this example, when it arrives at line 6, the browser is told to bring up some more files from “the back” and load them.
  • This normal HTML page as it would load without style sheets.
  • When lines 6 and 7 are loaded in, the party starts. Line 6 (and 7) is a call to bring out the style sheet and load it also, thereby giving the page its presentational elements such as color, layout, fonts and even drop shadows, animations and rounded edges.
  • The same page with the style sheets loaded and all the color, layout and typography.
  • A style sheet (CSS) file that provides presentation elements to the web page, such as typography, colors and layout.
  • The Box Model. Students always seem to confuse padding and margins.
  • The Box Model. Students always seem to confuse padding and margins.
  • The Box Model. Students always seem to confuse padding and margins.
  • The Box Model. Students always seem to confuse padding and margins. A video
  • Students always seem to confuse padding and margins. You don’t want your content to get hurt by bouncing off the hard inside edges of the border, so you add padding.
  • Another type of padded cell. Some basic elements of the box model. The margin is the space around a box or outside the border, or between two adjacent boxes pushing them apart. The padding goes inside the border, between the content and the border, while the margin goes outside the border.
  • Linking the HTML and CSSBetween the tags in the HTML document, the following line is inserted: (making sure that the path to the style.css file is correct.)
  • Linking the HTML and CSSBetween the tags in the HTML document, the following line is inserted: (making sure that the path to the style.css file is correct.)
  • CSS SyntaxA CSS rule consists of two main parts: selector and declaration
  • CSS SyntaxA CSS rule consists of two main parts: selector and declarationThe declaration has two parts: property and value
  • CSS SyntaxA CSS rule consists of two main parts: selector and declarationThe declaration has two parts: property and valueFor instance, color: #000000 (black)
  • CSS Syntax / element type selector, Styling an existing HTML tagTo make all p (paragraph) tags on your page black: p { color: #000000; }
  • The basic relationship between an HTML page and a CSS document, and the basic styling of an h1 tag.
  • The basic relationship between an HTML page and a CSS document, and the basic styling of an h1 tag.
  • The basic relationship between an HTML page and a CSS document, and the basic styling of an h1 tag.
  • What if you wanted some h1 tags to be blue and some red? Expand the existing tag set with the use of classes: Classes use the dot notation as below: h1.breakingnews { color: #ff0000; }
  • Using a class to style the h1 tag in two different ways.
  • The basic relationship between an HTML page and a CSS document, and the basic styling of an h1 tag.
  • Using a class to style the h1 tag in two different ways.
  • What if you wanted some h1 tags to be blue and some red? Expand the existing tag set with the use of classes: Classes use the dot notation as below: h1.breakingnews { color: #ff0000; }
  • What if you wanted some h1 tags to be blue and some red? Expand the existing tag set with the use of classes: Classes use the dot notation as below: h1.breakingnews { color: #ff0000; }
  • The official explanation of hexadecimal colors. I just use Photoshop or one of the color pickers in the coding programs.
  • The official explanation of hexadecimal colors. I just use Photoshop or one of the color pickers in the coding programs. (When each pairing is identical, it’s a gray).
  • Layout with CSS
  • The basic web page layout, with a header, two columns and a footer
  • The basic web page layout, with a header, two columns and a footer, using a tag, two tags and a tag.
  • What’s a div tag?It’s short for “division” and it’s a way to think about creating “areas” or “segments” or “portions” of the page. Visually, these end up looking like columns or any other boxes on the page.
  • What’s a div tag?It’s short for “division” and it’s a way to think about creating “areas” or “segments” or “portions” of the page. Visually, these end up looking like columns or any other boxes on the page.You may have many divs on a page, so you’ll need to give them a name, like this:
  • What’s a div tag?It’s short for “division” and it’s a way to think about creating “areas” or “segments” or “portions” of the page. Visually, these end up looking like columns or any other boxes on the page.You may have many divs on a page, so you’ll need to give them a name, like this: Then, the CSS can talk directly to that div(s) for styling.
  • What’s a div tag?It’s short for “division” and it’s a way to think about creating “areas” or “segments” or “portions” of the page. Visually, these end up looking like columns or any other boxes on the page.You may have many divs on a page, so you’ll need to give them a name, like this: Then, the CSS can talk directly to that div(s) for styling. .promobox { width:200px; }
  • The left div gets and ID of “main_nav”
  • Wait, what’s an ID?Instead of giving an element, such as a div, a class name, you can give it an ID. An ID is used once per page. A class can be used many times on a page.Assigning an ID is very similar: Then, you can have the CSS talk directly to that div for styling. #main_nav { width:200px; /* notice the # notation */ }
  • Wait, what’s an ID?In other words, an ID is a unique identifier.I use an ID on a div when I’m certain that div is going to have a unique presence on the page, such as the main navigation or the page header.
  • Wait, what’s an ID?In other words, an ID is a unique identifier.I use an ID on a div when I’m certain that div is going to have a unique presence on the page, such as the main navigation or the page header.Use a class designation on a div (or other element) that may be re-used on the page, such as a typographic treatment or multiple promotional boxes that sit in the sidebar.
  • Go ahead and give the header an id, as there can be many other header tags on the page.
  • Go ahead and give the footer an id, as there can be many other footer tags on the page.
  • The CSS for the basic layout#pageheader { margin-bottom:10px;}
  • The CSS for the basic layout#pageheader { margin-bottom:10px;}#main_nav { float:left; width:200px; }
  • The CSS for the basic layout#pageheader { margin-bottom:10px;}#main_nav { float:left; width:200px; }#content {margin-left: 210px;}
  • The CSS for the basic layout#pageheader { margin-bottom:10px;}#main_nav { float:left; width:200px; }#content {margin-left: 210px;}#pagefooter {clear: both; margin-top:10px;}
  • Example of a header box HTML and CSS with a hint of vendor prefixing for explanation. This method uses an ID of “pageheader” on the header tag for a styling hook.
  • Example of a header box HTML and CSS with a hint of vendor prefixing for explanation. This method uses a descendant selector header h1. But, what if there was another header h1 scenario on the page, perhaps within a section in the content div?
  • Example of a header box HTML and CSS with a hint of vendor prefixing for explanation. This method uses an adjacent sibling selector body+header, meaning this header will only style in this way if it is directly preceded by the body tag. This is a good method in that it doesn’t involve the need to use an ID or class in the HTML. Less markup.
  • Example of styling an image with a large, white border and box shadow on a gray body (browser viewport).
  • Example of styling an image with a large, white border and box shadow. The styling “hook” used here is a figure img. This would, of course, style all images in figure tags throughout the whole site.
  • Example of styling an image with a large, white border and box shadow.
  • Coda – One-window Web Development, by Panic. Sometimes I use this, but it hasn’t been updated enough in a long time.
  • Textmate for code editing
  • Cssedit by macrabbit. Make your edits and watch them happen in real time.
  • Adobe Dreamweaver CS5.5 on Windows and Macintosh
  • Microsoft Expression Web 4 on Windows
  • Ultimate CSS Gradient Generator at http://www.colorzilla.com/gradient-editor/
  • Progressive Internet Explorer at http://www.css3pie.com
  • border-radius.com, a service by jacobbijani, at http://www.border-radius.com
  • CSS3 Generator at http://www.css3generator.com
  • Previewing the Deutsch | Parker Design web site in Internet Explorer 7/8/9 in Windows 7 through Parallels 6 Desktop for Mac.
  • Previewing the Deutsch | Parker Design web site in Internet Explorer 7/8/9 in Windows 7 through Parallels 6 Desktop for Mac.
  • Thanks to Christopher Spencer, 1987 (Photoshopped image of Christopher today with a mullet), the organizer of WordCamp Fayetteville 2010 and 2011.
  • Mullet Resources
  • If you are a Northwest Arkansas creative or an alumnus/alumna of the UA Art Department, please join our Facebook group!
  • Done with the mullet.
  • Maybe mock the ‘90s goatee next year…

Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to) Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to) Presentation Transcript

  • Embrace the MulletCSS is the Party in the Back
    (a CSS ‘how-to’)
    TOM HAPGOOD
    WordCamp Fayetteville #wcfay / 2011
  • To those of you in the room still rocking the mullet, I salute your bravery and dedication to the glory years.
  • University of Arkansas Art Department, Design Area
    • Web Design 1 // HTML5, CSS3, DW, PS, FW, etc.
    • Art of Interactive Journalism // WP, FCP, PS, DW
    • Motion Design // C4D, AE, AI, PS, FCP
    • Typography // ID, PS, HTML5, CSS3
    http://www.hapgooddesign.com
    @thapgood
  • Structure + Presentation
    A key concept is to keep the structure and presentation separate (in separate files).
    structure: presentation:
    HTML CSS
    index.htmlstyle.css
  • Often-Used CSS Properties
    { font-family
    { font-size
    { font-weight
    { font-style
    { text-align
    { color
    { background-image
    { background-color
    { background-repeat
    { padding
    { margin
    { float
    { line-height
    { letter-spacing
    { border
    { border-radius
    { box-shadow
    { text-transform
    { text-shadow
    { display
    { position
    { width
    { height
  • margin
    padding
    border
    Content
    padding
    padding
    margin
    margin
    padding
    The Box Model
    margin
  • margin
    padding
    border
    padding
    padding
    margin
    margin
    padding
    The Box Model
    margin
  • margin
    padding
    border
    padding
    padding
    margin
    margin
    padding
    The Box Model
    margin
  • margin
    padding
    border
    padding
    padding
    margin
    margin
    padding
    The Box Model
    margin
  • Padding
    Nicki-G/Flickr
    The content
    The padding
  • The padding
    The margin
    The border
  • Linking the HTML and CSS
    Between the <head> tags in the HTML document, the following line is inserted:
    <head>
    <link rel=“stylesheet” href=“style.css”>
    </head>
    (making sure that the path to the style.css file is correct.)
  • Syntax
    HTML CSS
    <body>
    <h1>Hello, world.</h1>
    </body>
    h1 {
    font-size: large;
    color: #003366;
    padding: 20px;
    }
  • CSS Syntax
    A CSS rule consists of two main parts:
    selector { declaration;}
  • CSS Syntax
    A CSS rule consists of two main parts:
    selector { declaration;}
    The declaration has two parts:
    selector { property: value; }
  • CSS Syntax
    A CSS rule consists of two main parts:
    selector { declaration;}
    The declaration has two parts:
    selector { property: value; }
    selector { color: #000000; }
  • CSS Syntax / element type selector
    Styling an existing HTML tag:
    To make all p (paragraph) tags on your page black:
    p { color: #000000; }
  • HTML
    index.html
    <html>
    <body>
    <link rel=“stylesheet” … >
    <h1>Headline</h1>
    </body>
    </html>
  • HTML CSS
    style.css
    index.html
    <html>
    <body>
    <link rel=“stylesheet” … >
    <h1>Headline</h1>
    </body>
    </html>
    h1 { color:#003366;
    font-family:Georgia, serif;
    text-transform:uppercase;
    font-size:large;
    }
  • HTML CSS
    style.css
    index.html
    <html>
    <body>
    <link rel=“stylesheet” … >
    <h1>Headline</h1>
    </body>
    </html>
    h1 { color:#003366;
    font-family:Georgia, serif;
    text-transform:uppercase;
    font-size:large;
    }
    HEADLINE
  • CSS Syntax / class selectors
    What if you wanted some h1 tags to be blue and some red? Expand the existing tag set with the use of classes:
    Classes use the dot notation as below:
    h1.breakingnews { color: #ff0000; }
    So, used whenever there is an h1 tag with a class of “breakingnews”.
  • HTML
    index.html
    <html>
    <body>
    <link rel=“stylesheet” … >
    <h1>Headline</h1>
    <h1 class=“breakingnews”>
    This Just In!</h1>
    </body>
    </html>
  • HTML CSS
    style.css
    index.html
    <html>
    <body>
    <link rel=“stylesheet” … >
    <h1>Headline</h1>
    <h1 class=“breakingnews”>
    This Just In!</h1>
    </body>
    </html>
    h1 { color:#003366;
    font-family:Georgia, serif;
    text-transform:uppercase;
    font-size:large;
    }
    h1.breakingnews { color:#ff0000;
    font-family:Georgia, serif;
    text-transform:none;
    font-size:medium;
    }
  • HTML CSS
    style.css
    index.html
    <html>
    <body>
    <link rel=“stylesheet” … >
    <h1>Headline</h1>
    <h1 class=“breakingnews”>
    This Just In!</h1>
    </body>
    </html>
    h1 { color:#003366;
    font-family:Georgia, serif;
    text-transform:uppercase;
    font-size:large;
    }
    h1.breakingnews { color:#ff0000;
    font-family:Georgia, serif;
    text-transform:none;
    font-size:medium;
    }
    HEADLINE
    This Just In!
  • CSS Syntax / descendant selectors
    What if you wanted some h1 tags to be blue, but only when they are inside of the <header> tag?:
    Descendant selectors look like this:
    header h1 { color: #003366; } or
    header .breakingnews{ color: #ff0000;}
    The h1 will only style blue when it’s nested inside the header tag:
    <header><h1>WordCamp</h1></header>
  • CSS Syntax / adjacent sibling selectors
    What if you wanted some p tags to be bold, but only when they directly follow an h2? Use the + symbol:
    h2+p { font-weight:bold; }
    The p will only style bold when directly follows the h2:
    <h2>Welcome to WordCamp!</h2>
    <p>WordCamp (This will be bold)</p>
    <p>OtherCamp (This will not be bold)</p>
  • Lots more
    General sibling selectors E~F { declarations; }
    Child selectors E>F {declarations; }
    Pseudo-classes li:hover, li:first-child, :nth-of-type
    Pseudo-elements p:first-line, ::selection
  • Shorthand
    header {
    border-width:1px;
    border-style: dashed;
    border-color: #ff0000;
    }
  • Shorthand
    header {
    border:1px dashed #ff0000;
    }
  • Shorthand
    header {
    border-right:1px dashed #ff0000;
    }
  • Shorthand
    header {
    border-bottom:1px dashed #ff0000;
    }
  • Hexadecimal colors
    In mathematics and computer science, hexadecimal (also base 16, or hex) is a positional numeral system with a radix, or base, of 16.
    It uses sixteen distinct symbols, most often the symbols 0–9 to represent values zero to nine, and A, B, C, D, E, F (or alternatively a–f) to represent values ten to fifteen. For example, the hexadecimal number 2AF3 is equal, in decimal, to (2 × 163) + (10 × 162) + (15 × 161) + (3 × 160) , or 10,995.
  • Hexadecimal colors
    A few to remember (the grayscales):
    #000000; /* black */
    #333333;
    #666666;
    #999999;
    #cccccc;
    #ffffff; /* white */
    (When each pairing is identical, it’s a gray).
  • When the HEX RGB pairings are identical, it’s a gray.
  • 147 color names are defined in the HTML and CSS color specification (17 standard colors plus 130 more).
  • Layout with CSS
  • Layout with CSS
  • <header>
    Layout with CSS
    <div>
    <div>
    <footer>
  • <header>
    Layout with CSS
    What’s a div tag?
    It’s short for “division” and it’s a way to think about creating “areas” or “segments” or “portions” of the page. Visually, these end up looking like columns or any other boxes on the page.
    <div>
    <div>
    <footer>
  • <header>
    Layout with CSS
    What’s a div tag?
    It’s short for “division” and it’s a way to think about creating “areas” or “segments” or “portions” of the page. Visually, these end up looking like columns or any other boxes on the page.
    You may have many divs on a page, so you’ll need to give them a name, like this:
    <div class=“promobox”>
    <div>
    <div>
    <footer>
  • <header>
    Layout with CSS
    What’s a div tag?
    It’s short for “division” and it’s a way to think about creating “areas” or “segments” or “portions” of the page. Visually, these end up looking like columns or any other boxes on the page.
    You may have many divs on a page, so you’ll need to give them a name, like this:
    <div class=“promobox”>
    Then, the CSS can talk directly to that div(s) for styling.
    <div>
    <div>
    <footer>
  • <header>
    Layout with CSS
    What’s a div tag?
    It’s short for “division” and it’s a way to think about creating “areas” or “segments” or “portions” of the page. Visually, these end up looking like columns or any other boxes on the page.
    You may have many divs on a page, so you’ll need to give them a name, like this:
    <div class=“promobox”>
    Then, the CSS can talk directly to that div(s) for styling.
    .promobox {
    width:200px;
    }
    <div>
    <div>
    <footer>
  • <header>
    Layout with CSS
    <div id=“main_nav”>
    <div>
    <footer>
  • <header>
    Layout with CSS
    Wait, what’s an ID?
    Instead of giving an element, such as a div, a class name, you can give it an ID. An ID is used once per page. A class can be used many times on a page.
    Assigning an ID is very similar:
    <div id=“main_nav”>
    Then, you can have the CSS talk directly to that div for styling.
    #main_nav {
    width:200px;
    /* notice the # notation */
    }
    <div id=“main_nav”>
    <div>
    <footer>
  • <header>
    Layout with CSS
    Wait, what’s an ID?
    In other words, an ID is a unique identifier.
    I use an ID on a div when I’m certain that div is going to have a unique presence on the page, such as the main navigation or the page header.
    <div id=“main_nav”>
    <div>
    <footer>
  • <header>
    Layout with CSS
    Wait, what’s an ID?
    In other words, an ID is a unique identifier.
    I use an ID on a div when I’m certain that div is going to have a unique presence on the page, such as the main navigation or the page header.
    Use a class designation on a div (or other element) that may be re-used on the page, such as a typographic treatment or multiple promotional boxes that sit in the sidebar.
    <div id=“main_nav”>
    <div>
    <footer>
  • <header>
    Layout with CSS
    <div id=“main_nav”>
    <nav>
    <ul>
    <li>Link</li>
    </ul>
    </nav>
    </div>
    <div>
    <footer>
  • <header>
    Layout with CSS
    <div id=“main_nav”>
    <nav>
    <ul>
    <li>Link</li>
    </ul>
    </nav>
    </div>
    <div id=“content”>
    <footer>
  • <header>
    Layout with CSS
    <div id=“main_nav”>
    <nav>
    <ul>
    <li>Link</li>
    </ul>
    </nav>
    </div>
    <div id=“content”>
    <section>
    <h1>About Us</h1>
    <p>We are a full-service blah blah blah.</p>
    </section>
    </div>
    <footer>
  • <header id=“pageheader”>
    Layout with CSS
    <div id=“main_nav”>
    <nav>
    <ul>
    <li>Link</li>
    </ul>
    </nav>
    </div>
    <div id=“content”>
    <section>
    <h1>About Us</h1>
    <p>We are a full-service blah blah blah.</p>
    </section>
    </div>
    <footer>
  • <header id=“pageheader”>
    Layout with CSS
    <div id=“main_nav”>
    <nav>
    <ul>
    <li>Link</li>
    </ul>
    </nav>
    </div>
    <div id=“content”>
    <section>
    <h1>About Us</h1>
    <p>We are a full-service blah blah blah.</p>
    </section>
    </div>
    <footer id=“pagefooter”>
  • <header id=“pageheader”>
    Layout with CSS
    The CSS
    #pageheader { margin-bottom:10px;}
    <div id=“main_nav”>
    <nav>
    <ul>
    <li>Link</li>
    </ul>
    </nav>
    </div>
    <div id=“content”>
    <section>
    <h1>About Us</h1>
    <p>We are a full-service blah blah blah.</p>
    </section>
    </div>
    <footer id=“pagefooter”>
  • <header id=“pageheader”>
    Layout with CSS
    The CSS
    #pageheader { margin-bottom:10px;}
    #main_nav { float:left;
    width:200px; }
    <div id=“main_nav”>
    <nav>
    <ul>
    <li>Link</li>
    </ul>
    </nav>
    </div>
    <div id=“content”>
    <section>
    <h1>About Us</h1>
    <p>We are a full-service blah blah blah.</p>
    </section>
    </div>
    <footer id=“pagefooter”>
  • <header id=“pageheader”>
    Layout with CSS
    The CSS
    #pageheader { margin-bottom:10px;}
    #main_nav { float:left;
    width:200px; }
    #content {margin-left: 210px;}
    <div id=“main_nav”>
    <nav>
    <ul>
    <li>Link</li>
    </ul>
    </nav>
    </div>
    <div id=“content”>
    <section>
    <h1>About Us</h1>
    <p>We are a full-service blah blah blah.</p>
    </section>
    </div>
    <footer id=“pagefooter”>
  • <header id=“pageheader”>
    Layout with CSS
    The CSS
    #pageheader { margin-bottom:10px;}
    #main_nav { float:left;
    width:200px; }
    #content {margin-left: 210px;}
    #pagefooter {clear: both;
    margin-top:10px;}
    <div id=“main_nav”>
    <nav>
    <ul>
    <li>Link</li>
    </ul>
    </nav>
    </div>
    <div id=“content”>
    <section>
    <h1>About Us</h1>
    <p>We are a full-service blah blah blah.</p>
    </section>
    </div>
    <footer id=“pagefooter”>
  • A COOL, GREEN BOX WITH ROUNDED EDGES AND DROP SHADOW.
    HTML
    <body>
    <header id=“pageheader”>
    <h1>A cool, green box with some rounded edges and drop shadow.</h1>
    </header>
    </body>
    CSS
    #pageheader {
    margin:30px;
    padding:35px;
    color: #fff;
    background: #aac46b;
    border:1px solid #91ab53;
    text-transform: uppercase;
    box-shadow: 0px 6px 6px #666;
    text-shadow: 0 0 2px #999;
    border-radius: 14px;
    -moz-border-radius: 14px;
    /* other vendor prefixes here */
    }
  • A COOL, GREEN BOX WITH ROUNDED EDGES AND DROP SHADOW.
    HTML
    <body>
    <header>
    <h1>A cool, green box with some rounded edges and drop shadow.</h1>
    </header>
    </body>
    CSS
    header h1 {
    margin:30px;
    padding:35px;
    color: #fff;
    background: #aac46b;
    border:1px solid #91ab53;
    text-transform: uppercase;
    box-shadow: 0px 6px 6px #666;
    text-shadow: 0 0 2px #999;
    border-radius: 14px;
    -moz-border-radius: 14px;
    /* other vendor prefixes here */
    }
  • A COOL, GREEN BOX WITH ROUNDED EDGES AND DROP SHADOW.
    HTML
    <body>
    <header>
    <h1>A cool, green box with some rounded edges and drop shadow.</h1>
    </header>
    </body>
    CSS
    body+header {
    margin:30px;
    padding:35px;
    color: #fff;
    background: #aac46b;
    border:1px solid #91ab53;
    text-transform: uppercase;
    box-shadow: 0px 6px 6px #666;
    text-shadow: 0 0 2px #999;
    border-radius: 14px;
    -moz-border-radius: 14px;
    /* other vendor prefixes here */
    }
  • HTML
    <body>
    <aside>
    <figure>
    <imgsrc=“images/agassi.jpg”>
    </figure>
    </aside>
    </body>
    CSS
    body {
    background:#999999;
    }
    figure img {
    border:10px solid #ffffff;
    box-shadow: 3px 3px 3px #333333;
    }
  • Thanks to Christopher Spencer (ca. 1987) for organizing WordCamp.
  • Mullet Resources
    Google: “mullet”
  • </mullet>
  • Maybe mock the ‘90s goatee next year…