GDI Seattle Intro to HTML and CSS - Class 3
Upcoming SlideShare
Loading in...5
×
 

GDI Seattle Intro to HTML and CSS - Class 3

on

  • 374 views

Instructor: MIgnonne Maxwell

Instructor: MIgnonne Maxwell

Statistics

Views

Total Views
374
Views on SlideShare
374
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

GDI Seattle Intro to HTML and CSS - Class 3 GDI Seattle Intro to HTML and CSS - Class 3 Presentation Transcript

  • BEGINNING HTML AND CSS HTML/CSS ~ Girl Develop It ~
  • CLASS 3
  • WHAT WE'LL LEARN IN THIS SECTION Parts of a web page The <div> element The box model Padding, margin and borders View slide
  • PARTS OF A WEB PAGE Nearly every web page is divided into four parts: header footer sidebar content area View slide
  • THE DIV ELEMENT Divs let us organize web content into relevant parts — the 4 main parts and smaller areas, as well. Example: <div id="header"> With divs, we group elements so they can be styled the same way. We give divs ids and classes so we can style them using CSS.
  • OTHER ELEMENTS ARE OFTEN NESTED INSIDE DIVS <div> <p>Content<p> <p>Content<p> </div> <div id="header"> <h1>Main Heading<h1> </div> <div class="sub-content"> <p>Some more content<p> </div>
  • CASE STUDY: You want the first 2 paragraphs of your webpage to be right-aligned, green & italic, but you don't want these styles to be applied to any other paragraphs:
  • THE HTML: <div class="special_styles"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> <p>Sed do eiusmod tempor incididunt ut labore et dolore.</p> </div> <p>Magna aliqua. Ut enim ad minim veniam.</p> <p>Quis nostrud exercitation ullamco.</p> THE CSS: .special_styles { text-align:right; color: green; font-style: italic; }
  • THE RESULT Lorem ipsum dolor sit amet, consectetur adipisicing elit Sed do eiusmod tempor incididunt ut labore et dolore. Magna aliqua. Ut enim ad minim veniam. Quis nostrud exercitation ullamco. .special_styles { text-align:right; color: green; font-style: italic; }
  • LET'S DEVELOP IT Organize your web page into 4 parts using <div>'s: header — footer — sidebar — content Give each new div an id with the name that corresponds to its part. hint: sidebars are a good place for lists. hint: for a footer, add a "copyright" with your name and the year to the bottom of your page.
  • BOX MODEL
  • PADDING: The space between the border and the content Makes the box "wider" (adds to the total width.)
  • PADDING To make the padding on all sides the same, use the "padding" property and one value padding: 15px; Or you can style the sides individually padding-top: 10px; padding-bottom: 20px; padding-left: 25px; padding-right: 8px;
  • PADDING SHORTHAND You can also use shorthand to style the sides in one declaration padding: 10px 5px 3px 5px; is the same as: padding-top: 10px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; The order is: top right bottom left
  • PADDING SHORTHAND If the top and bottom padding are the same, and the left and right are the same, you can use two values: padding: 30px 50px; is the same as: padding-top: 30px; padding-right: 50px; padding-bottom: 30px; padding-left: 50px; The order is: top/bottom right/left
  • BORDER: Between padding and margin. border-width — border-style — border-color
  • BORDERS border-width border-style border-color Example: border-width: 10px; border-style: dashed; border-color: #666666;
  • BORDER STYLE SHORTHAND You can specify each property separately, or all three together. EXAMPLE: A solid red border: border: 1px solid #ff0000;
  • BORDER STYLE SHORTHAND You can specify separate styles for the top, left, right or bottom border EXAMPLES: A thick dotted black top border: border-top: 4px dotted #000000; Two different border styles: border-top: 1px solid #ff0000; border-bottom: 4px dotted #000000;
  • MARGIN The transparent area around the box that separates it from other elements.
  • MARGINS Styled just like padding! margin: 15px; Or you can style the sides individually margin-top: 10px; margin-bottom: 20px; margin-left: 25px; margin-right: 8px;
  • MARGIN SHORTHAND Same as padding! margin: 10px 5px 3px 5px; is the same as: margin-top: 10px; margin-right: 5px; margin-bottom: 3px; margin-left: 5px; The order is: top right bottom left
  • MARGIN SHORTHAND Like padding, if the top and bottom margin are the same, and the left and right are the same, you can use two values: margin: 30px 50px; is the same as: margin-top: 30px; margin-right: 50px; margin-bottom: 30px; margin-left: 50px; The order is: top/bottom right/left
  • AUTO MARGIN If a margin is set to auto on a box that has width, it will take up as much space as possible. This will "center" the box: margin: auto; width: 300px; This will put the box on the right: margin-left: auto; margin-right: 5px; width: 300px;
  • WIDTH AND HEIGHT width: 600px; Sets the width of an element to 600px. height: 300px; Sets the height of an element to 300px. These only refer to the content area. Padding and border will add to the height and/or width.
  • LET'S TAKE A LOOK AT A DEMO! of padding, borders, margins, widths and heights.
  • QUESTIONS? ?