CSS Fundamentals: External, Embedded & Inline Styles

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


CSS Fundamentals: External, Embedded & Inline Styles

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CSS Fundamentals: External, Embedded & Inline Styles

Similar to CSS Fundamentals: External, Embedded & Inline Styles (20)

More from UC Berkeley Graduate School of Journalism

More from UC Berkeley Graduate School of Journalism (9)

Recently uploaded

Recently uploaded (20)

CSS Fundamentals: External, Embedded & Inline Styles