Embed Size (px)
Citation preview
HTML & CSS Basics IIIclass three: CSS review,
backgrounds, font formatting, the box model
…so let’s attach our CSS
<head><link rel="stylesheet" href="cafe.css" /></head>
Backgrounds
background-color Hex (#ff0000) RGB (rgb(255,0,0)) Name (red)
try it:body {
background-color: #F1F2E4;}
Backgroundsbackground-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-attachmentscroll (default), fixed
try it:#menu {
background-image:url('images/fabric_texture.jpg');}
Textcolor hex, RGB, or name
text-align left (default), center, right, or justify
try it:h1 {
color: #B55109;text-align:center;
}
Texttext-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;}
Fontfont-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 {
color: #B55109;text-align:center;font-size: 4em;font-weight: 400;
}
h2, h3 {color: #B55109; font-size:2em;font-weight:400;
}
Fontfont-family syntax= font-family:individual, family; families 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
@font-face Allows you to use any font, provided
it’s hosted somewhere on the web. Many options: Font Squirrel, Google
web fonts, TypeKit
try it:TOO MUCH TEXT! Let’s just copy and
paste.
Font@font-face Needs multiple file formats to work in multiple
browsers:@font-face {
font-family: 'bebasregular';src: url('webfont.eot'); /*>IE9*/src: url('webfont.eot?#iefix') format('embedded-opentype'), /*<IE8*/
url('webfont.woff') format('woff'), /*emerging standard*/
url('webfont.ttf') format('truetype'), /*most browsers besides IE and iPhone*/
url('webfont.svg') format('svg'); /*iPhone and iPad*/font-weight: normal;font-style: normal;
Font@font-face Once this declaration is in place, refer to your new fonts
using font-family
try it:body {
background-color: #F1F2E4;font-family: KameronRegular, ''Times New Roman'', serif;}
In h2, h3:font-family: OstrichSansBlack, Verdana, Geneva, sans-serif;
In h1:font-family: OstrichSansBlack, Verdana, Geneva, sans-serif;
Font@font-face Once this declaration is in place, refer to your new fonts using font-
family
try it:footer {
font-family: OstrichSansBold, Verdana, Geneva, sans-serif;font-size: 2em;text-align: center;}
nav ul {font-family: OstrichSansBold, Verdana, Geneva, sans-serif;font-size: 2em;}
h1 span {font-family: OstrichSansBold, Verdana, Geneva, sans-serif;}
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>
More Span!Let’s use <span> to format the copyright in
the footer.
html:<footer>
<span>© </span>2014...
css:footer span {
font-family: KameronRegular, ''Times New Roman'', serif;
}
If there’s not a natural element, break html up with <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 parts of a boxthe webpage
heig
ht
content
width
border
padding
margin
