Introduction to CSS

Dr. Will Kurlinkus

[English Kurlinkus] resource page:

http://www.w3schools.com/css/default.asp

INTRO CSS
page 2

CSS Intro

CSS stands for Cascading Style Sheets; it formats how your HTML elements are
displayed: For example, see: http://www.w3schools.com/css/demo_default.htm
CSS gives you the ability to change the look of your entire website through one style
sheet and cuts down on the redundancy of html coding, making websites faster.
A CSS rule goes in the head of your html document (as compared to the html of the
body) or goes in an external style sheet (see pg. 6-7 below) and has two primary
parts: a selector and a declaration block.

Selector: the selector points to what you want to style. The most basic type
selector, as shown in the example above, is the element selector, which shows
that you want to change the style of a basic html element.
Declarations: Declarations are made up of property/value pairs.
o There can be more than one declaration in each declaration block.
o Each declaration must end in a semicolon and exist inside a pair of curly
brackets.
o Designers usually write each selector element on its own line, like this:
h1{
color: blue;
font-size: 12px;
}

There are two basic ways to add CSS: External Style Sheets (which well get to
later) and Embedded Style Sheets.
o Embedded Style Sheets occur in the head area of your document and are
formatted:
<style type=text/css>
/* style rules go here */
</style>

INTRO CSS
page 3

Formatting Text in CSS:

http://www.w3schools.com/css/css_font.asp

Font
o
o
o

Family: Lets you choose a typeface

h1 {font-family: Arial}
h1 {font-family: Trebuchet MS, Verdana, sans-serif;}
Font names should be capitalized; font names with spaces in them like
Trebuchet MS should be encased in quotation marks.
o Also note that you should set backup fonts, not all browsers have all the
fonts you may want to use, so you can set up a more specialized font like
Trebuchet MS, and if your users browser doesnt have that font, it will use
the second font listed, Verdana. If not Verdana, it will use whatever the
browsers default sans-serif font is.
o In general, then, its always best to set three fonts: your first choice, a
similar font, and, finally, a font family. Its always best, too, to use fonts
youve heard ofTimes New Roman, Georgia, Trebuchet, Verdana, Courier,
Andale Mono, Arial, Helvetica, Courier, Comic Sans.
o The most popular web-font for long texts are verdana and georgia

Font Size: You can specify font size in a few ways. Im going to show you the four
easiest waysI generally use ems or percentages.
o Using percentages sized up or down: h1 {font-size: 150%;}
o Using absolute words (xx-small, x-small, small, medium, large, x-large, xxlarge): h1 {font-size: large;}
Medium is generally the default font size.
o Using relative words (larger or smaller) to nudge the text slightly larger or
smaller: h1 {font-size: larger;}
o You can also set font size using pixels or ems16px=1em. h1{font-size:
16px;}
The preset font size for paragraphs in a browser is 16px or 1em
If youre wondering, the em is a unit from old school printing that
measures the height of the capital letter M.

Font Color: Change the color of the font with the color property: h1 {color: gray;}
o Tip: Dont get too fancy with font color in long text. Black is a safe bet.
o You can either use color names red, blue, aqua or hexadecimal numbers
h1 {color: #F0F8FF}. You can find both of these using the eyedropper tool

INTRO CSS
page 4

in photoshop or using many online tools, such as:

http://www.w3schools.com/tags/ref_color_tryit.asp?hex=F0F8FF
Font Weight: changes the boldness of a font: normal, bold, bolder, lighter
o h1 {font-weight: bold;}
Font Style: adds italics: h1 {font-style: italics;}
Text Alignment: You can align text for web pages just like in a word processor
using the text-align property: left, right, center, justify
o h1 {text-align: left}
Decorations: text-decoration: underline, overline, line-through: p {text-decoration:
underline;}
Capitalization: text-transform: none, capitalize, lowercase, uppercase: p {texttransform: capitalize;}
Indentation: p {text-indent:50px;}
Others to font properties to Google: text-shadow (adds shadow); text-transform
(small caps, etc.); vertical-align (raise special characters like the nd in 2nd);
word-spacing (amount of white space between words); line-height (the amount of
white space between lines)
The font property lets you combine the size and class elements (and some other
elements not discussed here) into one. You need to have at least the size and
family values and have to put them in this order: {font: style weight size family;}.
Each value is separated by a space
o h1 {font: 45px "Century Gothic", Verdana, sans-serif;}

Other Selectors:

Remember that the beginning of a CSS rule is called a selector. Some useful
selector types to know are:
Tag selectors: big elements like h1, p, em, etc.these style all these tags
throughout the document.
Grouped selectors (so you can change more than one html element at once): p,
u, l, h1, td {color: navy;}
Descendent selectors (these let you target a specific type of one selector); you
can see these at play in the listamatic navbars at the end of this sheet:
o li em { color: olive; }

INTRO CSS
page 5

o In the above selector grouping, the two selectors are separated by a single
space. This selector tells the browser that only emphasized text that
appears in list items should be turned olive green.
o h1 em, h2 em, h3 em { color: red;}
This selector is telling the browser that emphasized titles should all
be turned red.
o Note that you can have more than two layers of descendent selectors.
Id selectors: remember back to the concept of divs and spanss (see HTML intro).
They let you make up your own html elements, basically titling them whatever you
wanted in this form:
o <div id=uniquename>your text</div>
o To format that div in the style sheet of your document, you would then
write #uniquename {color: red;}
o You can also use id selectors contextually so that only specific elements in
your div section change. For instance, suppose I were changing my sidebar,
which I had named <div id=sidebar>. If I only wanted to change how lists
appear in my sidebar, I could write in my style sheet #sidebar li { font: red;
}

o Finally, id selectors dont only have to be used with divs: you

can use id selectors for any element so that CSS gets only applied to that
specific id. For instance, if I wanted to style one paragraph different from
all my other paragraphs, in my HTML I would write <p id=specialp></p>
and in my CSS I would write p#specialp {color: red;}
In selectors, the more specific selector always wins. So a descendent selector
would win out over a regular selector. So, in the following, your h1 strong
elements would not be red; they would be blue.
o Strong { color: red; }
o h1 strong {color: blue;}
Class selectors: Class selectors work in the same way that div selectors do,
however, where div selectors are unique and can be only used to style 1 element
per page, class selectors can be used to style numerous elements. For instance, if
I had numerous text boxes that I wanted to look the same on one page, I would
use a class selector, rather than a div. In HTML a class selector looks like <p
class id=whatevername></class> in CSS a class id begins with a period. like
.whatevername {font: red;}

INTRO CSS
page 6

Colors and Backgrounds

Specifying color: The two main ways to specify a color value are either to write a
color name (color: red; color: olive; color: blue) or to use the RGB code (color:
#FF000). To find the RGB code, the photoshop eyedropper tool is especially
useful, but numerous sources online will also help you. For instance:
http://www.w3schools.com/cssref/css_colors.asp
Foreground color: changes the foreground color of any element. Things in the
foreground include: text, borders, lines, etc. Foreground color only needs to be
called color as a property to {color: blue;} automatically sets the font color as
blue
Background Color: changes the background color of a specific element (or the
entire page if you choose). For instance, you can set the background color for the
entire body element. body {background-color: blue;}
Pseudo Class Selectors: applies styles to various states of other elements. For
instance, once a link has been clicked by a user it will appear as a different color.
These are especially useful for navigation bars. Note: in your style sheet if you
want to use all four, they must appear in this order:
o a:linkapplies a style to the unclicked/visited link
o a:visitedapplies a different style to clicked/visited links
o a:hoverapplies a style when the mouse pointer is hovering over a link
o a:active applies a style while the mouse button is pressed
a:hover {color: maroon; text-decoration: underline}
so when someone hovers over the link it will turn this color
note that this hover feature is available for all
o :first-line: changes the first line of a specified element into something
o :first-letter: changes the first letter of a specified element into something
you designate (For instance, think about the big fancy first letters in some
childrens books)
p:first-letter {font-size: 300%; color: orange;}
Background Images
o background-image: the primary job of the background-image property is to
provide the location of the image file you want to use. You can apply
background images to the entire body of your site or just to one section
(like the header). Remember to use the same image location tips from the
html guide. The default setting for a background image is starting in the

INTRO CSS
page 7

upper left hand corner and tiling left and down. If you put a background
image in a div box that is the same size as the image, it wont auto repeat.
Currently, the standard size for a background image is 1024x768
Body {background-image: url(images/star.gif);}
Background-repeat: lets you change the behavior of how the tiling of the
background image shows uprepeat (full page is tiled), repeat-x (only one
line of images will appear horizontally across the top), repeat-y (only one
line of images will tile down the left side of the page), no-repeat (only one
image will appear)
Body {background-image: url(/images/star.gif); background-repeat:
repeat-y;}
Background-position: specifies where the origin point of your tiling will
beginleft, center, right, top, bottom. You can also use the keywords in
pairs like: left bottom; right center;
You can also use length measurements in pixels or percentages. The
standard background position is 0% 0% meaning start in the left top
corner. So, if you type {background-position: 50% 50%;} the image
should be placed in the center of the page.
Background-attachment: specifies if you want the background to stay fixed
while your text scrolls over it. The default is that the backround will scroll
with the page. But if you want to play with this element you can turn it on
to fixed {background-attachment: fixed;}
Shorthand Background Property: Lets you combine all your background
stuff into one element (just like the font property).
Body {background: black url(will.jpg) no-repeat right top fixed;}
Safety Color: it is common practice to set a safety background color
underneath your background image just in case something goes wrong with
the image. So, set a safety color that is similar to the main color of your
background image (its similar to the safety fonts discussed above).

Creating an External Style Sheet

So far, weve been using internal style sheetsall our xhtml and css have been in the
same document. But its common practice to use external style sheets when creating
websites because these stylesheets can be linked easily to multiple pages and they
also make your code slightly more manageable. Theres two ways to do this.

INTRO CSS
page 8

First, create a new plain text document. Copy and paste all your style rules
into it (make sure no element tags got in by accident). Save this new file as
whatever.css and save it in the same directory/folder as the rest of your
website files.
Next either type a link element in the header of your html document.
<head> <link rel="stylesheet" href="kurlinkus.css" type="text/css">
</head>

Or use an @import inside the style rule in your header

<head>
<style type=text/css> @import url (http://path/whatever.css);</style>
</head>

Box Method
Box method is one of the most fundamental web design styling tips. It assumes that
every element you add to your web page generates its own box which has its own
width, height, padding, borders, and margins that can be applied to it.

Dimension=Width and height: Adjust the width and height of a block-level (not
in-line) element (images, divs, headers, paragraphs, etc.). Both width and

INTRO CSS
page 9

height are measured by the same specific pixel measurements or percentage

of your page as other things weve discussed have been measured.
o p {width: 400px; height 100px; background: #C2F670}
o Generally people only specify width and not height because height will
be dictated by the written content (for instance, how much text) of your
element. So if you set the width to 100px once your text extends beyond
100px it will wrap around and form a new line and create more height.
Overflow: You can, however, decide what to do if the content of your box is too
much for the width and height you set to handle by using the overflow
property. The overflow values are: visible, hidden, scroll, auto. See more below

Layout

Max-width: the max width property is used to make sure your boxes dont
keep spreading forever on a really large monitor, especially if you are using
percentages. Min-width does the same thing, so that if youre screen shrinks
youre side nav bar doesnt get unreadably small, for instance.
Percentages: Contemporary web design more and more relies on percentages
rather than pixels. Percentages set your boxes in relation to a percentage of
real estate on your screen so your website can grow and shrink depending on
the size of the screen (big monitor vs. cell phone). Percentage is based on the
box the element is in not necessarily the entire screen.
The standard size you want to fit all your boxes inside is 100%. So, its
generally a good idea to begin by creating a div that is that sizeor start by
creating a background image of that size. You can call this div something like
<div id=container></div> in your html file and, thus, #container {} in your
CSS file.
Content dimensions: to set the size of your different boxes use width and
height properties. Thus, if I wanted to create the 100% div container, I
would write in the stylesheet:
#mainbox {
width: 95%;
min-height: 100%;
max-width: 930px;
background-color: #696969;
}

INTRO CSS
page 10

Overflow: But, what if we created a content box that was smaller than the
content we wanted to put into it. If the box is too wide sentences just wrap
around, but what if the box we created was too short? We have a couple
options using the overflow property {overflow: visible, hidden, or scroll}

Padding: Padding adjusts the size of the space between the content and the
border of the content. Padding is one of the ways you can center text.

o You can pad on the top, bottom, left, and or right.

o p {padding-left: 50 px; padding-right: 50px }
o You can also combine all your padding into one declaration in this order
p {padding: top right bottom left}

Margins: Margins are one way in which you can move your elements around
on a page. Margins are like invisible padding on the outside of boxes. Padding

INTRO CSS
page 11

is done using the same measurements as padding. p {margin: top right

bottom left} For instance, the white box in the following image was positioned
with CSS that looks like this:
#content{
background-color: white;
height: 100px;
width: 100px;
margin: 200px 0 0 400px; }

Navigation Bar Tutorial

Step by step navigation bar tutorial at:

http://css.maxdesign.com.au/listutorial/horizontal_introduction.htm