Intro to CSS

Cascading Style Sheets
UC Berkeley Graduate School of Journalism

Tuesday, March 15, 2011

CSS fundamentals

• CSS is for styling an HTML document.
• CSS can affect fonts, sizes, colors,
backgrounds, spacing, borders, and more.
• CSS is its own language, with its own syntax.


Where is CSS kept?


One of three ways

1. Loaded in a separate document.
2. Speciﬁed in the <head> tag of the HTML
document.
3. Speciﬁed directly in the HTML tags
themselves.


One of three ways

• External Style Sheets
• Embedded Style Sheets
• Inline Style Sheets


External Style Sheets
<head
lang="en">

<meta
charset="utf-‐8">

<title>This
is
my
title</title>

<meta
name="description"
content="This
is
an
example
of
my
webpage">

<meta
name="author"
content="Jeremy
Rue">

<link
rel="stylesheet"
href="css/style.css">

</head>


External Style Sheets
• The best way to include CSS in a
document.
• The only drawback (and it’s a small one) is
that if the style sheet is separate, therefore
if it ever gets deleted then the page won’t
look right.
• Most general method of including styles.

Embedded Styles
<head
lang="en">

<meta
charset="utf-‐8">

<title>This
is
my
title</title>

<style
type="text/css">

h1
{color:red}

p
{color:blue}

</style>

</head>


Embedded Styles
• Will override any similar rules from
external style sheets.
• Sometimes this is used because you want a
single page to have some different styles
that the rest of your website.
• Styles stay with the HTML page, because it’s
a part of the page.


Inline Styles

<body>
<header>
<h1
style=“color:red”>Hello
World</h1>
</header>
</body>


Inline Styles
• The worst way to include CSS in a
document. Avoid if possible.

• Sometimes it can be needed, because you
are working in a system where you just
need one speciﬁc element, in a single
webpage, to look a certain way and you
don’t have access to the style sheets.


Syntax


Parts of CSS element

body
{
font-‐size:
12px;
color:
#000000;
}



body
{
font-‐size:
12px;
color:
#000000;
}

This is the SELECTOR. It is specifying the part
of the page that will be affected by the style.


body
{
font-‐size:
12px;
color:
#000000;
}

These are PROPERTIES. There are a number
of deﬁned properties that you can change.


body
{
font-‐size:
12px;
color:
#000000;
}

These are VALUES of the property.


body
{
font-‐size:
12px;
color:
#000000;
}

A COLON separates the
properties from the values.


body
{
font-‐size:
12px;
color:
#000000;
}

A SEMI-COLON ends each line of code.


body
{
font-‐size:
12px;
color:
#000000;
}

Note the CURLY BRACKETS, one opens
and the other closes.

font-family
• Speciﬁes a family of fonts to use. Create a
list of fallbacks should the user not have the
font installed.
• Put font names with more than one word
in quotes.
• Example:
font-‐family:“Times
New
Roman”,
Times,
serif


color
• Speciﬁes the color of text.
• Specify one of three ways: Hexadecimal,
RGB or simple names. We will use
hexadecimal.
• Example:
color:#aaf999


font-size
• You should use either px or em.
• PX stands for pixels, and is a ﬁxed font size
in Internet Explorer.
• EM is a relative size, and is based on the
default font size of the browser.
• 1 em = 16 px in most browsers.
• font pixels/16 = the size you want.

EXAMPLE

body
{
font-‐family:“Palatino
Linotype”,

“Book
Antiqua”,
Palatino,
serif;
color:
#eeeeee;
}


background-color

• Speciﬁes the background color of an
element using the same color units as
color. We use hexadecimal.
• Example:
background-‐color:
#f5f5f5;


Base Styles
• Base styles means when you apply a
style to an element, like h1, h2 or p.
• Applies to that element throughout the
document.
• Example:
h1
{

font-‐family:
Helvetica,
Arial,
sans-‐serif;
}


Grouping (selectors)

• If you want to apply a style to multiple
elements, use a comma.
• Example:
h1,
h2,
h3
{

font-‐family:
Helvetica,
Arial,
sans-‐serif;
}


Nested (Selectors)
• If several base elements are listed with a
space, it means only elements that are
descendants of the ﬁrst element.
• Example:
article
h1{

font-‐size:
1.2
em;
}


IDs vs Classes


IDs and Classes

• IDs allow you specify speciﬁc elements in
an HTML document. Each ID can only be
speciﬁed once.
• Classes allow you to specify a group of
elements in an HTML document.You can
use a class an unlimited number of times.


IDs
• Each unique ID can be applied only once
to a document.
• HTML attribute example:

id=“copyright”

• CSS example:
#copyright
{

font-‐style:italic;
}

Classes
• Classes can apply to any number of
elements. Use classes to group elements to
your own grouping method.
• HTML example:
class=“headlines”

• CSS
example:

.headlines
{

font-‐size:
1.2em;
}

Selectors
• There are lots of ways to specify the
elements you are trying to style.
• The most common: 1) base style 2)
descendants 3) IDs/classes

h2
{
color:#000000;
}

h2
p
{
color:#000000;
}

#firstpost
{
color:#000000;}

CSS Box Model


The Box Model

<div
id=“content”>
<p>Some
content
inside
the
box</p>
</div>


The Box Model

• Margin - Clears an area around the border. The
margin does not have a background color, it is
completely transparent

• Border - A border that goes around the padding
and content.

• Padding - Clears an area around the content.

• Content - The content of the box, where text
and images appear


The Box Model
• A DIV’s default height is defined by it’s
content.
• A DIV’s default width is defined by it’s
parent’s width.
• When width and height are defined, the
content will “overflow” if it’s larger than
the size of the box.


The Box Model
#content
{
border:
10px
solid
#98bf21;
margin:
15px;
padding:
10px;
width:
300px;
height:
300px;
}

250 px


Box Model

The width and height properties only deﬁne the
size of the content area.


Assignment: Cookie Recipe
1. Find a cookie recipe online. Anything will do.
2. Include a photo, ingredients and directions
and headline.
3. Make sure you style the:
i. Fonts
ii. Colors
iii. And group it all in a box


Intro to CSS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Intro to CSS

Similar to Intro to CSS (20)

More from UC Berkeley Graduate School of Journalism

More from UC Berkeley Graduate School of Journalism (9)

Recently uploaded

Recently uploaded (20)

Intro to CSS