CSS Foundations pt 1: Structure, Style and Behavior

CSS Foundations, pt 1
22-3375 Web Design I // Columbia College Chicago

For Starters
!
!

Post assignment and blog post
Review student blog posts
Instructor review of Assign 3
HTML refresher exercise

!
!

Skills learned so far 

how to create a web directory and link between files
Code a basic webpage from scratch
how to mark up different types of content with appropriate HTML tags
how to use basic HTML attributes to create links and web images
how to set up a site domain, server host and install a wordpress site

Three layers of web design: 
Structure, Style, Behavior

BEHAVIOR
Javascript

PRESENTATION
CSS
Imagery

STRUCTURE
HTML markup
Site planning

Three layers of web design

Stylesheet 
A stylesheet is a set of rules defining 
how an html element will be “presented”
in the browser.
These rules are targeted to specific
elements in the html document.

The concept is very similar to how you create stylesheets in InDesign.

Cascading 
Most pages will have multiple stylesheets
that define different styles to the same
elements.
The cascade defines an ordered sequence
of style sheets where rules in later sheets
have greater precedence than earlier
ones.

low importance

Client (user) stylesheet 

Linked stylesheet 

high importance

Embedded stylesheet 

Inline Styles

Stylesheet 1 
make the paragraph 16px, Verdana, red 
Stylesheet 2 
make the paragraph blue 

16px, Verdana, blue

How to add css to your document

There are 2 basic ways to add styles to your html page: 

External (linked) 

<head>

Internal

External

 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
</head> 

Except in special circumstances, best practice is
to keep all your styles in a separate css document.
Linked stylesheets can be applied across multiple
documents and sites.

Internal (embedded)

 
<head> 
<style> p {color: red} </style> 
</head> 

You can add styles directly into your html page
using the “style” element in the <head> of
your document.
Embedded styles apply ONLY to that  
html document.

Internal (inline)

 
<p style=”color: red”>Red Text</tag> 

You can add styles directly into your html
markup using the “style” attribute on opening
tag of your element. This is called an “inline”
style.
Inline styles apply ONLY to that specific
instance of the element.

Best Practice 
In most cases you should use the external method of adding
styles to your html page.
Writing the css in the <head> of your document is acceptable
if you definitely only want to apply the styles to a single page.
However, adding your styles “inline” — inside a html starting
tag, e.g. <p style=”font-size: 14px”> — should be avoided.

CSS Syntax

Syntax = the rules for how to write the language

Three terms for describing your styles:

CSS rule
CSS selector
CSS declaration

CSS Rule

 
selector {property: value;} 
declaration 

Every style is defined by a selector and  
a declaration. The declaration contains at least
one property/value pair.Together they are
called a CSS Rule.

CSS Selector
body

 
{font-family:

Arial, Helvetica}"

p {color: #666666}"
h1 {font-size: 24px}"
a {color: blue} 

The selector associates css rules with  
HTML elements.

CSS Selector
p { 
color: red 
} 

 

 
The selector is typed in front of the declaration,
with a space separating it and the opening
curly-bracket (aka curly-brace).
Typically, extra spaces and returns are added as
shown for the sake of readability.

CSS Selector

 

h1,h2,h3,h4 { 
font-weight: bold 
} 

 

You can apply styles to multiple selectors in the
same rule by separating the selectors with
commas.

CSS Declaration

 

p { 
property: value 
} 

 
The declaration is always defined in a property/
value pair. The two are separated by a colon.
How you define the properties will affect how
HTML elements are displayed.

CSS Declaration

 
p { 
font-family: Arial, sans-serif; 
font-size: 14px; 
color: #666666; 
} 
 
You can apply multiple declarations to a
selector(s) by separating the delcarations with
semi-colons.

p

Type (element)

#

ID

.

Class
Descendant

Type (element) Selectors

 
body {declaration} 
p {declaration} 
h1 {declaration} 
ul {declaration} 

The simplest selector is the type selector, which
targets an html element by name.

The essential selector types (elements) 
Primary 
Structure

Body 
Elements

Formatting 
Elements

html

p

em

body

br

i

h1 – h6

strong

ul

b

ol

q

a

blockquote

img

span

div

Type selectors vs ID & Class selectors 
Type selectors use the tag names that are
built into HTML.

 

ID and class selectors use names that you
define, and are added to html elements
to make them more specific.

Class Selectors 
 
.ingredients {declaration}"
CSS

 
<ul class=”ingredients”> 
HTML

A class is an html attribute that is added to your
html markup. You reference that ID in your css
with a period.

ID Selectors 
 
#logo {declaration}"
CSS

 
<img id=”logo” src=”” alt=””> 
HTML

An ID is an html attribute that is added to your
html markup. You reference that ID in your css
with a hash.

IDs vs Classes 

The most important difference between IDs
and classes is that there can be only one ID
on a page, but multiple classes.
An ID is more specific than a class.
An element can have both an ID and
multiple classes.

IDs vs Classes 

ID: #344-34-4344
Class: Male
Class: Student

ID: #123-54-9877
Class: Female
Class: Student

Multiple classes 
CSS 

.ingredients.time {declaration}"
HTML 

<div class=”ingredients time”> 
<h1></h1> 
</div> 
 

Elements can have multiple classes, giving you
more control. The are written in the CSS in the
exact order they appear in the html, with no
spaces.

Combining IDs and classes 
CSS 

#wrapper.ingredients.time {declaration}"
HTML 

<div id=”wrapper” class=”ingredients time”> 
<h1></h1> 
</div> 
 

Elements can have both ids and classes. While
an element can have only one id, it can have
multiple classes.

Descendant Selectors 
 
.ingredients p {declaration}"
CSS

 
<div class=”ingredients”>"
HTML

<p></p>"
</div> 
A descendant selector is a selector that
combines the selectors of different elements to
target a specific element(s).

The Cascade
Inheritance
Specificity

The Cascade 
The “cascade” part of CSS is a set of rules
for resolving conflicts with multiple CSS
rules applied to the same elements.
For example, if there are two rules defining
the color or your h1 elements, the rule that
comes last in the cascade order will
“trump” the other.

low importance

Client (user) stylesheet 

Linked (external) stylesheet 

high importance

Embedded (internal) stylesheet 

Inline (internal) Styles

Inheritance & Specificity 
As a designer, your goal is to set an overall
global consistent style, then add in more
specific styles as needed.
You can control how and where your styles are
applied to your HTML by managing their
inheritance and specificity.

Inheritance 
Most elements will inherit many style properties
from their parent elements by default. A parent
is a containing element of a child.
HTML

"

 

<body> 
<div> 
<ul> 
<li></li> 
</ul> 
</div> 
</body> 

relationship

"

parent of site"
parent of ul and li, child of body"
parent of li, child of div and body"
child of ul, div, and body"

 

 

 

!

Inheritance 
body 
p 

16px, Verdana, blue

Not all properties are inherited

Specificity 
Shortly after styling your first html elements,
you will find yourself wanting more control over
where your styles are applied.
This is where specificity comes in.

 

Specificity refers to how specific your selector is
in naming an element.

Specificity 
If you have multiple styles applied to the same
element, the browser goes with whichever
selector is more specific. 

 

Male

Male 
Student  

Male  
Student 
George

Specificity 
body 
p 
p.pink 
make the paragraph pink 
16px, Verdana, pink

Where specificity gets tricky 
The basic concept of specificity is fairly simple:
you target specific elements in your HTML by
listing out more of their identifiers.
For example, if you want to apply a special
style to a paragraph, you need a “hook” in the
html to make it different from every other
paragraph.

This can get tricky in your css, because  
the more specific you make your selectors, the
harder it is to manage global styles
(inheritances).

Make all text pink.

body {color: pink} 

Make all text in the element with the id
“recipe” blue.

#recipe {color: blue} 

Make all text in the element with the class
“ingredients” blue.

.ingredients {color: green} 

Make all text in the paragraph element
with the class “ingredients” purple.

p.ingredients {color: purple} 

Make all text in the paragraph element
with the class “ingredients”, contained in
the element with the id “recipe”, grey.

#recipe p.ingredients {color: grey}"

HTML

 

<div id=”recipe”>  
<p class=”ingredients”> 
<div>"
CSS

 

body {color: pink} 
#recipe {color: blue} 
.ingredients {color: green} 
p.ingredients {color: purple} 
#recipe p.ingredients {color: grey}"

!

Property Values
color: #444444;
font-family: "Times New Roman", Georgia, serif;
font-size: 16px; (define in px, em, or %)

Style declarations are made of a property and
a value. The type of value you can use
depends on the property.

There are 5 basic ways of identifying fonts:

Web Safe Fonts 
(called font-family in your text)

Font-Face
Service-Based Font-Face
Images
sIFR/Cufon

Web-safe
Web-safe fonts are fonts likely to be present on a wide
range of computer systems, and used by Web content
authors to increase the likelihood that content will be
displayed in their chosen font.
If a visitor to a Web site does not have the specified
font, their browser will attempt to select a similar
alternative, based on the author-specified fallback
fonts and generic families or it will use font
substitution defined in the visitor's operating system.

from http://www.w3schools.com/cssref/css_websafe_fonts.asp

Font Stack
The font-family property can hold several font names as a
"fallback" system. If the browser does not support the first
font, it tries the next font.
Start with the font you want, and end with a generic family,
to let the browser pick a similar font in the generic family,
if no other fonts are available.

!
EXAMPLES 

body { 
font-family: Helvetica, Arial, sans-serif}"
h1 { 
“Lato”, Arial, sans-serif}

"

Units of Type Size
There are three different ways to define type sizes in css.
ems 
Ems are a relative unit: 1em is equal to the current font size.
The default text size in browsers is 16px. So, the default size
of 1em is 16px.
px 
Pixels are a an absolute unit, it sets the text to a specific size
instead of a size relative to the browser’s default. Except in
special cases, you should define pixels in your css with the
number and “px” together, no spaces: “16px”.
% 
Like ems, percentages are also a relative unit. It is very useful
for layout, not usually a good idea for type sizes.

Specifying Color
There are three different ways to define color in css.
Hex Codes 
This is the most common way to identify colors in CSS. The
code gives two characters to correspond to RGB values. The
number always has 6 characters (#44de42), unless all four
characters are the same, and you can shorten it (#444).
RGB 
You can use a color’s RGB values with this syntax:  
p {color: rgb(34,123,125);}
Color Names 
There are built-in color names that you can use, that will
provide generic hues:  
p {color: rgb(34,123,125);}

Specifying Color

!

Hexidecimal

RGB

Color: white, black, grey
White = #ffffff, or #fff
Black = #000000, or #000
Greys = #111111 – #999999

Type properties to learn now:
color
font-family
font-size
font-weight
font-style
letter-spacing
line-height
text-align
text-transform

Example values:
color: #444444;
font-family: "Times New Roman", Georgia, serif;
font-size: 16px; (define in px, em, or %)
font-weight: bold; (or by number, 400, 700)
font-style: italic;
letter-spacing: .02em;
line-height: 1.6; (relative to whatever your type size is)
text-align: left;

 

text-transform: uppercase;

List styling
Links can be styled just like any text, but have
special properties. The most often used is “liststyle-type”, which allows you to control whether
bullets are used, and how they are styled.
ul { 
list-style-type: none; 
padding: 0px; 
margin: 0px; 
}

!
!
!

List styling
By default, <li> elements are block-level elements
(they stack on top of each other). You can force
them to line up in a row by changing the display
property to “inline.”
li { 
display: inline; 
}

!
!
!

Link states
Links can be styled just like any text, but have
special pseudo-classes that allow you to define
their behavior.
a {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
When setting the style for several link states, there
are some order rules:
— a:hover MUST come after a:link and a:visited
— a:active MUST come after a:hover

!

Links
By default, links are underlined. You can turn this off by
changing the “text-decoration” property.
In the example below, the link will only have an underline
when the cursor is hovering over the element.
a { 
color:#FF0000; 
text-decoration: none; 
}
a:hover { 
color:#00FF00; 
text-decoration: underline; 
}

!

CSS Foundations pt 1: Structure, Style and Behavior

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie CSS Foundations pt 1: Structure, Style and Behavior

Ähnlich wie CSS Foundations pt 1: Structure, Style and Behavior (20)

Mehr von Shawn Calvert

Mehr von Shawn Calvert (12)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

CSS Foundations pt 1: Structure, Style and Behavior