BEGINNING HTML AND CSSHTML/CSS ~ Girl Develop It ~

CLASS 3

WHAT WE'LL LEARN IN THIS SECTIONParts of a web pageThe <div> elementThe box modelPadding, margin and borders

Nearly every web page isdivided into four parts:

headerfootersidebarcontent area

PARTS OF A WEB PAGE

THE DIV ELEMENTDivs 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 thesame way.We give divs ids and classes so we can style themusing CSS.

OTHER ELEMENTS ARE OFTEN NESTEDINSIDE 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 beright-aligned, green & italic, but you don't want thesestyles 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 RESULTLorem 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 ITOrganize your web page into 4 parts using <div>'s:

header — footer — sidebar — content

Give each new div an id with the name that correspondsto its part.hint: sidebars are a good place for lists.hint: for a footer, add a "copyright" with your name and the yearto the bottom of your page.

BOX MODEL

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

PADDINGTo make the padding on all sides the same, use the"padding" property and one valuepadding: 15px;

Or you can style the sides individuallypadding-top: 10px;padding-bottom: 20px;padding-left: 25px;padding-right: 8px;

PADDING SHORTHANDYou can also use shorthand to style the sides in onedeclarationpadding: 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 SHORTHANDIf the top and bottom padding are the same, and the leftand 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

BORDERSborder-widthborder-styleborder-color

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

BORDER STYLE SHORTHANDYou can specify each property separately, or all threetogether.

EXAMPLE:A solid red border: border: 1px solid #ff0000;

BORDER STYLE SHORTHANDYou can specify separate styles for the top, left, right orbottom 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;

MARGINThe transparent area around the box that separates it

from other elements.

MARGINSStyled just like padding!margin: 15px;

Or you can style the sides individuallymargin-top: 10px;margin-bottom: 20px;margin-left: 25px;margin-right: 8px;

MARGIN SHORTHANDSame 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 SHORTHANDLike padding, if the top and bottom margin are the same,and the left and right are the same, you can use twovalues: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 MARGINIf a margin is set to auto on a box that has width, it willtake 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 HEIGHTwidth: 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 borderwill add to the height and/or width.

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

QUESTIONS?

?