ID01 W2

1,138 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
1,138
On SlideShare
0
From Embeds
0
Number of Embeds
578
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • ID01 W2

    1. 1. Week 02Box Model, IDs, Classes, Divs
    2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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;}

    ×