Session 2: CSS: Selectors, Classes & Ids

Session 2
css: selectors,
classes & ids
HTML + CSS Workshop
Instructor: Erika Tarte
Rhode Island School of Design
Spring 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 lowest priority
2 external styles
3 internal styles
4 inline styles 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>
</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:
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 { Selector is the html element these rules will change
property: value;
property: value;
}
css syntax
selector {
property: value; Propert y is a display characteristic you are writing a
rule for. Each selector can have multiple properties, and
property: value; some selectors have very specif ic properties.
}
css syntax
selector {
property: value; Value is the display characteristic that you want to apply
to the property
property: value;
}
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

<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;
background-color: #ffff00;
}
<a href="http://google.com" class="button">Link</a>
<a href="http://google.com" class=”button” id="button1">Link</a>

.button {
font-size: 12px;
color: #ff0000;
}
#button1 {
font-size: 12px;
color: #ff0000;
}
.button {
font-size: 12px;
color: #ff0000;
}
#button1 {
font-size: 12px;
color: #ff0000;
}
.button {
font-size: 12px;
color: #ff0000;
}
#button1 {
}
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;
font-family: Akkurat, Helvetica, sans-serif;
}
css property: font-size
h1 {
color: #ffffff;
font-size: 72px;
}
css property: font-weight
h1 {
color: #ffffff;
font-size: 72px;
font-weight: normal;
}
css property: letter-spacing
h1 {
color: #ffffff;
font-size: 72px;
letter-spacing: 4px;
}
css property: text-transform
h1 {
color: #ffffff;
font-size: 72px;
letter-spacing: 4px;
text-transform: uppercase;
}
ONE LAST INGREDIENT
spans & divs
Spans and divs are HTML tags (<span></span> and <div></div>)
They give you more control over the presentation layer of your website
Spans are used within grouping elements
Divs are grouping elements

spans & divs
<div id=”header”>
<h1>Name of Website</h1>
</div>
<div id=”articles”>
<h2>Article Title</h2>
<p>Paragraph of text</p>
</div>
spans & divs
<h1>Name of Website</h1>
</div>
<p>Paragraph of <span class=”highlight”>text</span></p>
</div>
spans & divs
<h1>Name of <span class=”highlight”>W</span>ebsite</h1>
</div>
<p>Paragraph of <span class=”highlight”>text</span></p>
</div>

Session 2: CSS: Selectors, Classes & Ids

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Session 2: CSS: Selectors, Classes & Ids

Încărcat de

Drepturi de autor:

Formate disponibile

Session 2

Some information happens in external files, like CSS and JavaScript.

We link to these files in the head of the HTML document.

CSS Stands for Cascading Style Sheet

HTML tells us what to display

Simple text file

defined within an individual tag

defined at the top of each individual page

defined once for your whole site

Central definition of visual style

Developers and designers can work independently

Same content can be restyled for lots of different media

<link rel=”stylesheet” type=”text/css” href=”styles.css” />

Tells browser to include a style sheet called styles.css

<link rel=”stylesheet” type=”text/css” href=”styles.css” />

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

<link rel=”stylesheet” type=”text/css” href=”styles.css” />

3 Start writing CSS rules in your styles.css file

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

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

selector { Selector is the html element these rules will change

No inherent styles or properties

Different elements can share the same class

IDs are unique, and different elements can’t share them

<a href="http://google.com" class="button">Link</a>

<a href="http://google.com" id="button1">Link</a>

<a href="http://google.com" class="button">Link</a>

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

rgb (red, green, blue)

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

Spans and divs are HTML tags (<span></span> and <div></div>)

Spans are used within grouping elements

Divs are grouping elements

<p>Paragraph of <span class=”highlight”>text</span></p>

<h1>Name of <span class=”highlight”>W</span>ebsite</h1>

<p>Paragraph of <span class=”highlight”>text</span></p>

S-ar putea să vă placă și