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

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
The declaration has two parts:
selector { property: value; }

CSS Syntax
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>
<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>
<h1>Headline</h1>
</body>
</html>
h1 { color:#003366;
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>
<h1>Headline</h1>
<h1 class=“breakingnews”>
This Just In!</h1>
</body>
</html>

HTML CSS
style.css
index.html
<html>
<body>
<h1>Headline</h1>
This Just In!</h1>
</body>
</html>
h1 { color:#003366;
font-size:large;
}
h1.breakingnews { color:#ff0000;
text-transform:none;
font-size:medium;
}

HTML CSS
style.css
index.html
<html>
<body>
<h1>Headline</h1>
This Just In!</h1>
</body>
</html>
h1 { color:#003366;
font-size:large;
}
h1.breakingnews { color:#ff0000;
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

<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?
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?
Then, the CSS can talk directly to that div(s) for styling.
<div>
<div>
<footer>

<header>
Layout with CSS
What’s a div tag?
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:
Then, you can have the CSS talk directly to that div for styling.
#main_nav {
width:200px;
/* notice the # notation */
}
<div>
<footer>

<header>
Layout with CSS
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>
<footer>

<header>
Layout with CSS
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>
<footer>

<header>
Layout with CSS
<nav>
<ul>
<li>Link</li>
</ul>
</nav>
</div>
<div>
<footer>

<header>
Layout with CSS
<nav>
<ul>
<li>Link</li>
</ul>
</nav>
</div>
<div id=“content”>
<footer>

<header>
Layout with CSS
<nav>
<ul>
<li>Link</li>
</ul>
</nav>
</div>
<section>
<h1>About Us</h1>
<p>We are a full-service blah blah blah.</p>
</section>
</div>
<footer>

<header id=“pageheader”>
Layout with CSS
<nav>
<ul>
<li>Link</li>
</ul>
</nav>
</div>
<section>
<h1>About Us</h1>
</section>
</div>
<footer>

Layout with CSS
<nav>
<ul>
<li>Link</li>
</ul>
</nav>
</div>
<section>
<h1>About Us</h1>
</section>
</div>
<footer id=“pagefooter”>

Layout with CSS
The CSS
#pageheader { margin-bottom:10px;}
<nav>
<ul>
<li>Link</li>
</ul>
</nav>
</div>
<section>
<h1>About Us</h1>
</section>
</div>

Layout with CSS
The CSS
#main_nav { float:left;
width:200px; }
<nav>
<ul>
<li>Link</li>
</ul>
</nav>
</div>
<section>
<h1>About Us</h1>
</section>
</div>

Layout with CSS
The CSS
width:200px; }
#content {margin-left: 210px;}
<nav>
<ul>
<li>Link</li>
</ul>
</nav>
</div>
<section>
<h1>About Us</h1>
</section>
</div>

Layout with CSS
The CSS
width:200px; }
#content {margin-left: 210px;}
#pagefooter {clear: both;
margin-top:10px;}
<nav>
<ul>
<li>Link</li>
</ul>
</nav>
</div>
<section>
<h1>About Us</h1>
</section>
</div>

A COOL, GREEN BOX WITH ROUNDED EDGES AND DROP SHADOW.
HTML
<body>
<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 */
}

HTML
<body>
<header>
</header>
</body>
CSS
header h1 {
margin:30px;
padding:35px;
color: #fff;
}

HTML
<body>
<header>
</header>
</body>
CSS
body+header {
margin:30px;
padding:35px;
color: #fff;
}

HTML
<body>
<aside>
<figure>
<imgsrc=“images/agassi.jpg”>
</figure>
</aside>
</body>
CSS
body {
background:#999999;
}
figure img {
border:10px solid #ffffff;
}

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

Mullet Resources
Google: “mullet”

</mullet>

Maybe mock the ‘90s goatee next year…

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

by Tom Hapgood

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 2

Statistics

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

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