Your SlideShare is downloading. ×
ID01 W2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

ID01 W2

868
views

Published on

Published in: Design, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
868
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Week 02Box Model, IDs, Classes, Divs
    • 2. 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; }
    • 3. 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 }
    • 4. 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;}
    • 5. 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;}
    • 6. 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; }
    • 7. IDs - FOR INDIVIDUAL ELEMENTS HTML CSS<p id="apple">Apples.<p> #apple { font-size; 12px;<h1 id="orange">Hello!</h1> } #orange { font-size: 20px; }
    • 8. 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> }
    • 9. 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>
    • 10. 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>
    • 11. 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>
    • 12. 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>
    • 13. 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>
    • 14. 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;}
    • 15. 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;}