ID01 W2
Upcoming SlideShare
Loading in...5
×
 

ID01 W2

on

  • 766 views

 

Statistics

Views

Total Views
766
Views on SlideShare
261
Embed Views
505

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 505

http://www.mkontopoulos.com 375
http://www.ryandorazi.com 130

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

ID01 W2 ID01 W2 Presentation Transcript

  • Week 02Box Model, IDs, Classes, Divs
  • The Box Model padding<p>Lorem ipsum dolor sit amet, consecteturadipiscing elit. In ut lacus ac felis auctor egestas ac borderconsequat nisi. Donec dapibus congue sapien.Suspendisse vulputate egestas eros ac egestas.Suspendisse vitae justo nunc, et consectetur mi. marginAenean consequat, leo in malesuada faucibus,eros lorem malesuada ligula, et sagittis velit loremnec nisi. Curabitur non enim nibh, posuereinterdum dolor. Cras neque tortor, ornare eucondimentum non, pellentesque nec risus. Inconvallis mi at sapien consequat elementumblandit nulla porttitor. </p> p { padding: 15px; border: 4px solid #000; margin: 20px; }
  • The Box Model<p>Lorem ipsum dolor sit amet, consecteturadipiscing elit. In ut lacus ac felis auctor egestas acconsequat nisi. Donec dapibus congue sapien.Suspendisse vulputate egestas eros ac egestas.Suspendisse vitae justo nunc, et consectetur mi.Aenean consequat, leo in malesuada faucibus,eros lorem malesuada ligula, et sagittis velit loremnec nisi. Curabitur non enim nibh, posuereinterdum dolor. Cras neque tortor, ornare eucondimentum non, pellentesque nec risus. Inconvallis mi at sapien consequat elementumblandit nulla porttitor. </p> p { padding-left: 10px; padding-right: 50px; border: 4px solid black; border-top: 5px solid green; margin-top: 10px; margin-bottom: 10px; margin-left: 3px; margin-right: 3px }
  • The Box Model <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut lacus ac felis auctor egestas ac consequat nisi. Donec dapibus congue sapien. Suspendisse vulputate egestas eros ac egestas. Suspendisse vitae justo nunc, et consectetur mi. Aenean consequat, leo in malesuada faucibus, eros lorem malesuada ligula, et sagittis velit lorem nec nisi. Curabitur non enim nibh, posuere interdum dolor. Cras neque tortor, ornare eu condimentum non, pellentesque nec risus. In convallis mi at sapien consequat elementum blandit nulla porttitor. </p> top right bottom leftp { margin-top: 5px; p { margin-right: 50px; margin: 5px 50px 0px 5px; margin-bottom: 0px; OR } margin-left: 5px;}
  • The Box Model Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut lacus ac felis auctor egestas ac consequat nisi. Donec dapibus congue sapien. Suspendisse vulputate egestas eros ac egestas. Suspendisse vitae justo nunc, et consectetur mi. Aenean consequat, leo in malesuada faucibus, eros lorem malesuada ligula, et sagittis velit lorem nec nisi. Curabitur non enim nibh, posuere interdum dolor. Cras neque tortor, ornare eu condimentum non, pellentesque nec risus. In convallis mi at sapien consequat elementum blandit nulla porttitor. border-width border-style border-colorp { p { border-style: dashed; border: 5px dashed blue; border-width: 5px; OR } border-color: blue;}
  • CENTERING DIVS USING MARGINS Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut lacus ac felis auctor egestas ac consequat nisi. Donec dapibus congue sapien. Suspendisse vulputate egestas eros ac egestas. Suspendisse vitae justo nunc, et consectetur mi. margin Aenean consequat, leo in malesuada faucibus, eros lorem malesuada ligula, et sagittis velit lorem nec nisi. Curabitur non enim nibh, posuere interdum dolor. Cras neque tortor, ornare eu condimentum non, pellentesque nec risus. In convallis mi at sapien consequat elementum blandit nulla porttitor. #box {<div id="box"> padding: 15px; <p> border: 4px solid #000; Lorem ipsum dolor ... width: 250px; </p> height: 250px;</div> margin: 10px auto 10px auto; }
  • IDs - FOR INDIVIDUAL ELEMENTS HTML CSS<p id="apple">Apples.<p> #apple { font-size; 12px;<h1 id="orange">Hello!</h1> } #orange { font-size: 20px; }
  • CLASSES - FOR GROUPS OF ELEMENTS HTML CSS<p class="animals">Monkeys.<p> .animals { font-size; 12px;<p class="animals">Lions.<p> }<p class="animals">Eagles.<p> .plants { font-size: 20px;<p class="plants">Pine-Tree.<p> }
  • IDs & Classes HTML CSS Browser<body> body { background-color: This sentence is the introduction <p id="intro"> grey; to this paragraph. This } sentence is the Lorem ipsum dolor sit amet, consectetur introduction to this p { adipiscing elit. Curabitur eu ante odio. paragraphs. font-size: 12px; </p> color: blue; Lorem ipsum dolor sit amet, consectetur text-align: center; adipiscing elit. <p class="main"> } Lorem ipsum dolor sit The End. amet, consectetur #intro { adipiscing elit. font-size: 14px; Curabitur eu ante odio. color: red; </p> } .main { <p class="main"> font-size: 10px; Lorem ipsum dolor sit color: black; amet, consectetur } adipiscing elit. </p> <p>The End.</p></body>
  • IDs & Classes HTML CSS Browser<body> body { background-color: This sentence is the introduction <p id="intro"> grey; to this paragraph. This } sentence is the Lorem ipsum dolor sit amet, consectetur introduction to this p { adipiscing elit. Curabitur eu ante odio. paragraphs. font-size: 12px; </p> color: blue; Lorem ipsum dolor sit amet, consectetur text-align: center; adipiscing elit. <p class="main"> } Lorem ipsum dolor sit The End. amet, consectetur #intro { adipiscing elit. font-size: 14px; Curabitur eu ante odio. color: red; </p> } .main { <p class="main"> font-size: 10px; Lorem ipsum dolor sit color: black; amet, consectetur } adipiscing elit. </p> <p>The End.</p></body>
  • IDs & Classes HTML CSS Browser<body> body { background-color: This sentence is the introduction <p id="intro"> grey; to this paragraph. This } sentence is the Lorem ipsum dolor sit amet, consectetur introduction to this p { adipiscing elit. Curabitur eu ante odio. paragraphs. font-size: 12px; </p> color: blue; Lorem ipsum dolor sit amet, consectetur text-align: center; adipiscing elit. <p class="main"> } Lorem ipsum dolor sit The End. amet, consectetur #intro { adipiscing elit. font-size: 14px; Curabitur eu ante odio. color: red; </p> } .main { <p class="main"> font-size: 10px; Lorem ipsum dolor sit color: black; amet, consectetur } adipiscing elit. </p> <p>The End.</p></body>
  • IDs & Classes HTML CSS Browser<body> body { background-color: This sentence is the introduction <p id="intro"> grey; to this paragraph. This } sentence is the Lorem ipsum dolor sit amet, consectetur introduction to this p { adipiscing elit. Curabitur eu ante odio. paragraphs. font-size: 12px; </p> color: blue; Lorem ipsum dolor sit amet, consectetur text-align: center; adipiscing elit. <p class="main"> } Lorem ipsum dolor sit The End. amet, consectetur #intro { adipiscing elit. font-size: 14px; Curabitur eu ante odio. color: red; </p> } .main { <p class="main"> font-size: 10px; Lorem ipsum dolor sit color: black; amet, consectetur } adipiscing elit. </p> <p>The End.</p></body>
  • IDs HTML CSS Browser<body> body { background-color: This sentence is the introduction <p id="intro"> grey; to this paragraph. This } sentence is the Lorem ipsum dolor sit amet, consectetur introduction to this p { adipiscing elit. Curabitur eu ante odio. paragraphs. font-size: 12px; </p> color: blue; Lorem ipsum dolor sit amet, consectetur text-align: center; adipiscing elit. <p class="main"> } Lorem ipsum dolor sit The End. amet, consectetur #intro { adipiscing elit. font-size: 14px; Curabitur eu ante odio. color: red; </p> } .main { <p class="main"> font-size: 10px; Lorem ipsum dolor sit color: black; amet, consectetur } adipiscing elit. </p> <p>The End.</p></body>
  • DIVs HTML Browser<body> <div id="box"> <h1>My First Div</h1> </div></body> CSS My First Divbody { background-color: #fff;}#box { height: 250px; weight: 250px; border: 10px solid #00FF00; background-color: blue; margin: 50px;}h1 { margin-top: 125px; text-align: center; font-size: 36px; color: #fff;}
  • DIVs HTML Browser<body> <div id="box"> <h1>My First Div</h1> </div></body> CSSbody { My First Div background-color: #fff;}#box { height: 250px; weight: 250px; border: 10px solid #00FF00; background-color: blue; margin: 50px;}h1 { margin-top: 125px; text-align: center; font-size: 36px; color: #fff;}