Instructor: MIgnonne Maxwell

1. BEGINNING HTML AND CSS
HTML/CSS ~ Girl Develop It ~

2. CLASS 3

3. WHAT WE'LL LEARN IN THIS SECTION
Parts of a web page
The <div> element
The box model
Padding, margin and borders

4. PARTS OF A WEB PAGE
Nearly every web page is
divided into four parts:
header
footer
sidebar
content area

5. 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.

6. 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>

8. 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:

9. 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;
}

10. 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;
}

11. 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.

12. BOX MODEL

14. PADDING:
The space between the border and the content
Makes the box "wider" (adds to the total width.)

16. 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;

17. 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

18. 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

19. BORDER:
Between padding and margin.
border-width — border-style — border-color

21. BORDERS
border-width
border-style
border-color
Example:
border-width: 10px;
border-style: dashed;
border-color: #666666;

22. BORDER STYLE SHORTHAND
You can specify each property separately, or all three
together.
EXAMPLE:
A solid red border:
border: 1px solid #ff0000;

23. 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;

24. MARGIN
The transparent area around the box that separates it
from other elements.

26. 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;

27. 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

28. 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

29. 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;

30. 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.

31. LET'S TAKE A LOOK AT A DEMO!
of padding, borders, margins, widths and heights.

32. QUESTIONS?
?