CSS Review, Backgrounds, Fonts, & the Box Model

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 ● 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 <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.

CSS Review, Backgrounds, Fonts, & the Box Model

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support