CSS For Beginners

GRC 175
Web Design & Publishing I
What?
CSS, or Cascading Styles Sheets, is a way to style and
present HTML. Whereas the HTML structure is the
semantic meaning or content, the style sheet is the
presentation of that content.
CSS styles consist of property: value They can be
applied to most HTML tags. This is done in one of
three ways: inline, internally, and externally, via a
style sheet.
Application
The most basic application of CSS is to apply it inline
directly to an HTML tag via an attribute:
<p style="color: blue">Some text here.</p>
Applying this attribute would render this specific
paragraph in blue.
However, the best-practice approach is to separate
the HTML from the presentation. Imagine if you had
100 <p> tags where you wanted to change the color
from blue to a dark gray. Internally inserted styles are
used inside the head element of that page, and apply
directly to that page only. This is a way of separating
content (HTML) from presentation (CSS).
<!DOCTYPE html>
<html>
<head>
<title>CSS Test</title>
<style>
p{
color: #333;
}
a{
color: #999;
}
CSS for Beginners ...
The two previous examples would render all of the

paragraph text (in that page) in gray, and all of the
links in dark red.
This is preferable to complicating our HTML with
inline presentation; it's often used for testing
purposes with building a site, and for quick-fixes.
What about when you'd like to apply a style across
multiple pages? What if you had a site with over
100 pages? You would still have to manually correct
each page's style with the head of each document.
Thus, In-line styles should be avoided unless used for
testing purposes or for single-page sites.
External styles are used for entire websites. They
are applied by linking a separate CSS file within the
document head. Notice that the <link> is self-closing.
<!DOCTYPE html>
<html>
<head>
<title>CSS Test</title>
<link rel="stylesheet" href="style.css" />
</head>
Jump into Action

In a text editor, start a new file, and save the blank
document as style.css in the same directory as your
HTML file.
Save the HTML file, making sure that the filename is
the same as what you've specified in your <link> tag.
This now links to the CSS file, which is blank. Let's
add some styles to it. You can test your styles by
saving the CSS file (Command-S) and refreshing the
browser window containing your HTML file.
Selectors, Properties, and Values
</style>
</head>
For each selector there are properties inside curly

brackets, which examples such as color, font-weight
or background-color.
<style> tags are used in the document head to let the

browser know that anything between them is CSS,
and shouldn't be interpreted as HTML.
A value is given to the property following a colon.

Multiple properties for each selector are separated
with semi-colons.
Selector
body {
font-size: 12px;
color: #333;
}
properties, each
line separated with
semi-colon.
Closing curly bracket
When a value is zero, you do not need to state a unit.

For example, if you wanted to specify no border, it
would be border: 0.
If using em as your unit of measurement, it helps to
first define the font-size (which ems are based on).
The above examples will apply the given values to the

font-size and color properties of the body selector.
* { font-size: 12pt; }
When this is applied to an HTML document, text

inside the body tags (basically the entire page) will
be 12 pixels in size and dark gray in color. This is
called establishing a baseline style.
Color
Measurements and Percentages

There are many property-specific units for values
used in CSS, but there are general units that are used
by a number of properties and it is important to
familiarize yourself with these.
"Ems (em): The em is a scalable unit that is used
in web document media. An em is equal to the
current font-size, for instance, if the font-size of
the document is 12pt, 1em is equal to 12pt. Ems are
scalable in nature, so 2em would equal 24pt, .5em
would equal 6pt, etc. Ems are becoming increasingly
popular in web documents due to scalability and
their mobile-device-friendly nature.
Pixels (px): Pixels are fixed-size units that are used
in screen media (i.e. to be read on the computer
screen). One pixel is equal to one dot on the
computer screen (the smallest division of your
screens resolution). Many web designers use pixel
units in web documents in order to produce a pixelperfect representation of their site as it is rendered in
the browser. One problem with the pixel unit is that it
does not scale upward for visually-impaired readers
or downward to fit mobile devices.
Points (pt): Points are traditionally used in print
media (anything that is to be printed on paper, etc.).
One point is equal to 1/72 of an inch. Points are much
like pixels, in that they are fixed-size units and cannot
scale in size.
Percent (%): The percent unit is much like the em
unit, save for a few fundamental differences. First
and foremost, the current font-size is equal to 100%
(i.e. 12pt = 100%). While using the percent unit, your
text remains fully scalable for mobile devices and for
accessibility.
Colors in CSS can take the form of a name, an RGB

Value (red/green/blue) or a hex code.
Predefined color names include aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, orange,
purple, red, silver, teal, white, and yellow.
However, those color names have limited usage
because they are so specific and limiting.
Hexadecimal colors are generally used to define
colors in web design.
The hex number is prefixed with a hash character (#)
and is six digits in length. Three pairs make up the
six-digit value. The first value, expressed in RGB, is
red, the second green and the third blue)
Secondly, a three-digit version is also often used to
express these values. It's a compressed version of the
six-digit version, in situations where the hex code is
represented by repeating digits (#ffffff expressed as
#fff, #cc8844 as #c84, etc).
The most flexible way to express color in CSS is via
RGB values. The three values in the RGB value are
from 0 to 255, 0 being the lowest level, 255 being the
highest level. These values can also be a percentage.
CSS3 also allows you to define hue, saturation and
lightness in colors; more on that in another demo.
Colors can be applied by using color and
background-color properties.
h1 {
color: navy;
background-color: gray;
}
Save the CSS file and refresh your browser.
Fonts and Text

You can alter the size and shape of the text on a web
page with a range of properties.
font-family
This refers to the font itself, such as Times New
Roman, Arial, or Verdana.
text-decoration
This specifies text related to underlines and strikethroughs (used mainly for links).
text-decoration: underline;
places a line under the text (default for links).
The users computer needs to have access to the

font family that you specify. There are general fonts
that are safe to use (ones listed above, Georgia, Arial,
Helvetica, etc). Refrain from using obscure fonts,
which end-users will not be likely to access.
text-decoration: overline
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. You can
specify more than one font, separated by commas.
If the browser does not have access to the first font
you specify, it will scan the list until it finds a match.
puts a line through the text (strike-through).
This is useful when dealing with different operating

systems and default fonts. Ex:
text-transform
p{
font-family: "Times New Roman", Georgia, Serif;
}
There are two types of font family names:
family-name - The name of a font-family, like "times",
"courier", "arial", etc.
generic-family - The name of a generic-family, like
"serif", "sans-serif", "cursive", "fantasy", "monospace".
Start with the font you want, and always end with a
generic family, to let the browser pick a similar font in
the generic family, if no other fonts are available.
Important: If a font name contains white-space, it
must be quoted.
font-size
This relates to the size of the font. Examples:
font-size: 16px;
font-size: 1.5em;
font-size: 80%;
font-style
This property states italic text: font-style: italic;
places a line above the text.

text-decoration: line-through
text-decoration: none;
Eliminates the default underline on links.
This will change the case of the text.

text-transform: capitalize;
turns the first letter of every word into uppercase.
text-transform: uppercase;
turns everything into uppercase.
text-transform: lowercase;
turns everything into lowercase.
--------------------------------------------body {
font-family: "Arial", "Helvetica", sans-serif;
font-size: 16px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a{
}
strong {
}
Text spacing
The letter-spacing and word-spacing properties are
for spacing between letters or words. The value can
be a specific length or "normal."
The Box Model
Margins, padding and borders are all part of whats

known as the Box Model. It works like this:
The line-height property sets the height of the lines

in an element (leading), such as a paragraph, without
adjusting the size of the font. It can be specified
as a number (related to the font size), a length, a
percentage, or normal.
The text-align property will align the text inside an
element to the left, right, center, or justify.
The text-indent property will indent the first line
of a paragraph, for example, to a given length or
percentage.
p{
letter-spacing: 0.7em;
word-spacing: 1.5em;
line-height: 2;
The content area is surrounded by padding, which

is surrounded by the border, which is surrounded by
the margin. This relates to how elements display.
text-align: center;
}
Margins and Padding

Margin and padding are the two most commonly
used properties for positioning elements. A margin is
the space outside something, whereas padding is the
space inside something.
margin: 10px;
padding: 20px;
The four sides of an element can be set individually
(dreamweaver does this by default).
margin-left: 10px;
margin-right: 15px;
padding-left: 20px;
padding-bottom: 28px;
margin-top, margin-right, margin-bottom, marginleft, padding-top, padding-right, padding-bottom
and padding-left are the properties specified. These
values can also be specified in-order, clockwise (top,
right, bottom, left):
margin: 10px 15px 25px 20px;
padding: 20px 10px 22px 20px;
Borders
To create a border around an element, use the
border-style property. The values can be selected
from: solid, dotted, dashed, double, groove, ridge,
inset and outset.
The border-width property sets the width of the
border, most commonly using pixels as a value. There
are also properties for border-top-width, borderright-width, border-bottom-width and border-leftwidth.
Finally, the border-color property sets the color.
h1 {
border-style: dashed;
border-width: 2px;
border-left-width: 5px;
border-right-width: 5px;
border-color: #333;
}
This will render a gray dashed border around all
HTML headers (the h1 element), 2pixels wide on the
top and bottom and 5 pixels wide on the left and
right (overriding the 2 pixel width of the entire border
since they are specified after).
So What Now?
The code below covers all of the CSS methods
discussed this week. If you save your CSS file and test
& preview the HTML file, you should now begin to
understand what each CSS property does and how
to apply them.
h3 {
color: #999;
font-size: 1.25em;
}
img {
body {
font-family: "Times New Roman" ,Georgia, Serif;
font-size: 16px;
color: #333;
background-color: #f1f1f1;
margin: 15px;
padding: 0;
}
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
a{
}
p{
line-height: 2;
strong {
font-style: italic;
h1 {
color: #122b64;
font-size: 2.5em;
margin: 0;
margin-bottom: 7px;
padding: 5px;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #c00;
}
li {
color: #1b2e1e;
font-style: italic;
}
table {
background-color: #fff3bc;
}
h2 {
color: # 330000;
font-size: 1.5em;
margin: 0;
padding: 2px;
padding-left: 10px;
}
/* CSS Comment expressed like this */

CSS For Beginners

Uploaded by

Copyright:

Available Formats

CSS For Beginners

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS For Beginners

Uploaded by

Copyright:

Available Formats

What are the different ways to apply CSS?

What are the different ways to apply CSS?

What are some common CSS properties for text formatting?

What are some common CSS properties for text formatting?

GRC 175

Web Design & Publishing I

CSS for Beginners ...

The two previous examples would render all of the

Jump into Action

Selectors, Properties, and Values

For each selector there are properties inside curly

<style> tags are used in the document head to let the

A value is given to the property following a colon.

When a value is zero, you do not need to state a unit.

The above examples will apply the given values to the

When this is applied to an HTML document, text

Measurements and Percentages

Colors in CSS can take the form of a name, an RGB

Fonts and Text

The users computer needs to have access to the

The font-family property can hold several font

puts a line through the text (strike-through).

This is useful when dealing with different operating

places a line above the text.

This will change the case of the text.

The Box Model

Margins, padding and borders are all part of whats

The line-height property sets the height of the lines

The content area is surrounded by padding, which

Margins and Padding

/* CSS Comment expressed like this */

You might also like