Embrace the MulletCSS is the Party in the Back<br />(a CSS ‘how-to’)<br />TOM HAPGOOD<br />WordCamp Fayetteville #wcfay / ...
To those of you in the room still rocking the mullet, I salute your bravery and dedication to the glory years.<br />
University of Arkansas Art Department, Design Area<br /><ul><li>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</li></ul>http://www.hapgooddesign.com<br />@thapgood<br />
Structure + Presentation<br />A key concept is to keep the structure and presentation separate (in separate files).<br />s...
Often-Used CSS Properties<br />{ font-family<br />{ font-size<br />{ font-weight<br />{ font-style<br />{ text-align<br />...
margin<br />padding<br />border<br />Content<br />padding<br />padding<br />margin<br />margin<br />padding<br />The Box M...
margin<br />padding<br />border<br />padding<br />padding<br />margin<br />margin<br />padding<br />The Box Model<br />mar...
margin<br />padding<br />border<br />padding<br />padding<br />margin<br />margin<br />padding<br />The Box Model<br />mar...
margin<br />padding<br />border<br />padding<br />padding<br />margin<br />margin<br />padding<br />The Box Model<br />mar...
Padding<br />Nicki-G/Flickr<br />The content<br />The padding<br />
The padding<br />The margin<br />The border<br />
Linking the HTML and CSS<br />Between the <head> tags in the HTML document, the following line is inserted:<br /><head><br...
Syntax<br />HTML                      							CSS<br /><body><br />	<h1>Hello, world.</h1><br /></body><br />h1 {<br />	fon...
CSS Syntax<br />A CSS rule consists of two main parts:<br />selector { declaration;}<br />
CSS Syntax<br />A CSS rule consists of two main parts:<br />	selector { declaration;}<br />				The declaration has two par...
CSS Syntax<br />A CSS rule consists of two main parts:<br />	selector { declaration;}<br />				The declaration has two par...
CSS Syntax / element type selector<br />Styling an existing HTML tag:<br />To make all p (paragraph) tags on your page bla...
HTML                      		<br />index.html<br /><html><br /><body><br /><link rel=“stylesheet” … ><br /><h1>Headline</h1...
HTML                      		CSS<br />style.css<br />index.html<br /><html><br /><body><br /><link rel=“stylesheet” … ><br ...
HTML                      		CSS<br />style.css<br />index.html<br /><html><br /><body><br /><link rel=“stylesheet” … ><br ...
CSS Syntax / class selectors<br />What if you wanted some h1 tags to be blue and some red? Expand the existing tag set wit...
HTML                      		<br />index.html<br /><html><br /><body><br /><link rel=“stylesheet” … ><br /> <h1>Headline</h...
HTML                      		CSS<br />style.css<br />index.html<br /><html><br /><body><br /><link rel=“stylesheet” … ><br ...
HTML                      		CSS<br />style.css<br />index.html<br /><html><br /><body><br /><link rel=“stylesheet” … ><br ...
CSS Syntax / descendant selectors<br />What if you wanted some h1 tags to be blue, but only when they are inside of the <h...
CSS Syntax / adjacent sibling selectors<br />What if you wanted some p tags to be bold, but only when they directly follow...
Lots more<br />General sibling selectors E~F	{ declarations; }<br />Child selectors E>F {declarations; }<br />Pseudo-class...
Shorthand<br />header {<br />border-width:1px;<br />border-style: dashed;<br />border-color: #ff0000;<br />}<br />
Shorthand<br />header {<br />border:1px dashed #ff0000;<br />}<br />
Shorthand<br />header {<br />border-right:1px dashed #ff0000;<br />}<br />
Shorthand<br />header {<br />border-bottom:1px dashed #ff0000;<br />}<br />
Hexadecimal colors<br />In mathematics and computer science, hexadecimal (also base 16, or hex) is a positional numeral sy...
Hexadecimal colors<br />A few to remember (the grayscales):<br />#000000; /* black */<br />#333333;<br />#666666;<br />#99...
When the HEX RGB pairings are identical, it’s a gray. <br />
147 color names are defined in the HTML and CSS color specification (17 standard colors plus 130 more). <br />
Layout with CSS<br />
Layout with CSS<br />
<header><br />Layout with CSS<br /><div><br /><div><br /><footer><br />
<header><br />Layout with CSS<br />What’s a div tag?<br />It’s short for “division” and it’s a way to think about creating...
<header><br />Layout with CSS<br />What’s a div tag?<br />It’s short for “division” and it’s a way to think about creating...
<header><br />Layout with CSS<br />What’s a div tag?<br />It’s short for “division” and it’s a way to think about creating...
<header><br />Layout with CSS<br />What’s a div tag?<br />It’s short for “division” and it’s a way to think about creating...
<header><br />Layout with CSS<br /><div id=“main_nav”><br /><div><br /><footer><br />
<header><br />Layout with CSS<br />Wait, what’s an ID?<br />Instead of giving an element, such as a div, a class name, you...
<header><br />Layout with CSS<br />Wait, what’s an ID?<br />In other words, an ID is a unique identifier.<br />I use an ID...
<header><br />Layout with CSS<br />Wait, what’s an ID?<br />In other words, an ID is a unique identifier.<br />I use an ID...
<header><br />Layout with CSS<br /><div id=“main_nav”><br />	<nav><br />		<ul><br />			<li>Link</li><br />	</ul><br /></na...
<header><br />Layout with CSS<br /><div id=“main_nav”><br />	<nav><br />		<ul><br />			<li>Link</li><br />	</ul><br /></na...
<header><br />Layout with CSS<br /><div id=“main_nav”><br />	<nav><br />		<ul><br />			<li>Link</li><br />	</ul><br /></na...
<header id=“pageheader”><br />Layout with CSS<br /><div id=“main_nav”><br />	<nav><br />		<ul><br />			<li>Link</li><br />...
<header id=“pageheader”><br />Layout with CSS<br /><div id=“main_nav”><br />	<nav><br />		<ul><br />			<li>Link</li><br />...
<header id=“pageheader”><br />Layout with CSS<br />The CSS<br />#pageheader {  margin-bottom:10px;}<br /><div id=“main_nav...
<header id=“pageheader”><br />Layout with CSS<br />The CSS<br />#pageheader {  margin-bottom:10px;}<br />#main_nav { float...
<header id=“pageheader”><br />Layout with CSS<br />The CSS<br />#pageheader {  margin-bottom:10px;}<br />#main_nav { float...
<header id=“pageheader”><br />Layout with CSS<br />The CSS<br />#pageheader {  margin-bottom:10px;}<br />#main_nav { float...
A COOL, GREEN BOX WITH ROUNDED EDGES AND DROP SHADOW.<br />HTML<br /><body><br /><header id=“pageheader”><br />	<h1>A cool...
A COOL, GREEN BOX WITH ROUNDED EDGES AND DROP SHADOW.<br />HTML<br /><body><br />	<header><br />		<h1>A cool, green box wi...
A COOL, GREEN BOX WITH ROUNDED EDGES AND DROP SHADOW.<br />HTML<br /><body><br />	<header><br />	<h1>A cool, green box wit...
HTML<br /><body><br />	<aside><br />    <figure><br />	<imgsrc=“images/agassi.jpg”><br />    </figure><br /></aside><br />...
Thanks to Christopher Spencer (ca. 1987) for organizing WordCamp.<br />
Mullet Resources<br />Google: “mullet”<br />
Upcoming SlideShare
Loading in …5
×

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

1,701 views
1,611 views

Published on

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

Published in: Design, Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
1,701
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • 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 &lt;head&gt; tags in the HTML document, the following line is inserted:&lt;head&gt; &lt;link rel=“stylesheet” href=“style.css”&gt;&lt;/head&gt;(making sure that the path to the style.css file is correct.)
  • Linking the HTML and CSSBetween the &lt;head&gt; tags in the HTML document, the following line is inserted:&lt;head&gt; &lt;link rel=“stylesheet” href=“style.css”&gt;&lt;/head&gt;(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 &lt;header&gt; tag, two &lt;div&gt; tags and a &lt;footer&gt; 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: &lt;div class=“promobox”&gt;
  • 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: &lt;div class=“promobox”&gt;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: &lt;div class=“promobox”&gt;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: &lt;div id=“main_nav”&gt;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)

    1. 1. Embrace the MulletCSS is the Party in the Back<br />(a CSS ‘how-to’)<br />TOM HAPGOOD<br />WordCamp Fayetteville #wcfay / 2011<br />
    2. 2. To those of you in the room still rocking the mullet, I salute your bravery and dedication to the glory years.<br />
    3. 3.
    4. 4. University of Arkansas Art Department, Design Area<br /><ul><li>Web Design 1 // HTML5, CSS3, DW, PS, FW, etc.
    5. 5. Art of Interactive Journalism // WP, FCP, PS, DW
    6. 6. Motion Design // C4D, AE, AI, PS, FCP
    7. 7. Typography // ID, PS, HTML5, CSS3</li></ul>http://www.hapgooddesign.com<br />@thapgood<br />
    8. 8.
    9. 9.
    10. 10.
    11. 11.
    12. 12.
    13. 13.
    14. 14.
    15. 15. Structure + Presentation<br />A key concept is to keep the structure and presentation separate (in separate files).<br />structure: presentation:<br />HTML CSS<br />index.htmlstyle.css<br />
    16. 16.
    17. 17. Often-Used CSS Properties<br />{ font-family<br />{ font-size<br />{ font-weight<br />{ font-style<br />{ text-align<br />{ color<br />{ background-image<br />{ background-color<br />{ background-repeat<br />{ padding<br />{ margin<br />{ float<br />{ line-height<br />{ letter-spacing<br />{ border<br />{ border-radius<br />{ box-shadow<br />{ text-transform<br />{ text-shadow<br />{ display<br />{ position<br />{ width<br />{ height<br />
    18. 18. margin<br />padding<br />border<br />Content<br />padding<br />padding<br />margin<br />margin<br />padding<br />The Box Model<br />margin<br />
    19. 19. margin<br />padding<br />border<br />padding<br />padding<br />margin<br />margin<br />padding<br />The Box Model<br />margin<br />
    20. 20. margin<br />padding<br />border<br />padding<br />padding<br />margin<br />margin<br />padding<br />The Box Model<br />margin<br />
    21. 21. margin<br />padding<br />border<br />padding<br />padding<br />margin<br />margin<br />padding<br />The Box Model<br />margin<br />
    22. 22. Padding<br />Nicki-G/Flickr<br />The content<br />The padding<br />
    23. 23. The padding<br />The margin<br />The border<br />
    24. 24. Linking the HTML and CSS<br />Between the <head> tags in the HTML document, the following line is inserted:<br /><head><br /> <link rel=“stylesheet” href=“style.css”><br /></head><br />(making sure that the path to the style.css file is correct.)<br />
    25. 25. Syntax<br />HTML CSS<br /><body><br /> <h1>Hello, world.</h1><br /></body><br />h1 {<br /> font-size: large;<br /> color: #003366;<br /> padding: 20px;<br /> }<br />
    26. 26. CSS Syntax<br />A CSS rule consists of two main parts:<br />selector { declaration;}<br />
    27. 27. CSS Syntax<br />A CSS rule consists of two main parts:<br /> selector { declaration;}<br /> The declaration has two parts:<br />selector { property: value; }<br />
    28. 28. CSS Syntax<br />A CSS rule consists of two main parts:<br /> selector { declaration;}<br /> The declaration has two parts:<br />selector { property: value; }<br />selector { color: #000000; }<br />
    29. 29. CSS Syntax / element type selector<br />Styling an existing HTML tag:<br />To make all p (paragraph) tags on your page black:<br /> p { color: #000000; }<br />
    30. 30. HTML <br />index.html<br /><html><br /><body><br /><link rel=“stylesheet” … ><br /><h1>Headline</h1><br /></body><br /></html><br />
    31. 31. HTML CSS<br />style.css<br />index.html<br /><html><br /><body><br /><link rel=“stylesheet” … ><br /><h1>Headline</h1><br /></body><br /></html><br />h1 { color:#003366;<br />font-family:Georgia, serif;<br />text-transform:uppercase;<br />font-size:large;<br />}<br />
    32. 32. HTML CSS<br />style.css<br />index.html<br /><html><br /><body><br /><link rel=“stylesheet” … ><br /><h1>Headline</h1><br /></body><br /></html><br />h1 { color:#003366;<br />font-family:Georgia, serif;<br />text-transform:uppercase;<br />font-size:large;<br />}<br />HEADLINE<br />
    33. 33. CSS Syntax / class selectors<br />What if you wanted some h1 tags to be blue and some red? Expand the existing tag set with the use of classes: <br />Classes use the dot notation as below:<br /> h1.breakingnews { color: #ff0000; }<br />So, used whenever there is an h1 tag with a class of “breakingnews”.<br />
    34. 34. HTML <br />index.html<br /><html><br /><body><br /><link rel=“stylesheet” … ><br /> <h1>Headline</h1><br /> <h1 class=“breakingnews”><br />This Just In!</h1><br /></body><br /></html><br />
    35. 35. HTML CSS<br />style.css<br />index.html<br /><html><br /><body><br /><link rel=“stylesheet” … ><br /> <h1>Headline</h1><br /> <h1 class=“breakingnews”><br />This Just In!</h1><br /></body><br /></html><br />h1 { color:#003366;<br />font-family:Georgia, serif;<br />text-transform:uppercase;<br />font-size:large;<br /> }<br />h1.breakingnews { color:#ff0000;<br />font-family:Georgia, serif;<br />text-transform:none;<br />font-size:medium;<br /> }<br />
    36. 36. HTML CSS<br />style.css<br />index.html<br /><html><br /><body><br /><link rel=“stylesheet” … ><br /> <h1>Headline</h1><br /> <h1 class=“breakingnews”><br />This Just In!</h1><br /></body><br /></html><br />h1 { color:#003366;<br />font-family:Georgia, serif;<br />text-transform:uppercase;<br />font-size:large;<br />}<br />h1.breakingnews { color:#ff0000;<br />font-family:Georgia, serif;<br />text-transform:none;<br />font-size:medium;<br /> }<br />HEADLINE<br />This Just In!<br />
    37. 37. CSS Syntax / descendant selectors<br />What if you wanted some h1 tags to be blue, but only when they are inside of the <header> tag?: <br />Descendant selectors look like this:<br /> header h1 { color: #003366; } or<br />header .breakingnews{ color: #ff0000;}<br />The h1 will only style blue when it’s nested inside the header tag:<br /><header><h1>WordCamp</h1></header><br />
    38. 38. CSS Syntax / adjacent sibling selectors<br />What if you wanted some p tags to be bold, but only when they directly follow an h2? Use the + symbol:<br /> h2+p { font-weight:bold; } <br />The p will only style bold when directly follows the h2:<br /><h2>Welcome to WordCamp!</h2><br /><p>WordCamp (This will be bold)</p><br /><p>OtherCamp (This will not be bold)</p><br />
    39. 39. Lots more<br />General sibling selectors E~F { declarations; }<br />Child selectors E>F {declarations; }<br />Pseudo-classes li:hover, li:first-child, :nth-of-type<br />Pseudo-elements p:first-line, ::selection<br />
    40. 40. Shorthand<br />header {<br />border-width:1px;<br />border-style: dashed;<br />border-color: #ff0000;<br />}<br />
    41. 41. Shorthand<br />header {<br />border:1px dashed #ff0000;<br />}<br />
    42. 42. Shorthand<br />header {<br />border-right:1px dashed #ff0000;<br />}<br />
    43. 43. Shorthand<br />header {<br />border-bottom:1px dashed #ff0000;<br />}<br />
    44. 44. Hexadecimal colors<br />In mathematics and computer science, hexadecimal (also base 16, or hex) is a positional numeral system with a radix, or base, of 16.<br />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.<br />
    45. 45. Hexadecimal colors<br />A few to remember (the grayscales):<br />#000000; /* black */<br />#333333;<br />#666666;<br />#999999;<br />#cccccc;<br />#ffffff; /* white */<br />(When each pairing is identical, it’s a gray).<br />
    46. 46. When the HEX RGB pairings are identical, it’s a gray. <br />
    47. 47. 147 color names are defined in the HTML and CSS color specification (17 standard colors plus 130 more). <br />
    48. 48. Layout with CSS<br />
    49. 49. Layout with CSS<br />
    50. 50. <header><br />Layout with CSS<br /><div><br /><div><br /><footer><br />
    51. 51. <header><br />Layout with CSS<br />What’s a div tag?<br />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.<br /><div><br /><div><br /><footer><br />
    52. 52. <header><br />Layout with CSS<br />What’s a div tag?<br />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.<br />You may have many divs on a page, so you’ll need to give them a name, like this:<br /> <div class=“promobox”><br /><div><br /><div><br /><footer><br />
    53. 53. <header><br />Layout with CSS<br />What’s a div tag?<br />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.<br />You may have many divs on a page, so you’ll need to give them a name, like this:<br /> <div class=“promobox”><br />Then, the CSS can talk directly to that div(s) for styling.<br /><div><br /><div><br /><footer><br />
    54. 54. <header><br />Layout with CSS<br />What’s a div tag?<br />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.<br />You may have many divs on a page, so you’ll need to give them a name, like this:<br /> <div class=“promobox”><br />Then, the CSS can talk directly to that div(s) for styling.<br /> .promobox {<br /> width:200px;<br /> }<br /><div><br /><div><br /><footer><br />
    55. 55. <header><br />Layout with CSS<br /><div id=“main_nav”><br /><div><br /><footer><br />
    56. 56. <header><br />Layout with CSS<br />Wait, what’s an ID?<br />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.<br />Assigning an ID is very similar:<br /> <div id=“main_nav”><br />Then, you can have the CSS talk directly to that div for styling.<br /> #main_nav {<br /> width:200px;<br /> /* notice the # notation */<br /> }<br /><div id=“main_nav”><br /><div><br /><footer><br />
    57. 57. <header><br />Layout with CSS<br />Wait, what’s an ID?<br />In other words, an ID is a unique identifier.<br />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.<br /><div id=“main_nav”><br /><div><br /><footer><br />
    58. 58. <header><br />Layout with CSS<br />Wait, what’s an ID?<br />In other words, an ID is a unique identifier.<br />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.<br />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.<br /><div id=“main_nav”><br /><div><br /><footer><br />
    59. 59. <header><br />Layout with CSS<br /><div id=“main_nav”><br /> <nav><br /> <ul><br /> <li>Link</li><br /> </ul><br /></nav><br /></div><br /><div><br /><footer><br />
    60. 60. <header><br />Layout with CSS<br /><div id=“main_nav”><br /> <nav><br /> <ul><br /> <li>Link</li><br /> </ul><br /></nav><br /></div><br /><div id=“content”><br /><footer><br />
    61. 61. <header><br />Layout with CSS<br /><div id=“main_nav”><br /> <nav><br /> <ul><br /> <li>Link</li><br /> </ul><br /></nav><br /></div><br /><div id=“content”><br /><section><br /> <h1>About Us</h1><br /> <p>We are a full-service blah blah blah.</p><br /></section><br /></div><br /><footer><br />
    62. 62. <header id=“pageheader”><br />Layout with CSS<br /><div id=“main_nav”><br /> <nav><br /> <ul><br /> <li>Link</li><br /> </ul><br /></nav><br /></div><br /><div id=“content”><br /><section><br /> <h1>About Us</h1><br /> <p>We are a full-service blah blah blah.</p><br /></section><br /></div><br /><footer><br />
    63. 63. <header id=“pageheader”><br />Layout with CSS<br /><div id=“main_nav”><br /> <nav><br /> <ul><br /> <li>Link</li><br /> </ul><br /></nav><br /></div><br /><div id=“content”><br /><section><br /> <h1>About Us</h1><br /> <p>We are a full-service blah blah blah.</p><br /></section><br /></div><br /><footer id=“pagefooter”><br />
    64. 64. <header id=“pageheader”><br />Layout with CSS<br />The CSS<br />#pageheader { margin-bottom:10px;}<br /><div id=“main_nav”><br /> <nav><br /> <ul><br /> <li>Link</li><br /> </ul><br /></nav><br /></div><br /><div id=“content”><br /><section><br /> <h1>About Us</h1><br /> <p>We are a full-service blah blah blah.</p><br /></section><br /></div><br /><footer id=“pagefooter”><br />
    65. 65. <header id=“pageheader”><br />Layout with CSS<br />The CSS<br />#pageheader { margin-bottom:10px;}<br />#main_nav { float:left;<br />width:200px; }<br /><div id=“main_nav”><br /> <nav><br /> <ul><br /> <li>Link</li><br /> </ul><br /></nav><br /></div><br /><div id=“content”><br /><section><br /> <h1>About Us</h1><br /> <p>We are a full-service blah blah blah.</p><br /></section><br /></div><br /><footer id=“pagefooter”><br />
    66. 66. <header id=“pageheader”><br />Layout with CSS<br />The CSS<br />#pageheader { margin-bottom:10px;}<br />#main_nav { float:left;<br />width:200px; }<br />#content {margin-left: 210px;}<br /><div id=“main_nav”><br /> <nav><br /> <ul><br /> <li>Link</li><br /> </ul><br /></nav><br /></div><br /><div id=“content”><br /><section><br /> <h1>About Us</h1><br /> <p>We are a full-service blah blah blah.</p><br /></section><br /></div><br /><footer id=“pagefooter”><br />
    67. 67. <header id=“pageheader”><br />Layout with CSS<br />The CSS<br />#pageheader { margin-bottom:10px;}<br />#main_nav { float:left;<br />width:200px; }<br />#content {margin-left: 210px;}<br />#pagefooter {clear: both;<br />margin-top:10px;}<br /><div id=“main_nav”><br /> <nav><br /> <ul><br /> <li>Link</li><br /> </ul><br /></nav><br /></div><br /><div id=“content”><br /><section><br /> <h1>About Us</h1><br /> <p>We are a full-service blah blah blah.</p><br /></section><br /></div><br /><footer id=“pagefooter”><br />
    68. 68. A COOL, GREEN BOX WITH ROUNDED EDGES AND DROP SHADOW.<br />HTML<br /><body><br /><header id=“pageheader”><br /> <h1>A cool, green box with some rounded edges and drop shadow.</h1><br /> </header><br /></body><br />CSS<br />#pageheader {<br /> margin:30px;<br />padding:35px;<br />color: #fff;<br /> background: #aac46b;<br /> border:1px solid #91ab53;<br /> text-transform: uppercase;<br />box-shadow: 0px 6px 6px #666;<br /> text-shadow: 0 0 2px #999;<br /> border-radius: 14px;<br />-moz-border-radius: 14px;<br />/* other vendor prefixes here */<br />}<br />
    69. 69. A COOL, GREEN BOX WITH ROUNDED EDGES AND DROP SHADOW.<br />HTML<br /><body><br /> <header><br /> <h1>A cool, green box with some rounded edges and drop shadow.</h1><br /> </header><br /></body><br />CSS<br />header h1 {<br /> margin:30px;<br />padding:35px;<br />color: #fff;<br /> background: #aac46b;<br /> border:1px solid #91ab53;<br /> text-transform: uppercase;<br />box-shadow: 0px 6px 6px #666;<br /> text-shadow: 0 0 2px #999;<br /> border-radius: 14px;<br />-moz-border-radius: 14px;<br />/* other vendor prefixes here */<br />}<br />
    70. 70. A COOL, GREEN BOX WITH ROUNDED EDGES AND DROP SHADOW.<br />HTML<br /><body><br /> <header><br /> <h1>A cool, green box with some rounded edges and drop shadow.</h1><br /> </header><br /></body><br />CSS<br />body+header {<br /> margin:30px;<br />padding:35px;<br />color: #fff;<br /> background: #aac46b;<br /> border:1px solid #91ab53;<br /> text-transform: uppercase;<br />box-shadow: 0px 6px 6px #666;<br /> text-shadow: 0 0 2px #999;<br /> border-radius: 14px;<br />-moz-border-radius: 14px;<br />/* other vendor prefixes here */<br />}<br />
    71. 71.
    72. 72. HTML<br /><body><br /> <aside><br /> <figure><br /> <imgsrc=“images/agassi.jpg”><br /> </figure><br /></aside><br /></body><br />CSS<br />body {<br />background:#999999;<br />}<br />figure img {<br /> border:10px solid #ffffff;<br /> box-shadow: 3px 3px 3px #333333;<br />}<br />
    73. 73.
    74. 74.
    75. 75.
    76. 76.
    77. 77.
    78. 78.
    79. 79.
    80. 80.
    81. 81.
    82. 82.
    83. 83.
    84. 84.
    85. 85. Thanks to Christopher Spencer (ca. 1987) for organizing WordCamp.<br />
    86. 86. Mullet Resources<br />Google: “mullet”<br />
    87. 87.
    88. 88. </mullet><br />
    89. 89. Maybe mock the ‘90s goatee next year…<br />

    ×