Class 2 Css: seleCtors, Classes & ids

Web Design , gR APH -327 1- 01 Instructor: Erika Tarte Rhode Island School of Design Wintersession 2011

webpage

from web content to webpage
In addition to content, webpages contain hidden information that help browsers interpret structure, meaning, style, interactions, etc. Most of the visible information takes place in the body of the HTML document, while most of the hidden formation happens in the head of the HTML document. Some information happens in external files, like CSS and JavaScript. We link to these files in the head of the HTML document.

basic html webpage
<html> <head> <title>Document Title</title> </head> <body> ... </body> </html>

Css

what’s css?
CSS Stands for Cascading Style Sheet Purpose HTML tells us what to display CSS tells us how to display Format Simple text file Contains rules for displaying HTML

types of style sheets
Inline Styles defined within an individual tag with a lot of content starts to become inefficient Internal styles defined at the top of each individual page with a lot of pages, starts to become inefficient External styles defined once for your whole site all of your html pages link to the same file extremely efficient (and its what we’ll do in this class)

why external?
Central definition of visual style make one change, the entire site is updated can be reused on any number of pages Developers and designers can work independently Same content can be restyled for lots of different media web print mobile phone iPod/iPhone/iPad

characteristics
Cascading style rules are applied in order last definition takes precedence over the first Order of priority 1 browser default 2 external styles 3 internal styles 4 inline styles lowest priority

highest priority

linking a css file to your html file
The only change in the HTML file is to add a line of code at the top: <link rel=”stylesheet” type=”text/css” href=”styles.css” /> Tells browser to include a style sheet called styles.css You can name the file anything you want (webstyles.css, printstyles.css, awesome.css) Include the <link> tag just before the </head> tag in your HTML.

basic html webpage w/ link to css file
<html> <head> <title>Document Title</title> <link rel=”stylesheet” type=”text/css” href=”styles.css” /> </head> <body> ... </body> </html>

linking your first file demo
1 Create a text file and save it as styles.css 2 Add this line to your HTML, right before the </head> tag: <link rel=”stylesheet” type=”text/css” href=”styles.css” /> 3 Start writing CSS rules in your styles.css file

syntax

be prepared...
There are many style properties, don’t worry about memorizing them! Keep a reference open while coding (www.w3schools.com)

css syntax: vocabulary
selector = what you are defining curly brackets { } = begin & end of rules for selector property = set of display properties you can change value = what you are changing the property to semicolon ; = ends each rule

css syntax

selector { property: value; property: value; }

css syntax
selector { property: value; property: value; }
selec toR is the html element these rules will change

css syntax
selector { property: value; property: value; }

PRoPeRt y is a display characteristic you are writing a rule for. Each selector can have multiple properties, and some selectors have very specif ic properties.

css syntax
selector { property: value; property: value; }

VAlue is the display characteristic that you want to apply to the property

css syntax
sandwich { cheese: cheddar; bread: rye; condiment: mustard; condiment-style: spicy-brown; }

css syntax
h1 { font-family: Helvetica; font-size: 36px; font-weight:bold; text-transform:uppercase; color:#000000; }

Classes & ids

html class & id attributes
These 2 attributes give you more control over the elements while using CSS No inherent styles or properties Different elements can share the same class IDs are unique, and different elements can’t share them

html class & id attributes
<a href="http://google.com" class="button">Link</a> <a href="http://google.com" id="button1">Link</a>

css class & id selectors
.button { font-size: 12px; color: #ff0000; text-decoration: none; } #button1 { font-size: 12px; color: #ff0000; text-decoration: none; background-color: #ffff00; }

html class & id attributes
<a href="http://google.com" class="button">Link</a> <a href="http://google.com" class=”button” id="button1">Link</a>

css class & id selectors
.button { font-size: 12px; color: #ff0000; text-decoration: none; } #button1 { font-size: 12px; color: #ff0000; text-decoration: none; background-color: #ffff00; }

css class & id selectors
.button { font-size: 12px; color: #ff0000; text-decoration: none; } #button1 { font-size: 12px; color: #ff0000; text-decoration: none; background-color: #ffff00; }

css class & id selectors
.button { font-size: 12px; color: #ff0000; text-decoration: none; } #button1 { background-color: #ffff00; }

Color

color values
rgb (red, green, blue) values 0 to 255 additive color black: 0,0,0 white: 255,255,255 hexadecimal or “hex" encoded value of rgb black: #000000 white: #FFFFFF

rgb value

hexadecimal (hex) value

css property: color
h1 { color: rgb(255,255,255); color: #ffffff; }

css property: background-color
h1 { color: #ffffff; background-color: #000000; }

typography

fonts
Browsers only display fonts installed on the user’s computer (with some recent exceptions) To define fonts, the font-family: css property is used Designers use font-stacking to create prioritized lists of fonts to display (A safety net, incase the first desired typeface is unavailable) Start with a very specific typeface, move to a generic classification

css property: font-family
h1 { color: #ffffff; background-color: #000000; font-family: Akkurat, Helvetica, sans-serif; }

css property: font-size
h1 { color: #ffffff; background-color: #000000; font-family: Akkurat, Helvetica, sans-serif; font-size: 72px; }

css property: font-weight
h1 { color: #ffffff; background-color: #000000; font-family: Akkurat, Helvetica, sans-serif; font-size: 72px; font-weight: normal; }

css property: letter-spacing
h1 { color: #ffffff; background-color: #000000; font-family: Akkurat, Helvetica, sans-serif; font-size: 72px; font-weight: normal; letter-spacing: 4px; }

css property: text-transform
h1 { color: #ffffff; background-color: #000000; font-family: Akkurat, Helvetica, sans-serif; font-size: 72px; font-weight: normal; letter-spacing: 4px; text-transform: uppercase; }

Sign up to vote on this title
UsefulNot useful