<<
html & css basics class three CSS review, backgrounds, fonts, & the box model ...so let’s attach our CSS
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 ● 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 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 like this: 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?! is an HTML tag which allows you to just group some elements together. It doesn’t mean anything!TRY IT:
Sam & Sally's Cafe
div, like , doesn’t mean anything. It’s meant to divide up the page into related parts. TRY IT:
…