an intro to html & css

AN INTRO TO

HTML & CSS

Shay HoweNovember 2011www.shayhowe.com – @shayhowe

http://www.shayhowe.com


An Intro to HTML & CSS

SHAY HOWEwww.shayhowe.com – @shayhowe

@shayhowe




WHAT IS DESIGN?

@shayhowe


WHAT IS DESIGN?“In most people’s vocabularies, design is a veneer. It’s

interior decorating. It’s the fabric of the curtains, of the

sofa. But to me, nothing could be further from the

meaning of design. Design is the fundamental soul of a

human-made creation that ends up expressing itself in

successive outer layers of the product.”

– Steve Jobs

@shayhowe


WHAT IS HTML & CSS?

@shayhowe


HTMLMarkup language to give

content structure and meaning.

@shayhowe

CSSPresentation language to

give content style and appearance.


HTMLContent.

@shayhowe

CSSStyle.


HTMLHyper Text Markup Language

@shayhowe


ELEMENTS, ATTRIBUTES, & TAGSElementsbody, h1, p, div, strong, em, spanElements are HTML designators that define certain objects.

Attributeshref="http://shayhowe.com" title="Shay Howe"Attributes provide additional information to the given element.

Tags<div id="shayhowe" class="awesome"></div>Tags encompass elements and their corresponding attributes.

@shayhowe

http://shayhowe.com

http://shayhowe.com

BLOCK & INLINE ELEMENTSBlock

Block level elements begin on a new line within the document and occupy the full available width.

Inline

Inline level elements do not begin on a new line and fall into the flow of the document, maintaing their necessary width.

An Intro to HTML & CSS @shayhowe

headerfooterarticle

sectionasidediv

h1...h6ptable

formul, ol, lidl, dt, dd

spana

strongem

imgbr

inputabbr


DOCUMENT STRUCTURE<!DOCTYPE html><html> <head> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>This is a website.</p> </body></html>

@shayhowe


QUIZ

@shayhowe


SAMPLE NAVIGATION HTML<ul id="social"> <li class="tumblr"> <a href="http://blog.codeacademy.org"> Code Academy Tumblr Blog </a> </li> <li class="mail"> <a href="mailto:[email protected]"> Email Code Academy </a> </li> <li class="twitter"> <a href="http://twitter.com/#!/codeacademy"> Code Academy Twitter </a> </li> ...</ul>

@shayhowe

http://blog.codeacademy.org


mailto:[email protected]


http://twitter.com/#!/codeacademy'



SAMPLE NAVIGATION CSSul#social { list-‐style: none; }

ul#social li { float: left; margin: 12px 0 0 0; padding: 0 3px; }

ul#social li a { background: url("icons.png") 0 0 no-‐repeat; display: block; height: 17px; text-‐indent: -‐9999px; width: 16px; }

ul#social li.tumblr a { background-‐position: 0 -‐64px; }

ul#social li.mail a { background-‐position: 0 -‐81px; }

ul#social li.twitter a { background-‐position: 0 -‐98px; }

@shayhowe


TAGS<ul id="social"> <li class="tumblr"> <a href="http://blog.codeacademy.org"> Code Academy Tumblr Blog </a> </li> <li class="mail"> <a href="mailto:[email protected]"> Email Code Academy </a> </li> <li class="twitter"> <a href="http://twitter.com/#!/codeacademy"> Code Academy Twitter </a> </li> ...</ul>

@shayhowe








ELEMENTS<ul id="social"> <li class="tumblr"> <a href="http://blog.codeacademy.org"> Code Academy Tumblr Blog </a> </li> <li class="mail"> <a href="mailto:[email protected]"> Email Code Academy </a> </li> <li class="twitter"> <a href="http://twitter.com/#!/codeacademy"> Code Academy Twitter </a> </li> ...</ul>

@shayhowe








ATTRIBUTES<ul id="social"> <li class="tumblr"> <a href="http://blog.codeacademy.org"> Code Academy Tumblr Blog </a> </li> <li class="mail"> <a href="mailto:[email protected]"> Email Code Academy </a> </li> <li class="twitter"> <a href="http://twitter.com/#!/codeacademy"> Code Academy Twitter </a> </li> ...</ul>

@shayhowe








ID & CLASS<ul id="social"> <li class="tumblr"> <a href="http://blog.codeacademy.org"> Code Academy Tumblr Blog </a> </li> <li class="mail"> <a href="mailto:[email protected]"> Email Code Academy </a> </li> <li class="twitter"> <a href="http://twitter.com/#!/codeacademy"> Code Academy Twitter </a> </li> ...</ul>

@shayhowe








REFERENCING A CSS FILE<!DOCTYPE html><html> <head> <title>Hello World</title> <link rel="stylesheet" href="file.css"> </head> <body> <h1>Hello World</h1> <p>This is a website.</p> </body></html>

@shayhowe


CSSCascading Style Sheets

@shayhowe


SELECTOR, PROPERTY, VALUESelectorh1 { font: bold 16px/24px Arial, sans-‐serif; }A selector determines which element to apply style to.

Propertyh1 { font: bold 16px/24px Arial, sans-‐serif; }A property is the style that will be applied to the element.

Valueh1 { font: bold 16px/24px Arial, sans-‐serif; }A value is the determines the behavior of a property.

@shayhowe


RULE SETS & DECLARATIONSRule Seth1 { font: bold 16px/24px Arial, sans-‐serif; }A rule set includes a selector and all corresponding declarations.

Declarationsh1 { font: bold 16px/24px Arial, sans-‐serif; }Declarations are individual lines of CSS within a rule set.

@shayhowe


ELEMENT, ID, & CLASS SELECTORSElement Selectorh1 { font: bold 16px/24px Arial, sans-‐serif; }An element selector targets and element by its name.

ID Selector#logo { background: url("logo.png") 0 0 no-‐repeat; }An ID selector targets and element by its ID. ID’s are to be reserved to one a page.

Class Selector.column { width: 200px; }A class selector targets and element by its class. Classes may appear multiple times within a page.

@shayhowe


QUIZ

@shayhowe


QUIZul#social { list-‐style: none; }






@shayhowe


SELECTORSul#social { list-‐style: none; }






@shayhowe


PROPERTIESul#social { list-‐style: none; }






@shayhowe


VALUESul#social { list-‐style: none; }






@shayhowe


THE BOX MODEL

@shayhowe


THE BOX MODELdiv { border: 4px solid #000; height: 300px; margin: 20px; padding: 20px; width: 300px;}

Breakdown

Total Width = Width + (Margin x 2) + (Border x 2) + (Padding x 2)388 Pixels = 300 + (20 x 2) + (4 x 2) + (20 x 2)

Total Height = Height + (Margin x 2) + (Border x 2) + (Padding x 2)388 Pixels = 300 + (20 x 2) + (4 x 2) + (20 x 2)

@shayhowe


FLOATSimg { border: 1px solid #ccc; float: right margin: 10px 0 10px 20px; padding: 4px;}

<p>Ut wisi enin ad minim...</p>

<p><img src="chicago.jpg" alt="Chicago" />Lorem ipsum dolor sit amet...</p>

<p>Mimimum veniami ex ea con...</p>

@shayhowe


FLOATS

@shayhowe


FLOATS & CLEARS.col { float: left; margin: 0 10px; width: 400px;}.clear { clear: both;}

<p class="col">Lorem ipsum dolor sit amet...</p><p class="col">Con minimim venami quis...</p><div class="clear"></div><p>Quis nostrud ad nostris pro amat...</p>

@shayhowe


FLOATS & CLEARS

@shayhowe


QUESTIONS?Thank you!

@shayhowe