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 ,[object Object]

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 + 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 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).

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

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (20)

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

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

Último

Último (20)

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

Notas del editor