An Intro to HTML & CSS

AN INTRO TO HTML & CSS Shay Howe November 2011
www.shayhowe.com – @shayhowe

An Intro to HTML & CSS SHAY HOWE www.shayhowe.com –
@shayhowe @shayhowe

An Intro to HTML & CSS WHAT IS DESIGN? @shayhowe

An Intro to HTML & CSS 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

An Intro to HTML & CSS WHAT IS HTML &
CSS? @shayhowe

An Intro to HTML & CSS HTML Markup language to
give content structure and meaning. @shayhowe CSS Presentation language to give content style and appearance.

An Intro to HTML & CSS HTML Content. @shayhowe CSS
Style.

An Intro to HTML & CSS HTML Hyper Text Markup
Language @shayhowe

An Intro to HTML & CSS ELEMENTS, ATTRIBUTES, & TAGS
Elements body, h1, p, div, strong, em, span Elements are HTML designators that define certain objects. Attributes href="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

BLOCK & INLINE ELEMENTS Block 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 header footer article section aside div h1...h6 p table form ul, ol, li dl, dt, dd span a strong em img br input abbr

An Intro to HTML & CSS 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

An Intro to HTML & CSS QUIZ @shayhowe

An Intro to HTML & CSS 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

An Intro to HTML & CSS SAMPLE NAVIGATION CSS ul#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

An Intro to HTML & CSS 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

An Intro to HTML & CSS ELEMENTS <ul id="social">

An Intro to HTML & CSS ATTRIBUTES <ul id="social">

An Intro to HTML & CSS 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

An Intro to HTML & CSS 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

An Intro to HTML & CSS CSS Cascading Style Sheets
@shayhowe

An Intro to HTML & CSS SELECTOR, PROPERTY, VALUE Selector
h1 { font: bold 16px/24px Arial, sans-‐serif; } A selector determines which element to apply style to. Property h1 { font: bold 16px/24px Arial, sans-‐serif; } A property is the style that will be applied to the element. Value h1 { font: bold 16px/24px Arial, sans-‐serif; } A value is the determines the behavior of a property. @shayhowe

An Intro to HTML & CSS RULE SETS & DECLARATIONS
Rule Set h1 { font: bold 16px/24px Arial, sans-‐serif; } A rule set includes a selector and all corresponding declarations. Declarations h1 { font: bold 16px/24px Arial, sans-‐serif; } Declarations are individual lines of CSS within a rule set. @shayhowe

An Intro to HTML & CSS ELEMENT, ID, & CLASS
SELECTORS Element Selector h1 { 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

An Intro to HTML & CSS QUIZ @shayhowe

An Intro to HTML & CSS QUIZ ul#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

An Intro to HTML & CSS SELECTORS ul#social {

An Intro to HTML & CSS PROPERTIES ul#social {

An Intro to HTML & CSS VALUES ul#social {

An Intro to HTML & CSS THE BOX MODEL @shayhowe

An Intro to HTML & CSS THE BOX MODEL div
{ 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

An Intro to HTML & CSS FLOATS img {
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

An Intro to HTML & CSS FLOATS @shayhowe

An Intro to HTML & CSS 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

An Intro to HTML & CSS FLOATS & CLEARS @shayhowe

An Intro to HTML & CSS QUESTIONS? Thank you! @shayhowe

An Intro to HTML & CSS

An Intro to HTML & CSS

More Decks by Shay Howe

Other Decks in Design

Featured

Transcript