Download - Front End Foundations Level2
![Page 1: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/1.jpg)
![Page 2: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/2.jpg)
Save to Drive ButtonLEVEL 2CSS
![Page 3: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/3.jpg)
The early days of style on the webWhen the Web was brand new, there was no separation between HTML and the presentation of that HTML.
<H3 COLOR=RED><CENTER>Ingredients</CENTER></H3>
caps-lock!got!stuck!a!lot!back!then!too
HTML shouldn’t determine how something looks, it should just determine how content is structured.
HTML
![Page 4: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/4.jpg)
Separating content from presentationThankfully, the authors of the web realized that, and created a way to make rules for how tags should look and put them in a separate place from the HTML.
<h3>Ingredients</h3>HTML
CSS Make the h3 tag greenMake the h3 a bigger fontMake the h3 have a border at the bottom
![Page 5: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/5.jpg)
Cascading Style SheetsCSS is code that changes the appearance of HTML.
HTML with CSSHTML without CSS
![Page 6: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/6.jpg)
Writing your first selectorTags are selected by creating something called a selector.
<p>Magic Cake is one of the tastiest...</p>
the simplest selector is the type selector, and is just the tag name without <> brackets.
this!is!one!of!many!properties!that!can!be!applied!to!selectors
each!property!can!usually!be!set!to!one!of!a!few!different!values
HTML
CSSp {
text-decoration: underline;}
![Page 7: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/7.jpg)
The syntax of a selectorSelectors have a very specific syntax that needs to be followed or the CSS won’t work.
selector {! property: value;!}
an!open-curly-bracket!goes!after!the!selector!name
CSS
a!closed-curly-bracket!goes!after!the!property!list A!colon!goes!after!the!
property!name!and!before!the!value
A!semi-colon!goes!after!the!value!of!a!property
![Page 8: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/8.jpg)
Using multiple properties in one selectorA single selector can change multiple properties.
<p>Magic Cake is one of the tastiest...</p>
p {! text-decoration: underline;! color: red;!}
multiple!properties!applied!to!a!single!selector
HTML
CSS
![Page 9: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/9.jpg)
Selecting multiple tags with one selectorSelectors will select all matching tags on the page and apply properties.
<h3>Ingredients</h3>!<ul>! <li>2 eggs</li>! <li>1 pound of sugar</li>! <li>3 sticks of butter</li>!</ul>
li {! font-size: 24px;!}
bigger!font!size!now!for!all!<li>!tags
HTML
CSS
![Page 10: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/10.jpg)
Selecting only tags that are children of another tagA descendent selector can be used to select tags only if they are children of another tag.
<h3>Ingredients</h3>!<ul>! <li>2 eggs</li>! <li>1 pound of sugar</li>! <li>3 sticks of butter</li>!</ul>
ul li {! font-size: 24px;!}
select!only!li!tags!that!are!children!of!ul!tags
TIP: read the selector list from right-to-left. The left-most selector is the parent, with children following to the right.
only!the!<ul>!list!items!are!bigger!now
HTML
CSS
![Page 11: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/11.jpg)
Selecting tags based on actions and conditionsA pseudo-selector is a modifier that can be added to a selector to select a tag only when a certain condition has occurred.
a {! text-decoration: none;!}!!
!
a:hover {! text-decoration: underline;! color: darkred;!}
removes!the!underline!from!all!links!on!a!page
CSS
adds!an!underline!and!changes!the!color!of!all!links!on!a!page!ONLY!when!the!mouse!is!over!the!link
![Page 12: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/12.jpg)
Using pseudo-selectors to narrow selection criteriaThe :first-child pseudo-selector can be applied to narrow the amount of child tags selected
<h3>Directions</h3>!<ol>! <li>Mix eggs, sugar...</li>! <li>Spread into a...</li>! <li>Bake at 350...</li>!</ol>
ol li:first-child {! color: red;!}
select!only!the!first!li!tag
HTML
CSS
![Page 13: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/13.jpg)
Where do we put all this stuff?One place you can put CSS is in a style tag that’s a child of the head tag.
HTML
Your CSS selectors can be written in between the style opening and closing tags.
The!type!attribute!lets!the!browser!know!that!CSS!is!coming
<html>! <head>
</head>! <body>! ...! </body>!</html>
<style type="text/css">! a {! color: red;! }! </style>
![Page 14: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/14.jpg)
![Page 15: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/15.jpg)
Hexadecimal colorsA popular way to choose colors in CSS is to use hexadecimal numbers.
p {! color: red;! color: #FF0000;!!
color: black;! color: #000000;!!
color: yellow;! color: #FFFF00;!}
red
black
yellow
Here’s three keyword colors and their hexadecimal equivalents.
CSS
![Page 16: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/16.jpg)
Hexadecimal colorsEach hex color is actually three different parts.
#FFFF00first!two!numbers!set!the!amount!of!red
next!two!set!green
last!two!set!blue
![Page 17: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/17.jpg)
Hexadecimal colors - Minimum and MaximumColor values for red, green, and blue run from 0 - 255 decimal, or 00 - FF hexadecimal.
#FFFF00This color is maximum red, maximum green, and no blue.
That’s equivalent to the color Yellow
![Page 18: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/18.jpg)
Breaking down decimal numbers
(7 x 10)
76multiply the left by 10 multiply the right by 1
(6 x 1)
Add them together, and you get 76 decimal
Decimal numbers run from 0-9.
(decimal)
![Page 19: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/19.jpg)
Breaking down hexadecimal numbers
(7 x 16)
76multiply the left by 16 multiply the right by 1
(6 x 1)
Add them together, and you get 118 decimal
Since we’re so used to reading decimal numbers, sometimes it makes sense to convert hexadecimal to decimal.
(hexadecimal)
![Page 20: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/20.jpg)
Breaking down hexadecimal numbers
(F x 16)
FFmultiply the left by 16 multiply the right by 1
(F x 1)
Since we’re so used to reading decimal numbers, sometimes it makes sense to convert hexadecimal to decimal.
(hexadecimal)
???? How do we multiply by a letter?!$#?$!$?
![Page 21: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/21.jpg)
Understanding letter-based hexadecimal numbers
(15 x 16)multiply the left by 16 multiply the right by 1
(15 x 1)
Add them together, and you get 240 + 15, or 255 decimal
Hexadecimal numbers run from 0-15, but use letters for numbers above 9.
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15
FF
![Page 22: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/22.jpg)
Calculating the color from hexadecimal numbers
#7403ABRed: (7 x 16) + (4 x 1) = 116
Green: (0 x 16) + (3 x 1) = 3
Blue: (10 x 16) + (11 x 1) = 171
This color is some red, almost no green, and more blue than red.
That’s a color that looks Purple
![Page 23: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/23.jpg)
Calculating the color from hexadecimal numbers
#FF00B3Red: (15 x 16) + (15 x 1) = 255
Green: (0 x 16) + (0 x 1) = 0
Blue: (11 x 16) + (3 x 1) = 179
This color is lots of red, no green, and a little less blue than red.
That’s a color that looks Hot Pink
![Page 24: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/24.jpg)
Colors on the webBy using hexadecimal numbers to set colors, we get 256 possible combinations for each of the three color channels.
or…
256 x 256 x 256 = 16,777,216
![Page 25: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/25.jpg)
![Page 26: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/26.jpg)
Our page after changing some styles with CSS
QuestionsHow does our page know how much vertical and horizontal space to put between tags?
How can we control that spacing?
Why!this!much!space?
AnswerThe box model
![Page 27: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/27.jpg)
The BoxEvery tag shown in the body is contained in an invisible rectangle that we’ll call the box.
These two paragraph tags are shown as two boxes stacked on top of each other.
content!boxes
HTML<p>Magic Cake is one of...</p>
<p>We also need to stress...</p>
![Page 28: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/28.jpg)
The boxes on our pageHere are the boxes for the current version of the magic-cake.html page.
HTML
<p>Magic Cake is one of...<p>We also need to stress...
<body>! <h1>Recipe World</h1>! <ul>...</ul>! <h2>Magic Cake</h2>
<h3>Ingredients</h3>! <ul>...</ul>! <h3>Directions</h3>! <ol>...</ol>!</body>
![Page 29: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/29.jpg)
Block-level tags
The tags that contain this content are all block-level
the!container!here!is!<body>
h1 h2 h3p ul li
the!box!takes!up!the!entire!width!of!the!container
new!boxes!are!pushed!to!the!line!below
The content of block-level tags take up the entire width of the container.
![Page 30: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/30.jpg)
Inline-level tagsIf a tag is not block-level, it’s inline-level.
Some common inline-level tagsa img
labelinput
<p>...can view our <a href="legal.html">legal page</a> for more information</p>
inline-level!tags!don't!try!to!take!up!more!width!than!they!need
HTML
![Page 31: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/31.jpg)
Turning block-level into inline-levelSometimes, you’ll want block-level tags to be inline-level.Example: list items displaying horizontally instead of vertically
block-level list items inline-level list items
ul li {! display: inline;!}
the!default!display!is!block-levelCSS
![Page 32: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/32.jpg)
Block-level vertical spacingWhat we know
Back to our problem How does the browser know how much space goes between the boxes?
๏ Each tag’s content fits in an invisible box๏ Each block-level tag’s box takes up an entire line (horizontal space)
![Page 33: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/33.jpg)
The Box Model
1. Content areaThe content area contains your actual content (text, images, etc.)
Magic CakeThe content area will only take up as much vertical space as it needs to display the content inside.
The box model is a way to describe the borders and spacing in between the boxes of each tag.
๏ There are 4 parts of the box model:
![Page 34: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/34.jpg)
The Box Model
2. Padding
Padding is added to the top, right, bottom, or left of the content area.
PADDING
Magic Cake
๏ There are 4 parts of the box model:
![Page 35: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/35.jpg)
BORDER
The Box Model
3. BorderBorders are added around the top, right, bottom, or left of the padding
PADDING
Magic Cake
๏ There are 4 parts of the box model:
![Page 36: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/36.jpg)
MARGINBORDER
The Box Model
4. MarginMargins are added to the top, right, bottom, or left of the border.
PADDING
Magic Cake
๏ There are 4 parts of the box model:
![Page 37: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/37.jpg)
MARGIN
How to calculate the size of the box
BORDER
The full size of a box after these four properties have been set can be calculated like this:
PADDING
Magic Cake
+ content area width
= the full box width
use!top,!bottom,!and!height!to!calculate!full!box!height
+ margin-left+ border-left+ padding-left + padding-right
+ border-right+ margin-right
![Page 38: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/38.jpg)
Applying the box model propertiesApply padding to one side at a time…
PADDING
Magic Cake
h2 {! padding-top: 6px;! padding-right: 3px;! padding-bottom: 0;! padding-left: 0;!}
h2 {! padding: 6px 3px 0 0;!}
…or all at once in a clockwise order
top right bottom left
If we want to put some space above and to the right of some text, one option is to adjust the padding.
CSS
CSS
![Page 39: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/39.jpg)
BORDER
Applying the box model propertiesYou can apply borders all at once and not specify a side.
PADDING
Magic Cakeh2 {! border-width: 6px;! border-style: solid;! border-color: black;!}
h2 {! border: 6px solid black;!}
Creating borders has a shortcut version, too.
&��#� "#(�� ����!
CSS
CSS
![Page 40: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/40.jpg)
BORDER
Applying the box model propertiesYou can also just pick one side and just add a border there.
PADDING
Magic Cake
h2 {! border-bottom: 6px solid black;!} width style color
CSS
![Page 41: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/41.jpg)
BORDER
Applying the box model propertiesAdd margins the same way you add padding…
PADDING
Magic Cakeh2 {! margin-top: 6px;! margin-right: 0;! margin-bottom: 6px;! margin-left: 0;!}
h2 {! margin: 6px 0 6px 0;!}
…or use the same shortcut syntax as padding.
top right bottom left
MARGIN
CSS
CSS
![Page 42: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/42.jpg)
When should you use padding?Padding is used to control the size of a box without adjusting the size of the content inside the box.
h2 {! padding: 10px 0 10px 0;!}
CSSh2 {! padding: 0 0 0 0;!}
CSS
![Page 43: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/43.jpg)
When should you use margin?Margin is used to control the space between boxes.
h2 {! margin: 4px 0 4px 0;!}
CSSh2 {! margin: 20px 0 20px 0;!}
CSS
![Page 44: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/44.jpg)
Summary of our new box model knowledgeWhat we now know:
Why is there spacing here? We didn’t set any margins or padding?!@!#?#
๏ Each tag’s content fits in an invisible box๏ Each block-level tag’s box takes up an entire line
๏ Margin can be used to adjust spacing between containers๏ Padding can be used to adjust spacing within a container
![Page 45: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/45.jpg)
Browsers actually have a default stylesheet for when no custom styles are set.
Default box styles left on Default box styles turned off
Default browser styles
![Page 46: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/46.jpg)
Resetting default browser stylesAdd this to the very top of your CSS file to reset default styles.
Default box styles turned offhtml, body, h1, h2, h3, p, ol, ul, li, a {! padding: 0;! border: 0;! margin: 0;!}
include!each!tag!that's!in!your!HTML!for!that!page
Now, all of the default box properties are reset, and we need to set the box model properties ourselves.
CSS
![Page 47: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/47.jpg)
A Box Model process - Start with the bodyThe order that you apply the box model properties is personal preference, but here’s one approach:
Start from the highest parent elementThis is often <body>
body {! padding: 20px 20px 20px 20px;!}
this!padding!is!applied!to!every!side!of!the!body
This padding has the effect of pushing all of the children away from the edges of the <body>.
CSS
![Page 48: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/48.jpg)
A Box Model process - Next, look at headingsNext, focus on the heading tags<h1>
h1 {! margin: 10px 0 15px 0;!}
marginsUse margin to put vertical space between tags.
Before
After
no!marginsCSS
![Page 49: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/49.jpg)
h2 {! margin: 10px 0 20px 0;!}
Before
After
no!margins
margins
Next, focus on the heading tags<h2>
CSS
A Box Model process - Next, look at headings
![Page 50: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/50.jpg)
Before
After
no!margins
margins
Next, focus on the heading tags<h3>
CSSh3 { margin: 15px 0 15px 0;}
A Box Model process - Next, look at headings
![Page 51: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/51.jpg)
After your margins are in place, think about where borders might be necessary.
this!bottom!border!visually!separates!the!sections
CSSh3 { margin: 15px 0 15px 0;
} border-bottom: 1px solid #CCCCCC;
A Box Model process - borders
![Page 52: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/52.jpg)
Use padding to put more space between the content and border.
now!we've!got!a!little!more!space!between!the!content!and!border
Before
After
CSSh3 { margin: 15px 0 15px 0;
}
border-bottom: 1px solid #CCCCCC; padding-bottom: 3px;
A Box Model process - padding
![Page 53: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/53.jpg)
Padding is also used to adjust list and list item indentation.
Before After
A Box Model process - padding
![Page 54: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/54.jpg)
Padding is also used to adjust list and list item indentation.
After
left!padding
CSSul {! padding: 0 0 0 50px;!}
ol {! padding: 0 0 0 50px;!}
A Box Model process - padding
![Page 55: Front End Foundations Level2](https://reader034.vdocuments.us/reader034/viewer/2022051002/55cf92be550346f57b992fdf/html5/thumbnails/55.jpg)
Result after adjusting box model propertiesHere’s where our page stands right now: