html & css basics
class three
CSS review, backgrounds,
fonts, & the box model
...so let’s attach our CSS
<head>
<link rel="stylesheet" href="
cafe.css" />
</head>
background
background-color
● Name (red)
● RGB (rgb(255,0,0))
● Hex (#ff0000)
TRY IT:
body {
background-color: #F1F2E4;
}
background
background-image
● url(‘image.jpg’)
background-repeat
● repeat (default), repeat-x, repeat-y, no-repeat
background-position
● left, center, right, top, center, bottom
● x% y% (0% 0% default)
● xpos ypos
background-attachment
● scroll (default), fixed
TRY IT:
#menu {
background-image:url('images/fabric_texture.jpg');
}
text
color
● hex, RGB, or name
text-align
● left (default), center, right, or justify
TRY IT:
h1 {
color: #B55109;
text-align:center;
}
text
text-decoration
● none (default), overline, line-through, underline, blink
text-transform
● none (default), uppercase, lowercase, capitalize
TRY IT:
a {
text-decoration:none;
text-transform:uppercase;
color: #66839E;
}
font
font-size
● default size is 16px
● px, cm, em, %, xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger
font-weight
● normal(default), bold, bolder, lighter, 100-900
TRY IT:
h1 { h2, h3 {
color: #B55109; color: #B55109;
text-align:center; font-size:2em;
font-size: 4em; font-weight:400;
font-weight: 400; }
}
font
font-family
● s yntax= font-family:individual, family;
● f amilies include: serif, sans-serif, monospace, cursive,
fantasy
font-style
● normal(default), italic, oblique
TRY IT:
body {
background-color: #F1F2E4;
font-family: "Trebuchet MS", Helvetica, Tahoma, sans-serif;
}
font
Custom fonts: @import & @font-face
● Allow you to use any font, provided it’s hosted somewhere
on the web.
● Many options: Font Squirrel, Google web fonts, TypeKit,
etc.
LET’S VISIT GOOGLE FONTS!
https://www.google.com/fonts#
font
@import
● Can be linked at the top of your CSS like this:
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
Or in the html <head> like this:
<link href='http://fonts.googleapis.com/css?
family=Sanchez|Oswald:
300|Oleo+Script|Stint+Ultra+Condensed'
rel='stylesheet' type='text/css'>
font
@import
● Once this declaration is in place, refer to your new fonts using font-family
TRY IT:
body {
background-color: #F1F2E4;
font-family: 'Sanchez', serif;
}
In h2, h3:
font-family: 'Oswald', Verdana, Geneva, sans-serif;
In h1:
font-family: 'Oleo Script', cursive;
font
@import
● Once this declaration is in place, refer to your new fonts using font-family
TRY IT:
footer {
font-family: 'Oswald', sans-serif;
font-size: 1.5em;
text-align: center;
}
nav ul {
font-family: 'Oswald', sans-serif;
font-size: 1.75em;
}
h1 span {
font-family: 'Stint Ultra Condensed', cursive;
font-size: 1.1em;
}
span? what?!
<span> is an HTML tag which allows you to just
group some elements together. It doesn’t mean
anything!
TRY IT:
<h1>Sam <span>&</span> Sally's
<span>Cafe</span></h1>
div <div></div>
<div>, like <span>, doesn’t mean anything. It’s
meant to divide up the page into related parts.
TRY IT:
</nav>
<div id="content">
…
</div>
<footer>
the box model
parts of a box:
margin
padding
h
e
i content
g
h
t
width
border
