class 2: css selectors, classes & ids

Class 2 Css: seleCtors, Classes & ids

Web Design, gR APH-327 1- 01

Instructor: Erika TarteRhode Island School of DesignWintersession 2011

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.

from web content to webpage

<html>

<head>

<title>Document Title</title>

</head>

<body>

...

</body>

</html>

basic html webpage

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

what’s css?

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)

types of style sheets

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

why external?

Cascading style rules are applied in order last definition takes precedence over the first

Order of priority 1 browser default lowest priority 2 external styles 3 internal styles 4 inline styles highest priority

characteristics

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.

linking a css file to your html file

<html>

<head>

<title>Document Title</title>


</head>

<body>

...

</body>

</html>

basic html webpage w/ link to css file

1 Create a text file and save it as styles.css

2 Add this line to your HTML, right before the </head> tag:


3 Start writing CSS rules in your styles.css file

linking your first file demo

syntax

There are many style properties, don’t worry about memorizing them!

Keep a reference open while coding (www.w3schools.com)

be prepared...

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: vocabulary

selector { property: value; property: value; }

css syntax


css syntax

selectoR is the html element these rules will change


css syntax

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

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

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; }

css syntax

Classes & ids

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

.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


#button1 { font-size: 12px; color: #ff0000; text-decoration: none; background-color: #ffff00; }



#button1 { background-color: #ffff00; }


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

color values

rgb value

hexadecimal (hex) value

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

css property: color

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

css property: background-color

typography

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

fonts

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

css property: font-family

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

css property: font-size

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

css property: font-weight

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

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; text-transform: uppercase; }

css property: text-transform

class 2: css selectors, classes & ids

Documents

css whats css

css rules

css syntaxselector

px color

property css syntaxsandwich

value property

css stands

css syntaxh1