front-end-foundations
TRANSCRIPT
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 2/203
In this course
! Making a web page with HTML and CSS
! Writing HTML text tags and CSS selectors
! Laying out a web page with multiple sections
! Working with images on a web page
! Customizing fonts and building HTML forms
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 3/203
Save to Drive ButtonLEVEL 1
HTML
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 4/203
A Quick Story of the Web
Tim Berners-Lee
In 1980, Tim worked for CERN, where he
proposed a better way for researchers
there to share and read documents.
C E R N
Y o u k n o w, t h e s a
m e p e o p l e
w h o r u n
t h e L a r g e
H a d r o n p a r t i c l e
a c c e l e r a t o
r.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 5/203
ENQUIRE
Hyperlink
So in 1984, he built something called ENQUIRE for CERN, wh
made up of Cards (Documents) and Hyperlinks (which connec
Documents).
Card
But Tim realized he
better.Car d
H y p
e r l i n k
Car d
H y p e r l i n k
Car d
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 6/203
The World Wide Web
With Robert Cailliau, Tim Berners-Lee wrote a proposal in 199
the creation of the World Wide Web.
When it started, the WWW was a way for scientists around the
to create and share their own webpages.
The World Wide Web
First Logo
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 7/203
The language of a webpage is HTML
HTML allows you to take a plain text document
created in any simple text editor…
.. and organize it into lists, link to other
webpages, include images, and more.
Learn By Doing
No setup. No hassle. Just Learning.
Code School teaches web technologies in the
comfort of your browser with video lessons,
coding challenges, and screencasts.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 8/203
But what does HTML mean?
HTML stands for H yper Text Markup Language
Hypertext
Overcoming the constraints of written text. Interactive.
Markup Language
A way to literally "Mark Up" a document to specify attribdi! erent font sizes, lists, links to other webpages, and im
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 9/203
HTML is written in text !les Just like most programming languages, we type a bunch of HT
file (aka. document) so we can send it around.
index.html
Name of the file File extension
(tells the browser the file contains HT
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 10/203
To display an HTML !le we need a browser Web Browsers are basically "HTML Readers.”
They understand how to read HTML and display it for you
Hopefully they all displa
the same thing (that's th
index.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 11/203
A guide to the slidesIn this course, we’re going to show you HTML, CSS
and what those look like in the browser.
What it looks like displayed in the br
HTML HTML code
CSS CSS code
Look for these symbols to help you figure out what you’re look
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 12/203
Building Recipe World
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 13/203
First things !rst: get some content!!Before you start making a web page, you’ve got to figure out w
content it is going to show.
We’ll start with a single recipe with these sections.
Page Title: Recipe World
Recipe Name: Magic Cake
Section Name: Ingredients
Section Name: Directions
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 14/203
Writing HTML
Recipe World
Most of the time, you’ll put your content in between HTML ta
have corresponding opening and closing versions.
<h1> </h1>
opening tag closinthe closing version has a
slash
before
the
tag
name
HTML
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 15/203
Use heading tags to de!ne your content hieraHigher heading numbers mean the content that appears
between the headings is less important than lower numbers.
More
important
Less important
Generally speaking:The page title/company name goes in the <h1>
The page main subject goes in the <h2>
<h3> through <h6> are used to organize other divisions of
HTML
<h2>Magic Cake</h2>
<h3>Ingredients</h3>
<h3>Directions</h3>
Recipe World<h1> </h1>
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 16/203
Use paragraph tags for non-heading text<p> is called the paragraph tag.
Add paragraph content (where
necessary) in between heading tags.
HTML
<p>Magic Cake is one of the tastiest...</p>
<h2>Magic Cake</h2>
Recipe World<h1> </h1>
<h3>Ingredients</h3>...
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 17/203
Use an unordered list to display a list of thing
This lingreddoesnin a s
unordered list
list items
<ul> stands for unordered list.
Each list item needs to also be put inside of an <li> tag.
<h3>Ingredients</h3>
<ul>
</ul>
<li>2 eggs</li>
<li>1 pound of sugar</li>
<li>3 sticks of butter</li>
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 18/203
Nesting tagsHTML tags don’t have to always just contain text, they can con
HTML tags.
when you indent, it's easy to see that 3 <li> tags are nested inside of a <ul> tag
parent
children
HTML A tag that tags is call
The tags c
parent tag
children.
<h3>Ingredients</h3>
<ul>
</ul>
<h3>Directions</h3>
...
<p>Magic Cake is one of...
<li>2 eggs</li>
<li>1 pound of sugar</li>
<li>3 sticks of butter</li>
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 19/203
Not indenting child tags makes HTML hard to
TH
rr
HTML<h1>Recipe World</h1>
<h2>Magic Cake</h2> <p>Magic Cake is one of...
<h3>Directions</h3>...
<ul>
</ul>
<li>2 eggs</li><li>1 pound of
sugar</li><li>3 sticks of butter</li>
<h3>Ingredients</h3>
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 20/203
Use an ordered list to show list items in a certaIf the content in your list does refer to steps to be followed, us
ordered list.
these
steps
need
followed in orderthe cake will be rordered list
list
items
<h3>Ingredients</h3><ul>...
</ol>
<li>Mix eggs, sugar, and butter i
a large bowl.</li>
<li>Spread into a non-stick dish<<li>Bake at 350 degrees for 1 hou
<li>Let sit at room temperature f
minutes</li>
<li>Eat and enjoy!</li>
<ol>
<h3>Directions</h3>
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 21/203
Wrapping everything in the body Any content that appears on a web page should be in between
tag.the parent of all visible content
<body> doesn’t display anything, but
helps keep the page content organized.
HTML
<ol>
<h3>Directions</h3>
</ol>...
<body>
</body>
<h1>Recipe World</h1>
<h2>Magic Cake</h2>
<p>Magic Cake is one of...</p>
<h3>Ingredients</h3>
<ul>...</ul>
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 22/203
Adding a head tagNon-visible stu! goes in the <head> tag.
we'll discuss what goes in the <head>
later
when
we
need
it
You’ll event
head tag to useful scrip
and JavaScr
HTML
<body>
</body>
<head>
</head>
<h1>Recipe World</h1>
...
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 23/203
Make everything a child of a single parent tag All of your HTML goes inside of the <html> tag.
Notice that we're indenting again so it's easy to see the parent/child relationship
HTML
<body>
</body>
<head></head>
<h1>Recipe World</h1>
...
<html>
</html>
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 24/203
Setting the DOCTYPE to htmlThe DOCTYPE sets the HTML version.
The browser can make better decisions about how to display
your page when it knows which version of HTML you’re using
HTML
<body>
</body>
<head>
</head>
<h1>Recipe World</h1>
...
<html>
</html>
<!DOCTYPE html>
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 25/203
The recipe page so far
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 26/203
ddi li k i i
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 27/203
Adding links to our recipe site
Wh h h URL i h B
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 28/203
What happens when you type a URL in the Br
Browser
1 Enter a URL into the browser’s address bar.
The URL con
protocol, se
that is being
server path to a fileprotocol
No page is loaded yet
Wh h h URL i h B
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 29/203
Browser ex
mag
2 A request is sent to the server, and the server
looks for the file that’s being requested.
No page is loaded yet
What happens when you type a URL in the Br
r e qu e s t
Wh t h h t URL i th B
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 30/203
Browser ex
mag
3The server returns the file to the browser and the
browser displays it.
What happens when you type a URL in the Br
r e qu e s t
r e s p o n s e
Wh t h h li k li k i th B
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 31/203
What happens when you click a link in the Bro
Browser
ex
mag
Clicking a link is like typing a URL in the address bar, only the
already pre-entered in HTML as part of link.
1 Click the link on the page, and a requestfor the file in that link is sent to the server.
current page containing the link
l
r e q u e s t
Wh t h h li k li k i th B
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 32/203
Browser
ex
mag
2 The server returns the file to the browser
and the browser replaces the current
page with the new file.
new page loaded
l
What happens when you click a link in the Bro
r e s p o n s e
How to make a link
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 33/203
How to make a link Anything that appears between the opening and closing a tags
is the part that will be a clickable link on the web page.
link texta is sho
<p>...can view our <a>legal page</a> for more...
How to make a link
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 34/203
How to make a linkThe href attribute sets what page should open when the link i
the value of the attribute
should
always
be
in
quotes
HTML attributeHTML attributes let you add ad
features or information to a tag
just the tag name and text conte
href="http://example.com/legal.html"<a >legal page
How to make a link
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 35/203
How to make a linkThe target attribute sets where the page you set in the href sh
when the link is clicked.
HTML attribute
_blank means open
page in a new tab/wi
_self means replace
currently open page
tab/window.if you don't add the target
attribute, the default is self
<a >legal page</href="http:// "... target="_blank"
Demo of a link opening in a new tab
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 36/203
Demo of a link opening in a new tab
Absolute vs Relative paths
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 37/203
Absolute vs. Relative paths Absolute paths ask for a file from a specific server
Relative paths ask for a file with no server specified.
<a href="http://example.com/legal.html">legal page
<a href="legal.html">legal page</a>
absolute always includes the protocol and server
relative never includes the protocol and server
Since
name
the brassum
the sa
your p
HTML
Links using relative paths
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 38/203
Links using relative paths
Browser
If no protocol/server is included, the browser assumes the pro
server are the same as the page you’re requesting from.
current page containing the link
legal. h t m l
assumed server
is example.com
relative
link
<a href="legal.html">legal page</a>
HTML
Figuring out the site navigation
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 39/203
Figuring out the site navigation
Recipe World server !les
home.html
recipes.html
magic-cake.html
legal.html
All of our HTML files are
our main site folder on th
These are the three main
pages that should go in
our site navigation.
suggest.html
Adding site navigation with relative links
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 40/203
Adding site navigation with relative links
add
this
block
of
HTML
to
all
pages HTML
Relative links should almost always be used when
linking to pages that are located on the same site.
<body>
<h1>Recipe World</h1>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="recipes.html">Recipes</a></li>
<li><a href="suggest.html">Suggest</a></li>
</ul>
<h2>Magic Cake</h2>
...
</body>
The Magic Cake recipe page with site navigati
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 41/203
The Magic Cake recipe page with site navigati
Creating a link to another web site
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 42/203
Creating a link to another web siteFirst, find and copy the URL to the other site
Creating a link to another web site
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 43/203
Creating a link to another web site Absolute links need to always be used when linking
to pages that are located on another site/server.
<a >href="http://www.amazon.com/Domino-..."
link <h3>Ingredients</h3>
<ul>
<li>2 eggs</li>
<li>1 pound of
</li>
<li>3 sticks of butter</li> </ul>
absolute path
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 45/203
Save to Drive ButtonLEVEL 2
CSS
The early days of style on the web
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 46/203
The early days of style on the webWhen the Web was brand new, there was no separation betwe
and the presentation of that HTML.
<H3 COLOR=RED><CENTER>Ingredients</CENTER></H3>
caps-lock got stuck a l
HTML shouldn’t determine how something looks,
it should just determine how content is structured.
HTML
Separating content from presentation
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 47/203
Separating content from presentationThankfully, the authors of the web realized that, and created a
make rules for how tags should look and put them in a separat
from the HTML.
<h3>Ingredients</h3>HTML
CSS Make the h3 tag green
Make the h3 a bigger font
Make the h3 have a border at the bottom
Cascading Style Sheets
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 48/203
Cascad g Sty e S eetsCSS is code that changes the appearance of HTML.
HTMHTML without CSS
Writing your !rst selector
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 49/203
g yTags 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
CSS
p {
text-decoration: underline;}
The syntax of a selector
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 50/203
ySelectors have a very specific syntax that needs to be followed
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
after t
of a pr
Using multiple properties in one selector
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 51/203
g p p p A 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
Selecting multiple tags with one selector
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 52/203
g p gSelectors will select all matching tags on the page and apply prop
<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;
}
big
fo
HTML
CSS
Selecting only tags that are children of another t
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 53/203
g y g A descendent selector can be used to select tags only if they
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 selecto
right-to-left. The lef
is the parent, with ch
following to the righ
onit
HTML
CSS
Selecting tags based on actions and conditions
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 54/203
A pseudo-selector is a modifier that can be added to a select
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
Using pseudo-selectors to narrow selection crite
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 55/203
The :first-child pseudo-selector can be applied to narrow the
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
Where do we put all this stu" ?
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 56/203
One place you can put CSS is in a style tag that’s a child of th
HTML
Your CSS selectors
be written in betwee
the style opening anclosing tags.
The type attribute let
browser
know
that
CSS
<html>
<head>
</head>
<body>
...
</body>
</html>
<style type="text/css">
a {
color: red;
}
</style>
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 57/203
Hexadecimal colors
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 58/203
A popular way to choose colors in CSS is to use hexadecimal n
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
Hexadecimal colors
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 59/203
Each hex color is actually three di! erent parts.
#FFFF00first two numbers set the
amount of red
next
two
set
green
last two set
Hexadecimal colors - Minimum and Maximum
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 60/203
Color values for red, green, and blue run from 0 - 255 decima
or 00 - FF hexadecimal.
#FFFF00This color is maximum red, maximum green, and no blue.
That’s equivalent to the color Yellow
Breaking down decimal numbers
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 61/203
(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)
Breaking down hexadecimal numbersSi ’ d di d i l b i i
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 62/203
(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
sense to convert hexadecimal to decimal.
(hexadecimal)
Breaking down hexadecimal numbersSi ’ d t di d i l b ti it
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 63/203
(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
sense to convert hexadecimal to decimal.
(hexadecimal)
How do we multiply by a letter?!$#?
Understanding letter-based hexadecimal numH d i l b f 0 15 b t l tt f b
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 64/203
(15 x 16)multiply the left by 16 multiply the right by
(15 x 1)
Add them together, and you get 240 + 15, or 255 decim
Hexadecimal numbers run from 0-15, but use letters for numb
A = 10
B = 11
C = 12
D = 13
E =
F =
FF
Calculating the color from hexadecimal numb
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 65/203
#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 re
That’s a color that looks Purple
Calculating the color from hexadecimal numb
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 66/203
#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 re
That’s a color that looks Hot Pink
Colors on the webB i h d i l b l 256 i
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 67/203
By using hexadecimal numbers to set colors, we get 256 possi
combinations for each of the three color channels.
or…
256 x 256 x 256 = 16,777,2
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 68/203
Our page after changing some styles with CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 69/203
Questions
How does our page know
how much vertical and
horizontal space to put
between tags?
How can we control that
spacing?
Why this much space?
Answer
The box model
The BoxEvery tag shown in the body is contained in
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 70/203
Every tag shown in the body is contained in
an invisible rectangle that we’ll call the box .
These two parag
shown as two bo
on top of each ot
HTML
<p>Magic Cake is one of...</p><p>We also need to stress...</p>
The boxes on our pageHere are the boxes for the current version of the magic-cake h
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 71/203
Here are the boxes for the current version of the magic cake.h
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>
Block-level tagsThe content of block-level tags take up the entire width of the
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 72/203
The tags that
content are a
the container
here
is
<body>
h1 h2
p ul
the boxentire w
contain
new boxes are pusthe line below
The content of block level tags take up the entire width of the
Inline-level tagsIf a tag is not block-level it’s inline-level
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 73/203
If a tag is not block level, it s inline level.
Some common inline-level tags
a img
labelinput
<p>...can view our <a href="legal.html">legal page
for more information</p>
inline-level tags don't try to take up more width than the need
Turning block-level into inline-levelSometimes, you’ll want block-level tags to be inline-level.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 74/203
Sometimes, you ll want block level tags to be inline level.
Example: list items displaying horizontally instead of verticall
block-level list items inline-level list ite
ul li {
display: inline
}
the default display is block-levelCSS
Block-level vertical spacing
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 75/203
What 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 s
The Box ModelThe box model is a way to describe the borders
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 76/203
1. Content area
The content area contains your actual content (text,
images, etc.)
Magic CakeThe content area will only take up as m
vertical space as it needs to display th
content inside.
y
and spacing in between the boxes of each tag.
! There are 4 parts of the box model:
The Box Model! There are 4 parts of the box model:
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 77/203
2. Padding
Padding is added to the top, right, bottom, or left of the c
PADDING
Magic Cake
p
The Box Model
! There are 4 parts of the box model:
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 78/203
BORDER
3. Border
Borders are added around the top, right, bottom, or left o
PADDING
Magic Cake
The Box Model! There are 4 parts of the box model:
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 79/203
MARGIN
BORDER
4. Margin
Margins are added to the top, right, bottom, or left of the
PADDING
Magic Cake
How to calculate the size of the boxThe full size of a box after these four properties have been set
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 80/203
MARGIN
BORDER
calculated like this:
PADDING
Magic Cake
+ content area width
= the full box width
use
top,
bottom,
and
height to calculate full box hei ht
+ margin-left
+ border-left
+ padding-left + padding-right
+ border-right
+ margin-right
Applying the box model properties Apply padding to one side at a time… If we want to put so
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 81/203
PADDING
Magic Ca
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
and to the right of s
option is to adjust th
CSS
CSS
Applying the box model properties You can apply borders all at once and not specify a side.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 82/203
BORDER
PADDING
Magic Cak
h2 {
border-width: 6px;
border-style: solid;
border-color: black;
}
h2 {
border: 6px solid black;
}
Creating borders has a shortcut version, too.
CSS
CSS
Applying the box model properties You can also just pick one side and just add a border there.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 83/203
BORDER
PADDING
Magic Cake
h2 {
border-bottom : 6px solid black;
} width st le color
CSS
Applying the box model properties Add margins the same way you add padding…
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 84/203
BORDER
PADDING
Magic Cak
h2 {
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
When should you use padding?Padding is used to control the size of a box without
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 85/203
adjusting the size of the content inside the box.
h2 {
padding: 10px 0
}
h2 {
padding: 0 0 0 0;
}
CSS
When should you use margin?Margin is used to control the space between boxes.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 86/203
h2 {
margin: 4px 0 4p
}
h2 {
margin: 20px 0 20px 0;
}
CSS
Summary of our new box model knowledge
What we now know:
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 87/203
What 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
Browsers actually have a default stylesheet for when no custom
Default browser styles
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 88/203
Default box styles left on Default box styles turne
Resetting default browser styles Add this to the very top of your CSS file to reset default styles
'
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 89/203
Default box styles turned
html, 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
A Box Model process - Start with the bodyThe order that you apply the box model properties is personal
preference but here’s one approach
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 90/203
preference, but here s one approach:
Start from the highest parent element
This is often <body>
body {
padding: 20px 20px 20px 20px;
}
this padding is ever side of th
This padding has the e! ect of pushing
all of the children away from the edges
of the <body>.
CSS
A Box Model process - Next, look at headingsNext, focus on the heading tags
h1
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 91/203
<h1>
h1 {
margin: 10px 0 15px 0;
}
margins
Use margin to put vertical
space between tags.
Before
After
no
marginsCSS
Next, focus on the heading tags
<h2>
A Box Model process - Next, look at headings
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 92/203
h2 {
margin: 10px 0 20px 0;
}
Before
After
no
margins
margins
<h2>
CSS
Before
Next, focus on the heading tags
<h3>
A Box Model process - Next, look at headings
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 93/203
Before
After
no margins
margins
<h3>
CSSh3 {
margin: 15px 0 15px 0;
}
After your margins are in place, think about where borders mi
necessary
A Box Model process - borders
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 94/203
necessary.
this
bottom
border
visually separates the sections
CSSh3 {
margin: 15px 0 15px 0;
}
border-bottom : 1px solid #CCCCCC;
Use padding to put more space between the content and bord
A Box Model process - padding
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 95/203
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;
Padding is also used to adjust list and list item indentation.
A Box Model process - padding
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 96/203
Before After
Padding is also used to adjust list and list item indentation.
A Box Model process - padding
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 97/203
After
left pad
ul { padding: 0 0 0 5
}
ol {
padding: 0 0 0 5
}
Result after adjusting box model propertiesHere’s where our page stands right now:
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 99/203
Fixing page style problems
PROBLEM
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 100/203
PROBLEM
The <ul> padding is being
applied to the navigationand ingredients.
We need a way to add
padding to one <ul>
but not the other.
Using classes to di! erentiate between tags Add a class attribute to an HTML tag so that you can access it
in CSS…
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 101/203
.nav {
padding-left: 0;
}
… then access this class in CSS by putting
a period in front of the class name.
padding-left is gone from the
nav
<ul>
padding-left remains on the ingredients <ul>
HTML
CSS
<ul class="nav"><li>...</li></ul>
Using classes in descendent selectorsClasses can be used interchangeably with tags, so the way des
selectors work doesn’t change.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 102/203
.nav a {
color: #0000af;
text-decoration: none;
}
This selector says find all a t
that are children of any tag
class of “nav”, and set the c
blue and turn o! the underlin
HTML
CSS
<ul class="nav">
<li> </li>
</ul>
<a href="home.html">Home</a> <li><a href="recipes.html">Recipes</a></li>
<li><a href="suggest.html">Suggest</a></li>
Using classes to di! erentiate between tagsProblem: We don’t want the ingredients list to display inline
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 103/203
CSSul li {
display: inline;
}
our current rule for list items
should
be
the
default
block-level,
not
inline
Using classes to di! erentiate between tagsClasses can be used interchangeably with tags, so the
way descendant selectors work doesn’t change.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 104/203
still displayed
inline
displaying
as
a
block-level tag again (the default)
CSSul li {
display: inline;
}
.nav li {
display: inline;
}
Writing class and type selectors in the right orWhen you’re just using type selectors, the order doesn’t really
When you start combining them with class selectors - the orde
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 105/203
e you sta t co b g t e t c ass se ecto s t e o de
This ul padding overrides the .nav padding
because it comes after the .nav in the stylesheet.
padding-left: 0;
Padding for .nav befor
CSS
padding-left: 50
Padding for .nav after
.nav {
padding-left: 0;
}
ul {
padding: 0 0 0 50px;
}
padding-left!!!
Writing class and type selectors in the right orGenerally speaking, first declare the broadest rules with ty
selectors, and then get more specific with class selectors
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 106/203
flip them so the ul comes first, and then the .nav
This way, the broader rules cascade down and become defau
and more specific rules can change the defaults.
CSS
padding-l
Padding for .
before .nav r
padding-l
Padding after
ul { padding: 0 0 0 50px;
}
.nav {
padding-left: 0;
}
more specific
broader
Creating a page that lists all recipesOur recipes.html page will have a list of links to individual rec
recipes.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 107/203
<html>
<head>
</head>
<body>
<h1>Recipe World</h1>
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li><a href="recipes.html">Recipes</a></li
<li><a href="suggest.html">Suggest</a></li
</ul>
</body>
</html>
<h2>Recipes</h2>
right
now,
this
page
juthe main site navigatioh2 describing the page c
Creating the list of recipesThe list of recipes can be an unordered list where each list item
a few other block-level tags and a link to the individual recipe
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 108/203
copy
this
general
structure
for
each
recipe
<h2>Recipes</h2>
<h3><a href="magic-cake.html">Magic Cake</a
<p>This is a dangerously delicious cake.</p
</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
recipes.html
<ul>
<li>
The recipes page has a problem
Problem:
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 109/203
None of our styles are in recipes.html
because we put our CSS in the<head> of magic-cake.html.
Solution:
We need to put our CSS in a
separate file and link that file
to each of our HTML pages.
all ofrules
Move the CSS into a single "leHere we’ve created a single file called main.css so we have on
put all of our CSS.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 110/203
HTMLmagic-cake.html
<html> <head>
<style type="text/css">
a {
color: red;
}
all other styles
</style>
</head>
...
</html>
main.css
Move all of the selectors
rules into the CSS file, bu
not the HTML <style> ta
Visualizing our site "lesRecipe World server !les
i ill h ld ll f
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 111/203
home.html
recipes.html
magic-cake.html
legal.html
support.html
main.css will hold all of our
be linked in the <head> of main.css
Cmain.css
a {
color: red;
}.
all other styles
Where do you write CSS?While CSS can be written inside of a <style> tag in an HTML
of the time it’s written in a separate file and connected to the
ith li k t
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 112/203
with a link tag.
HTML The link tag should be a child of the head tag
The link tag is an empty tag,
meaning it is written with only an
opening tag and has no closing tag.
<lin
<html>
<head>
<link>
</head>
<body>
...
</body>
</html>
recipes.html
Where do you write CSS?Since the tag is empty, the way you use it is by setting di! eren
recipes.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 113/203
The type attribute set to text/css lets the browser
know we’re going to be loading a CSS file.
this is called a MIME type
<html>
<head>
<link >
</head>
<body>
...
</body>
</html>
type="text/css"
Where do you write CSS?Since the tag is empty, the way you use it is by setting di! eren
recipes.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 114/203
The rel attribute is short for relationship.
Setting rel to stylesheet tells the HTML that it
should use the linked file to determine page styles.
<html>
<head>
<link >
</head>
<body>
...
</body>
</html>
type="text/css" rel="stylesheet"
Where do you write CSS?Since the tag is empty, the way you use it is by setting di! eren
recipes.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 115/203
The href attribute works just like it does with the <a> tag.
this is a relative path, so weknow here that main.css shobe in the same folder as our
HTML
files
<html>
<head>
<link
</head>
<body>
...
</body>
</html>
type="text/css" rel="stylesheet" href="m
Before-and-after linking the CSS "leNow recipes.html is using the general styles we’ve already cre
Before linking main.css After linking main.css
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 116/203
Dealing with similar styles on multiple pagesOften using the exact same styles on all pages doesn’t look rig
HTMLrecipes.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 117/203
<h2>Recipes</h2>
<ul> <li>
<h3><a href="magic-cake...
<p>This is a dangerously...
</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
The ul, ul li, h3, and p styles are cascading
down from our broader selectors.
HTML
A proposal for changing the recipes page style
no list-style-type no bo
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 118/203
border around the <li>
y yp
for the <ul> no bo
left padding between the li border and content area
our greused fo
Dealing with similar styles on multiple pagesFirst, we’ll give the recipes.html <ul> a unique class.
recipes.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 119/203
<h2>Recipes</h2>
<li>
<h3><a href="magic-cake.html">Magic Cake</
<p>This is a dangerously delicious cake.</
</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<ul class="recipes">
Dealing with similar styles on multiple pagesThen, write some more specific CSS for .recipes and any child
existing ul styles
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 120/203
ul {
padding: 0 0 0 50px;
}
.recipes {
list-style-type: none;
padding: 0;
}
remember, .recipes is a specific <ul>
CSS
CSS
resets all sides to 0
st g sty s
Dealing with similar styles on multiple pagesThen, write some more specific CSS for .recipes and any child
existing ul li styles
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 121/203
ul li {
}
.recipes li {
border: 1px solid #b56663;
padding-left: 15px;
}
the .recipes <li>'s will inherit the margins and add a new border and padding-left
CSS
CSS
isti g ul li styl s
Dealing with similar styles on multiple pagesThen, write some more specific CSS for .recipes and any child
CSSexisting h3 styles
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 122/203
h3 {
margin: 15px 0 15px 0;
border-bottom : 1px solid #cccccc;
padding-bottom : 3px;
}
.recipes h3 {
border-bottom : 0;
}
the .recipes h3 will inherit all of the h3
properties,
but
remove
the
bottom
borderCSS
Dealing with similar styles on multiple pagesThen, write some more specific CSS for .recipes and any child
We don’t currently have a general
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 123/203
.recipes a {
color: #7facaa;
text-decoration: none;
}
We don t currently have a general
CSS rule for a, so we can just add
our specific version.
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 124/203
Organizing the page layoutIn our current layout, we’ve got a
clear separation between the
header and main content.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 125/203
The div tagdiv is short for division, and it’s a block-level tag that’s a gene
way to group related content into sections on a page.
HTML
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 126/203
header
main content
HTML
> <h1>Recipe World</h1>
<ul class="nav">...
</div>
<div>
<body>
<div
</body>
<h2>Magic Cake</h2>
...
</div>
Use classes to describe what divs contain A common way to di! erentiate between <div> tags is to add a
HTMLlet's build this style
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 127/203
HTML
> <h1>Recipe World</h1>
<ul class="nav">...
</div>
<div >
class="header"
class="main-content"
<body>
<div
</body>
<h2>Magic Cake</h2>
...
</div>
Classes will let us style each <div> di! erently
Use classes to describe what divs contain A common way to di! erentiate between <div> tags is to add a
let the divs handle now and not the bo
HTML
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 128/203
HTML
> <h1>Recipe World</h1>
<ul class="nav">...
</div>
<div
class="header"
class="main-content"
body {
padding: 0 0 0 0;
}
.header {
padding: 10px 10px
.main-content {
padding: 20px 20px
border: 1px solid
margin: 30px 0 0 0
}
<body>
<div
</body>
<h2>Magic Cake</h2>
...
</div>
}
Giving the header a separate styleLet’s make our header styles look di! erent so we can easily se
header is di! erent from the main-content.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 129/203
CSS.header {
padding: 10px 10px 10px 10px;
.header a {
color: #ffffff;
}h1 {
color: #ffffff;
}
}
background-color: #b56663;
Adjusting the size of divsThe width and height of any tag’s content area can be changed
So far, we’ve just wanted our tags to take up 100% of the avai
width but let’s make our main-content div a fixed size
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 130/203
width, but let s make our main content div a fixed size.
CSS.main-content {
width: 500px;
padding: 20px;
border: 1px solid #dddddd;
margin: 30px 0 0 0;
}
Centering contentThere’s two main ways to center things, but the CSS you write
on what you’re centering.
If: you want to center an entire block
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 131/203
If: you want to center an entire block-
level tag
Then: set the left and right margins to auto
And: it is fixed-width
CSS.main-content {
width: 500px;
padding: 20px;
border: 1px solid #dddddd;
margin: 30px 0 ;
}
auto auto
Centering with margin autoCSS
auto here means take a
space as you can. margin: 30px 0 ;auto auto
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 132/203
right left
Centering contentThere’s two main ways to center things, but the CSS you write
on what you’re centering.
If: you want to center children
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 133/203
If: you want to center children
inside a block-level tag
Then: set the text-align of the
children to center
h1 {
color: #ffffff;
margin: 0 0 15px 0;
text-align: center;
}
centered!CSS
Centering contentThere’s two main ways to center things, but the CSS you write
on what you’re centering.
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 134/203
centered!
.nav {
padding-left: 0;
margin: 5px 0 20px 0;
text-align: center;
}
h2 {
margin: 10px 0 20px 0;
text-align: center;
}
A note about "xed widthsIf you’ve been reading about or making websites, you might be
wondering why we’re using fixed widths instead of relative wi
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 135/203
Fixed widths are great for learning how page layout works, an
this course, you can continue on to our Journey Into Mobile
where you’ll learn how to convert your fixed widths to relative
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 137/203
Save to Drive ButtonLEVEL 4
IMAGES
The three types of webpage imagesMost images on webpages fall into one of these three categori
! Content Images
! Layout Images
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 138/203
! Layout Images
! User Interface Images
Content imagesContent images are any images that are just as necessary to th
all of the text.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 139/203
Layout imagesThese are in the background, and are not necessary to
understand the content of the page.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 140/203
actual important
User Interface images
h d d
These assist with the interface of the webpage, but are not req
understand the content of the page.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 141/203
These downward arrows
direct
how
to
work
with the interface.
Creating content imagesContent images are created in HTML with the <img> tag.
<img> is an empty tag.<img>
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 142/203
<img></img>
remember, that means it just
has an opening tag (no closing)
Creating content imagesContent images are created in HTML with the <img> tag.
Instead of open/close tamagic-cake.html
HTML<i >src "cake png"
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 143/203
add an src attribute to
set which image is usedrelative path
Recipe World server !les
magic-cake.html
cake.png
main site folder
<img >src="cake.png"
Putting images in their own folderIt makes sense to organize your images so they aren’t in the m
folder.magic-cake.html
HTML
<img >src=" cake png"images/
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 144/203
Recipe World server !les
magic-cake.html
images
main site folder
cake.png
now all of your images can go in
the
images
folder
<img >src= cake.pngimages/
How images are loaded
Browser requests magic-cake.html
mag
main si
Recipe World
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 145/203
q g
The magic-cake HTML is loaded in the browser
Browser finds this html
Browser
requests
images/cake.png
cake.png contents are returned and displayed
mag
ima
c
<img >src=" cake.png"images/
Adding alt attributes to content imagesThe alt attribute should contain text that describes the image
or the purpose of the image.
magic-cake.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 146/203
cake.png
Not everyone who views your page
will be able to view the images.
W h y ? ? Accessibility
Screen readers rely on alt tags to
describe images to visitors that
might not be able to view images.
<img src=" cake.png"images/ alt="Magic Cake Photo
Laying out content images<img> is an inline-level tag, but they are often put inside bloc
This is similar to <a> tags, which almost
always appear as children of block-level tags.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 147/203
<li> is a block-level tag
<h3>Your Photos</h3>
<ul class="photos">
<li><li>
<li>
<li>
<img src="images/cake1.png" alt="Cake Photo 1
<img src="images/cake2.png" alt="Cake Photo 2
<img src="images/cake3.png" alt="Cake Photo 3</ul>
magic-cake.html
Laying out content images
We want these
photos to display
Problem
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 148/203
side-by-side, like this
Laying out content images
<h3>Your Photos</h3>
<ul class="photos">
<li><img
HTMLmagic-cake.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 149/203
<li><img...
</ul>
CSS
remove bullets and padding
make the images show
horizontally with a little space in between
.photos {
list-style-type: none;
padding: 0;
}.photos li {
display: inline;
padding-left: 11px;
}
Using an image as a site/logo mark
<div class="header">
<h1>R i W ld</h1>
We can replace the <h1> with an <img> tag.
HTMLmagic-cake.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 150/203
<h1>Recipe World</h1>
<ul class="nav">...
<div class="header">
<ul class="nav">...
<img src="images/logo.png" alt="Recipe World Logo
Centering an image inside a block-level tag<img> is an inline-level tag so it can’t be centered with text-a
Instead, set just that image to display: block and center it wi
the margin: auto approach.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 151/203
.header img { display: block;
margin: 0 auto 0 auto;
}
CSS
<div class="header">
<ul class="nav">...
<img src="images/logo.png" alt="Recipe World Logo
magic-cake.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 152/203
Creating layout imagesLayout images are created in CSS with the background prope
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 153/203
Understanding the background propertyThere’s several di! erent properties that relate to background
background-color works just like the color property.
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 154/203
You should always set abackground color in case the
background image fails to load.
TIP
CSS
body {background-color: #5f5f5f;
}
Understanding the background propertybackground-image can point to a relative or absolute path.
body {
background-color: #5f5f5f;
b k d i l(i / bbl )
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 155/203
the path has to be inside this url() codenotice that qdon't need toaround the p
}
background-image: url(images/gobbler.png);
Check out subtlep
for this and other
Understanding the background propertybackground-position can be used to position the image in a
body {
background-color: #5f5f5f;
background image: url(images/gobbler png);
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 156/203
the first word can
be top, center , or
bottom
the second word
can be left, center ,
or right
}
background-image: url(images/gobbler.png);
top left;background-position:
Understanding the background propertybackground-position can be used to position the image in a
body {
background-color: #5f5f5f;
background image: url(images/gobbler png);
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 157/203
center right}
background-image: url(images/gobbler.png);
;background-position:
this shows the image vertically centered and pushed to the right
Understanding the background propertybackground-repeat can be used to repeat tiled images.
CSbody {
background-color: #5f5f5f;
background image: url(images/gobbler png);
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 158/203
}
background-image: url(images/gobbler.png);
;background-position: top leftbackground-repeat: repeat;
Understanding the background propertybackground-repeat can be used to repeat tiled images.
body {
background-color: #5f5f5f;
background-image: url(images/gobbler png);
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 159/203
Other values
repeat-x
repeat-y
no-repeat
tile the image horizontally
tile the image vertically
don’t tile or repeat anything
}
background-image: url(images/gobbler.png);
;background-position: top leftbackground-repeat: ;repeat-y
Understanding the background property All four of those can be shortened into a single background p
CSSbody {
background-color: #5f5f5f;
background-image: url(images/gobbler png);
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 160/203
color image position
}
background-image: url(images/gobbler.png);
;background-position: top leftbackground-repeat: ;repeat
body {
background: #5f5f5f url(images/gobbler.png) top lef}
Creating di!
erent tiled backgroundsWe can set di! erent backgrounds for di! erent containers.
Here, we’re using one repeated background for the body, anot
main-content, and another for the divs on the recipes page.
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 161/203
body {
background: #000000 url(images/stardust.png) top le
}
.main-content {
background: #ffffff url(images/crossword.png) top l
}.recipes li {
background: #ffffff url(images/li-bg.png) top left
}
Result of using three di!
erent layered backgro
body background
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 162/203
y g
.recipes
li
background
Writing on top of background imagesSome sites like to write text over images.
This list on gamespot.co
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 163/203
text for the game name release date appearing o
background image from
game.
h4 p
Writing on top of background imagesSome sites like to write text over images.
One way to do this is to create an empty
div container that completely contains a
background image, and put text tags
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 164/203
inside of it.
HTML<div class="main-content">
<h2>Home</h2>
<div class="featured-image"></div>
</div>
home.html
First, add the background image to the contaiHTML
<div class="main-content">
<h2>Home</h2>
<div class="featured-image">
home.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 165/203
.featured-image {
width: 630px;
height: 246px;
background: #ffffff url(images/featured-cake.pn
top left no-repeat;
}
these should be equal to the width/height of the image
</div></div>
Then, add a tag that shows text as a child of that c
HTML<div class="featured-image">
</div>
<h3>Featured: Magic Cake</h3>
home.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 166/203
.featured-image h3 {
margin: 0;
background-color: #333333;
color: #ffffff;
padding: 5px 0 5px 15px;
text-transform : uppercase;
}
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 167/203
Displaying an image to the side of block-levelWe know that tags are either block or inline.
inline-level block-level
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 168/203
This is an image to left of multiple block-level tags.
block-level
How can we make this?
Floating images You might try setting two divs to inline.
left div set to inline ri ht div set to inline
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 169/203
Floating images <ul class="recipes">
<li>
<div>
<img src=...>
</div>
Setti
divs s
with
HTML
magic-cake.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 170/203
<div>
<h3><a href=...>Magic Cake</a></h3>
<p>...</p>
</div>
</li>
</ul>
.recipes div {
display: inline;
}
seemwork
CSS
Floating imagesTurns out, we can’t just flip things to inline and then put
block-level tags inside of them.
left div set
T
s
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 171/203
to
inline
right div set
to inline
Floating images
<ul class="recipes">
<li>
<img src=...>
HTML
Put the img, h3, and p all in one li and float the img left.
magic-cake.html
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 172/203
g
<h3><a href=...>Magic Cake</a></h3>
<p>...</p>
</li>
</ul>
This makes the image of the left space that th
boxes would normally
block-level tags.
CSS.recipes img {
float: left;
}
Floating imagesSuccess! We’ve also added some right padding so the image d
touch right up against the text.
Float is a tric
that is covere
CSS.recipes img {
float: left;
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 173/203
greater detai
Cross Countr
float: left;
}
padding-right: 10px;
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 175/203
Save to Drive ButtonLEVEL 5FONTS AND FORMS
Fonts on the WebFonts and font styles can be controlled with CSS.
bold, large
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 176/203
regular,
mediumregular
uppercase
Our current page’s fontsSince we haven’t set a font, the browser is just picking a defau
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 177/203
Changing the font with CSSThe font-family property is used to set the ideal font and a fe
fallback options.
body {CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 178/203
The ideal font
The browser
try to load th
ideal font fir
font-family: Helvetica,}
Arial, sans-serif;
Changing the font with CSSThe fallback fonts are used if the ideal font isn’t available.
use quotes if fonts are multi-wobody {
font-family: Helvetica, Arial, "Times New Roman",
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 179/203
Fallback fo
Not all fonts are installed in all browsers!!!
}
Our page after changing the fontHere’s magic-cake.html after changing the main font to Helve
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 180/203
Browser defaults - the font edition Just like with the box model properties, the browser has
default font styles - and you should reset these too!!
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 181/203
These weights
and sizes are
the browser
defaults.
Resetting default browser font stylesNow the font weights and sizes won’t follow an arbitrary defau
html, body, h1, h2,
h3, p, ol, ul, li, a {
padding: 0;
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 182/203
border: 0; margin: 0;
}
font-size: 100%;
font: inherit;
Changing font sizesThe size can be set with the font-size property.
h2 {
color: #7facaa;
margin: 0 0 20px 0;
li
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 183/203
Pixels aren’t the only size options
percentages
ems
text-align: center; font-size: 26px;
}
Changing font thicknessThe thickness can be set with the font-weight property.
h2 {
color: #7facaa;
margin: 0 0 20px 0;
li
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 184/203
Weight values
normal
bold
100, 200… 900
lighter
bolder
text-align: center; font-size: 26px;
}
font-weight: bold;
Changing other font properties
.footer p {
color: #aaaaaa;
text-align: center;
f t i ht b ld
Here’s a few other font properties:BEFORE
AFTER
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 185/203
font-weight: bold;font-size: 12px;
font-style: italic;
text-transform : uppercase;
}
<div class="footer">
<p>© 2014 - Recipe World</p>
</div>
AFTER
snazzy way to show a copyright symbol
HTML
Adjusting the line heightline-height is like margin for each line in a box.
You can adjust the vertical
spacing between di! erent
t t t b h i th
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 186/203
text tags by changing themargin.
margin
Margin can’t adjust the
spacing between lines in a
single box.
Adjusting the line height
.main-content p {
line-height: 16px;
}
line-height is like margin for each line in a box.
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 187/203
.main-content p {
line-height: 26px;
}
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 188/203
Web FormsForms are a way for a web page to get input from a user.
label
Forms usual
things like l
several di!
e
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 189/203
form input
submit
several di eareas, and a
Recipe World’s form
Making forms actually
process user input requires
server-side code.
label
textarea
Disclaimer
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 190/203
form
input
submit
textarea
We can still design how
the form will look in the
browser now.
The HTML for a simple formThis HTML will produce the form shown below (but some extr
attributes would needed to send the form data to the server).
<form>
<label>Recipe Name</label>
<input type="text">
suggest.htmlHTML
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 191/203
<input type= text >
<input type="submit" value="Click to Submit">
</form>
label input submit
Common form input typesThe type attribute sets the kind of input field that will display.
<input type="text">
<input type="checkbox">
<input type="radio">
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 192/203
<input type= radio >
<input type="file">
<input type="password">
<input type="submit">
The for and id attributesThe value of the for attribute in the label should be the same a
value of the id attribute in an input field to associate the label
this associates the labe
Each for/id pair has to be unique on the page.
for="recipe name">Recipe Name</label><label
<form>
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 193/203
for= recipe-name >Recipe Name</label>
<input type="text" >
<input type="submit" value="Click to Submit">
</form>
id="recipe-name"
<label
Using a textarea instead of an inputinput tags should be used for short or single-line user input.
The textarea tag is used for multi-line user input.
textareas also don't need to define a type<form>
<label for="ingredients">Ingredients</label>
<textarea id="ingredients"></textarea>
HTML
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 194/203
Unlike inputs, textareas need an opening and closing tag.
</form>
<textarea id= ingredients ></textarea> <input type="submit" value="Click to Submit">
Styling formslabels and inputs are inline-level tags, but it usually makes se
display one on top of the other like block-level instead of side-b
Before
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 195/203
label, input {
display: block;
}.
After
CSS
Styling formsOnce you’ve got both tags displaying as block-level, you can st
just like you would any other block-level tag.
label, input {
display: block;
}
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 196/203
}.
label {
margin-bottom : 10px;
}
input {
width: 500px;
margin-bottom : 25px;
}.
Styling the submit button separatelySince the submit button is technically an input tag, our input s
properties are a! ecting the way it is displayed.
Attribute selectors are a way to style
a tag based on one of its attributes.
Before
input { CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 197/203
attrib. name attrib. value After
input {
width: 500px;
margin-bottom : 25px;
}.
input[type=submit] {
width: 120px;
font-size: 30px;
}
CSS
Styling inputsThe container around an input is actually just a border, so you
it with the border property.
input[type=text] {
border: 2px solid #7facaa;
}
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 198/203
}
Styling inputsTo adjust the height of the input, style the text inside.
input[type=text] {
border: 2px solid #7facaa;
font-size: 24px;
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 199/203
}font size: 24px;
Styling inputs And, since the green line is a border, use padding to put some
between the border and the text.
input[type=text] {
border: 2px solid #7facaa;
font-size: 24px;
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 200/203
}
p ;padding: 7px;
Styling textareas You can set a width and height for textareas, but otherwise th
behave similar to regular inputs.
textarea {
width: 500px;
height: 400px;i
CSS
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 201/203
g p ; padding: 7px;
border: 2px solid #7facaa;
margin-bottom : 25px;
font-size: 24px;
}
Creating a separate style for a checkbox inputIt looks awkward if the newsletter label and input are on sep
since the checkbox is so small, so we can use attribute selecto
make just this input and label display inline.
<form>
<label for="newsletter">Get Newsletter?</label>i " h kb " id " l "
HTML
7/23/2019 Front-end-Foundations
http://slidepdf.com/reader/full/front-end-foundations 202/203
input[type=checkbox], label[for=newsletter] {
display: inline;
}
</form>
<input type="checkbox" id="newsletter">
...
CSS
The !nal form