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

Embrace the MulletCSS is the Party in the Back(a CSS ‘how-to’)TOM HAPGOODWordCamp 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 AreaWeb 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, CSS3http://www.hapgooddesign.com@thapgood

Structure + PresentationA key concept is to keep the structure and presentation separate (in separate files).structure: presentation:HTML CSSindex.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

marginpaddingborderContentpaddingpaddingmarginmarginpaddingThe Box Modelmargin

marginpaddingborderpaddingpaddingmarginmarginpaddingThe Box Modelmargin

PaddingNicki-G/FlickrThe contentThe padding

The paddingThe marginThe border

Linking the HTML and CSSBetween 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.)

SyntaxHTML CSS<body> <h1>Hello, world.</h1></body>h1 { font-size: large; color: #003366; padding: 20px; }

CSS SyntaxA CSS rule consists of two main parts:selector { declaration;}

CSS SyntaxA CSS rule consists of two main parts: selector { declaration;} The declaration has two parts:selector { property: value; }

CSS SyntaxA CSS rule consists of two main parts: selector { declaration;} The declaration has two parts:selector { property: value; }selector { color: #000000; }

CSS Syntax / element type selectorStyling 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 CSSstyle.cssindex.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 CSSstyle.cssindex.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 selectorsWhat 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 CSSstyle.cssindex.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 CSSstyle.cssindex.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; }HEADLINEThis Just In!

CSS Syntax / descendant selectorsWhat 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; } orheader .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 selectorsWhat 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 moreGeneral sibling selectors E~F { declarations; }Child selectors E>F {declarations; }Pseudo-classes li:hover, li:first-child, :nth-of-typePseudo-elements p:first-line, ::selection

Shorthandheader {border-width:1px;border-style: dashed;border-color: #ff0000;}

Shorthandheader {border:1px dashed #ff0000;}

Shorthandheader {border-right:1px dashed #ff0000;}

Shorthandheader {border-bottom:1px dashed #ff0000;}

Hexadecimal colorsIn 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 colorsA 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).

<header>Layout with CSS<div><div><footer>

<header>Layout with CSSWhat’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 CSSWhat’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 CSSWhat’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 CSSWhat’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 CSSWait, 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 CSSWait, 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 CSSWait, 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 CSSThe 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 CSSThe 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 CSSThe 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 CSSThe 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>CSSheader 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>CSSbody+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>CSSbody {background:#999999;}figure img { border:10px solid #ffffff; box-shadow: 3px 3px 3px #333333;}

Thanks to Christopher Spencer (ca. 1987) for organizing WordCamp.

Mullet ResourcesGoogle: “mullet”

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

Related slideshows

More Related Content

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

Editor's Notes