GDI Seattle Intro to HTML and CSS - Class 3
-
Upload
heather-rock -
Category
Technology
-
view
452 -
download
0
description
Transcript of GDI Seattle Intro to HTML and CSS - Class 3
![Page 1: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/1.jpg)
BEGINNING HTML AND CSSHTML/CSS ~ Girl Develop It ~
![Page 2: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/2.jpg)
CLASS 3
![Page 3: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/3.jpg)
WHAT WE'LL LEARN IN THIS SECTIONParts of a web pageThe <div> elementThe box modelPadding, margin and borders
![Page 4: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/4.jpg)
Nearly every web page isdivided into four parts:
headerfootersidebarcontent area
PARTS OF A WEB PAGE
![Page 5: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/5.jpg)
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.
![Page 6: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/6.jpg)
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>
![Page 7: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/7.jpg)
![Page 8: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/8.jpg)
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:
![Page 9: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/9.jpg)
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; }
![Page 10: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/10.jpg)
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; }
![Page 11: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/11.jpg)
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.
![Page 12: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/12.jpg)
BOX MODEL
![Page 13: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/13.jpg)
![Page 14: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/14.jpg)
PADDING:The space between the border and the contentMakes the box "wider" (adds to the total width.)
![Page 15: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/15.jpg)
![Page 16: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/16.jpg)
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;
![Page 17: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/17.jpg)
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
![Page 18: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/18.jpg)
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
![Page 19: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/19.jpg)
BORDER:Between padding and margin.border-width — border-style — border-color
![Page 20: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/20.jpg)
![Page 21: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/21.jpg)
BORDERSborder-widthborder-styleborder-color
Example:border-width: 10px;border-style: dashed;border-color: #666666;
![Page 22: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/22.jpg)
BORDER STYLE SHORTHANDYou can specify each property separately, or all threetogether.
EXAMPLE:A solid red border: border: 1px solid #ff0000;
![Page 23: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/23.jpg)
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;
![Page 24: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/24.jpg)
MARGINThe transparent area around the box that separates it
from other elements.
![Page 25: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/25.jpg)
![Page 26: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/26.jpg)
MARGINSStyled just like padding!margin: 15px;
Or you can style the sides individuallymargin-top: 10px;margin-bottom: 20px;margin-left: 25px;margin-right: 8px;
![Page 27: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/27.jpg)
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
![Page 28: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/28.jpg)
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
![Page 29: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/29.jpg)
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;
![Page 30: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/30.jpg)
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.
![Page 31: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/31.jpg)
LET'S TAKE A LOOK AT A DEMO!of padding, borders, margins, widths and heights.
![Page 32: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/32.jpg)
QUESTIONS?
?
![Page 33: GDI Seattle Intro to HTML and CSS - Class 3](https://reader033.fdocuments.us/reader033/viewer/2022052819/54577e66af795998788b510d/html5/thumbnails/33.jpg)