Designing With CSS

DESIGNING WITH

Daniel Reedydaniel.reedy@housing.siu.edu

CASCADING STYLE

FLEXIBILITY

FLEXIBILITYFLEXIBILITY

SEPARATION OF COMPONENTSSEPARATION OF COMPONENTS

index.html

screen.css

print.css

CONSISTANCY

CONSISTANCYCONSISTANCY

BANDWIDTHBANDWIDTH

PAGE REFORMATTINGPAGE REFORMATTING

GETTING STARTED

GETTING STARTEDGETTING STARTED

EVEN THE PLAYING FIELDEVEN THE PLAYING FIELD

RESET STYLE SHEETRESET STYLE SHEET

RESET STYLE SHEET

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}/* remember to define focus styles! */:focus { outline: 0;}body {

line-height: 1; color: black; background: white;}ol, ul { list-style: none;}/* tables still need 'cellspacing="0"' in the markup */table { border-collapse: separate; border-spacing: 0;}caption, th, td { text-align: left; font-weight: normal;}blockquote:before, blockquote:after,q:before, q:after { content: "";}blockquote, q { quotes: "" "";}

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

RESET STYLE SHEET

GREAT WEB TYPOGRAPHY

GREAT WEB TYPOGRAPHYGREAT WEB TYPOGRAPHY

STATIC IMAGESSTATIC IMAGES

SIFR 2.0SIFR 2.0

EMBEDDED OPEN TYPEEMBEDDED OPEN TYPE

@FONT-FACE@FONT-FACE

@FONT-FACE

/* In your CSS file (e.g. typography.css) */

@font-face { font-family: "MinyaNouvelle"; src: url('http://localhost/fonts/minya-nouvelle-bd.otf') format("opentype");}

h1, h2, h3, h4, h5 { font-family: "MinyaNouvelle", sans-serif }

@FONT-FACE

Daniel Reedydaniel.reedy@housing.siu.eduFont Available Plugin: http://code.google.com/p/jquery-

CÚFON & @FONT-

Font Available Plugin: http://code.google.com/p/jquery-

CÚFON & @FONT-

<script type="text/javascript"> $(document).ready(function() { if(!$.fontAvailable('MinyaNouvelle')) { Cufon.replace('h1', { fontFamily: “MinyaNouvelle” }); }});</script>

<script type="text/javascript"> Cufon.now(); </script>

CÚFON & @FONT-

FRESH IDEAS ON WEB

.WEBFONT

.WEBFONT.WEBFONT

TYPEKITTYPEKIT

KERNESTKERNEST

FONT DECKFONT DECK

LAYOUT

BOX MODEL

Element 1Element 2Element 3Element 4Element 5Element 6

Element 1

C O N T E N T

P A D D I N G

C O N T E N T

P A D D I N GB O R D E R

C O N T E N T

M A R G I N

C O N T E N T

M A R G I N

C O N T E N T

R I G H T

B O T T O M

L E F T

UNITS OF

PIXELS (PX)

PIXELS (PX)PIXELS (PX)

EM SPACE (EM)EM SPACE (EM)

PERCENT (%)PERCENT (%)

ESTABLISH A

/* In your type CSS file (e.g. typography.css) */

body { font-size: 62.5%; /* This establishes a 10px = 1em ratio */}

ESTABLISH A

h1 { font-size: 2.4em; } /* 24px */h2 { font-size: 1.8em; } /* 18px */h3 { font-size: 1.4em; } /* 14px */

ESTABLISH A

h1 { font-size: 2.4em; } /* 24px */h2 { font-size: 1.8em; } /* 18px */h3 { font-size: 1.4em; } /* 14px */

/* In your layout CSS File (e.g. screen.css) */#header { height: 3em; } /* 30px */

ESTABLISH A

WHICH ONE?

FLOATS

box 1 box 2

box 1 box 2<div id=”box1”> <p>box 1</p></div><div id=”box2”> <p>box 2</p></div>

/* In your layout CSS File (e.g. screen.css) */

#box1 { float: left; margin-right: 1em; width: 3em; }

box 1 box 2

CSS FRAMEWORKS

CSS FRAMEWORKSCSS FRAMEWORKS

SPEED UP DEVELOPMENTSPEED UP DEVELOPMENT

SIMPLIFY DESIGNSIMPLIFY DESIGN

EASILY BREAKABLEEASILY BREAKABLE

STRICT CONSTRAINTSSTRICT CONSTRAINTS

BLUEPRINT 960 GRID YAHOO

960 GRID

RESET, TYPOGRAPHY, &

PUTTING IT ALL TOGETHER

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> </head> <body> <div class="container_12"> <div class="grid_12">  </div> <div class="clear"> </div> </div> <div id="housing_header" class="container_12"> <div class="grid_12 alpha omega">  </div> <div class="prefix_8 grid_4 omega">  </div> <div class="clear"> </div> </div> <div id="page_content" class="container_12"> <div class="grid_4">  </div> <div class="prefix_1 grid_4">  </div> <div class="grid_3 omega">  </div> <div class="clear"> </div> </div>

THE STYLE SHEETS

reset 960 typography layout colour

THE STYLE SHEETS

screen print

THE STYLE SHEETS

screen print

If Internet Explorer

ie7 ie6

THE STYLE SHEETS

screen print

If Internet Explorer

ie7 ie6

/* colour.css */html { background: rgb(87,0,36); }a { color: rgb(14,117,138); }a:visted { color: rgb(110,5,101); }#siu_header, #siu_header a { color: rgb(132,128,111); }#mission { color: rgb(216,214,184); }#main_navigation, #main_navigation a, #footer_navigation, #footer_navigation a { color: rgb(255,255,255);}#columns, #columns a { color: rgb(87,0,36); }#copyright { color: rgb(255,255,255); }

/* typography.css */body { font-size:62.5%; } /* 1em = 10px */h1 { font-size:2.4em; } /* displayed at 24px */h2 { font-size:2.0em; } /* displayed at 20px */h3 { font-size:1.8em; } /* displayed at 18px */h4 { font-size:1.4em; } /* displayed at 14px */#page_content p { font-size:1.4em; line-height: 1.8em; margin-bottom: 1.8em;} /* displayed at 14px */#siu_header { font-size: 2.0em; text-align: center; letter-spacing: .5em; text-transform: uppercase; }#siu_header a { text-decoration: none; }#mission { font-size: 2.3em; letter-spacing: .04em; }#main_navigation, #footer_navigation { font-size: 1.5em; text-align: center; text-transform: uppercase;}#columns h2 { font-size: 1.8em; text-transform: uppercase; }#columns ul li { font-size: 1.4em; line-height: 1.8em;}#copyright { font-family: Helvetica, Verdana, Arial, sans-serif; font-size: .8em; letter-spacing: .1em; line-height: 1.6em;}.angelina { font-size: 1.8em; }

<div class="flyer"> <p> <a href="/contract/residence-halls/"> <img src="/images/housing_rocks.png" alt="Housing Rocks" /> </a> </p></div>

/* screen.css */.flyer { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg);}

WHAT’S NEW IN CSS3?

Q&A – CSS EVALUATION

THANK YOU!

ERIC MEYER RESET CSS: HTTP://MEYERWEB.COM/ERIC/THOUGHTS/2007/05/01/RESET-RELOADED/SCALABLE INMAN FLASH REPLACEMENT: HTTP://WWW.MIKEINDUSTRIES.COM/BLOG/SIFR/EMBEDDED OPEN TYPE (EOT) FONT TOOL: HTTP://WWW.MICROSOFT.COM/TYPOGRAPHY/WEFT.MSPXOVERVIEW OF @FONT-FACE: HTTPS://DEVELOPER.MOZILLA.ORG/INDEX.PHP?TITLE=EN/CSS/%40FONT-FACECÚFON: HTTP://WIKI.GITHUB.COM/SORCCU/CUFON/ABOUT.WEBFONT PROPOSAL HTTP://LISTS.W3.ORG/ARCHIVES/PUBLIC/WWW-FONT/2009JULSEP/0440.HTMLTYPE FOUNDRIES SUPPORTING .WEBFONT: HTTP://WWW.TYPOGRAPHER.ORG/2009/07/WEBFONT-PROPOSAL-GAINS-

Designing With CSS

Technology

Website Designing in CSS 3.0

Designing CSS Layouts for the Flexible Web - · PDF fileDesigning CSS Layouts for the Flexible Web July 18, 2009 The CSS Summit Zoe Mickley Gillenwater. A little about me • Author

Designing for Accessibility - WD4E...Designing for Accessibility INTRODUCTION 02.07 TO CSS Operable! • All functionality available from the keyboard!! • Users have control over

Getting started with css

Styling with CSS

Web Designing Basics HTML and CSS

HTML Utopia: Designing Without Tables Using CSS

Visual css-regression-testing-with-phantom css

Web Designing & Development-CSS Infotech India

HTML, CSS, and XML Tutorial 3 Designing a Web Page with CSS

with CSS Grid + CSS Variables · CSS Grid + CSS Variables. CSS Grid (CSS Grid Layout Module Level 1) Why not just use ﬂexbox? Intrinsic Web Design. Grid terminology. Grid display:

Formatting text with CSS

HTML and CSS Style - Website Designing Basics

Layout with CSS

Motion Design with CSS

Designing A Css Based Template

Tutorial 3 Designing a Web Page with CSS HTML, CSS, …ikewebdesign.weebly.com/uploads/1/3/5/6/13567261/tutorial_3.pdf · Tutorial 3 Designing a Web Page with CSS. ... Exploring the

Designing CSS Layouts for the Flexible Web

Bonus Chapter 2 Formatting with CSS · Bonus Chapter 2 Formatting with CSS In This Chapter Getting used to CSS Managing color with CSS Changing text fonts and styles Adding borders

Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design