Whim Internet Magazine

Web Composition Week 5

Jonelle Thackston | Graphics Manager

View Feedback | Send this Article | Published 3/07/03

Graphic By: Jonelle Thackston

If you would like to get a little more specific with the formatting or style of your webpage you can use cascading style sheets. Casscading style sheets (CSS) replace the need for using formating tags such as <i> for italics or <b> for bold. They can also be used for changing the size, color and alignment attributes. Using CSS gives you two big advantages over individual formatting tags. There are certain elements you can control with css but not individual tags, like most attributes for headings (<h1>) such as color. Two style sheets make universal formatting much easier, instead of making each paragraph 16pt foint, black and justified individually, you just type the specifications once and assign them to each paragraph.

There are three types of CSS: inline, document level and external. Inline style sheets are just like formating tags in the sense that they only govern what they are an attribute of, but they still can control as many factors as any CSS. Document level style sheets can control everything in the document they are in. This style sheet is placed in the <head> section of the HTML. External style sheets are external documents from your HTML files and can control all of them. You can have all three, or any combination, in use at once. Document level overrides external, and inline overrides document level style sheets.

Cascading Style Sheets

Text Style Text Layout Background Border

Margin Padding Page Layout Element Type

Text Style

color

This property sets the foreground color of an element. Essentially this means the text color.

font-weight

The weight of a font is how bold it is.

font-family

This property specifies a hierarchical list of preferred fonts that a browser should use to draw the element.

font-size

This lets you specify how large text appears on a web page.

font-style

This specifies the style of the font that is to be applied to an element.

text-decoration

This enables you to specify a number of effects that might be thought of as styles.

text-transform

This allows you to specify the capitalization of text.

Text Layout

letter-spacing

This property gives you control over the space between characters.

word-spacing

This gives control over the space between words.

line-height

This property sets the distance between adjacent lines.

vertical-align

This property gives control over how elements align vertically across the page.

text-indent

This enables you to control how the first line of any element is indented or outdented.

text-align

This allows you to specify how the contents of an element should be aligned.

Background

background-color

This specifies the color of the background of an element.

background-image

This specifies a background image to an element.

background-attachment

With this you can specify that the background image should not scroll, but rather remain fixed as the page scrolls.

background-repeat

This allows you to specify whether and how a browser treats background images when the width and height of the image is less than that of the element.

background-position

This can specify where a background image is placed.

background

This is a shorthand property that lets you set any or all background properties at once.

Border

border-top-width

border-right-width

border-bottom-width

border-left-width

border-width

These properties let you set the width of the respective edges individually or all at once.

border-color

This sets the color or colors of the borders.

border-style

This can give different styles to each edge of an element.

border-top

border-right

border-bottom

border-left

border

These five properties let you specify with one property any or all of the border-style, border-width and border-color values for each edge respectively, or the entire border.

Margin

margin-top

margin-right

margin-bottom

margin-left

margin

These properties set the size of the top, left, bottom, right and all margins, respectively.

Padding

padding-top

padding-right

padding-bottom

padding-left

padding

These properties set the size of the top, left, bottom, right and all paddings, respectively.

Page Layout

position

This is used to determine what the coordinates are with respect to, or how the element will be drawn.

top

This specifies where the top of an element will be placed.

left

This specifies where the left of an element will be placed.

bottom

This specifies where the bottm of an element will be placed.

right

This specifies where the right of an element will be placed.

width

This specifies how wide an element will appear on the page.

min-width

This allows you to specify a minimum width for an element.

max-width

This allows you to specify a maximum width for an element.

height

This enables you to specify the height of an element in a number of ways.

min-height

This allows you to specify a minimum height for an element.

max-height

This allows you to specify a maximum height for an element

z-index

This determines which elements will appear in front of others when they overlap.

visibility

This lets you make an element either visible or invisible.

overflow

This lets you specify how a browser should display an element where its contents do not all fit into its width and height.

float

This enables to take an element out of the flow and place it to the left or right of other elements in the same parent element.

clear

This can specify whether an element can have elements floated to its left, to its right, or at all.

clip

This makes it possible to show only part of the element at a time.

Element Type

display

This property determines the display type of an element.

white-space

This property applies only to block elements and specifies what should be done by the browser with extraneous whitespace such as tabs, returns, extra spaces and so on.

list-style-type

This property lets you determine what marker or bullet point, if any, is associated with a list item.

list-style-image

This lets you specify an image by URL as the marker (bullet point) for a list item.

list-style-position

This specifiyes the indentation style of the list items.

list-style

This is a shorthand property that allows you to specify and set all list style property values with one property.

Below is an example of an external style sheet and an HTML document that uses all three types of CSS.

External CSS

body
{
nbsp;nbsp;background: #ffffff;
nbsp;nbsp;color: #003300
}

p.normal
{
nbsp;nbsp;font-size: 18px;
nbsp;nbsp;text-align: justify
}

h2.tit1
{
nbsp;nbsp;text-align: center;
nbsp;nbsp;color: #ffffff;
nbsp;nbsp;line-height: 70px;
nbsp;nbsp;font-size: 50px;
nbsp;nbsp;background-color: #003300
}

p.close
{
nbsp;nbsp;font-size: 10px;
nbsp;nbsp;text-align: center
}

HTML

<html>
  <head>
    <title>Document Title</title>
    <link REL="StyleSheet" TYPE="text/css" HREF="web09.css">
    <style type = "text/css">
    
    </style>
  </head>
  <body>
    <h2 class="tit1">Happy Saint Patrick's Day</h2>
    <p class="normal">Every March 17th is Saint Patrick's Day,
    the most famous of all Irish holidays. Saint Patrick's Day is
    in honor of the man who converted Ireland to Christianity. Now
    and days in America, Saint Patrick's Day still holds some
    religious meanings in some circles, but is universally a
    celebration of Irish heritage and pride.</p>
    <img class="small" src="bagpipe.jpg" width="150" height="187">
    <p class="normal">Many major cities throw large parades, where
    you do not have to be Irish, <span style="font-style: italic;
    font-size: 21">to be Irish</span>. Everywhere you go you will
    see, <span style="font-weight: bold; color: #009900">Irish flags
    </span> and <span style="font-weight: bold; color: #009900">green
    beer</span>! Even all the cops badges seem to bear Irish surnames
    .</p>
    <img class="big" src="sodabread.jpg" width="196" height="196">
    <p class="normal">In addition to the parade there is a traditional
    Saint Patricks Day meal consisting of corned beef, cabbage, potatos,
    and carrots. This meal can be served seperatly, or as a sandwich
    on rye bread with brown mustard.</p>
    <p class="normal">Saint Patrick's Day is not strictly an Irish
    Holiday, there are many traditions involved with the whole Catholic
    faith. There is an Italian pastry called a Saint Joseph that is
    only made on Saint Patrick's Day. It is a puff pastry filled with
    your choice of custard or whipped cream and toped with glazed fruit.
    </p>
    <p class="close">This Page Designed by HOMELESS MEN INC.</p>
  </body>
</html>

Notice to call on the external style sheet in the <head> of your HTML document you need to put:
     <link rel=stylsheet type="text/css"
           href="THE URL OF YOUR EXTERNAL CSS">
     </link>
Cascading style sheets are the along the way to the future of the web. Once you understand how they work, look into picking up XML, a new web programming language that takes the concepts of CSS a step further. In the meantime, practice a little with them; you will find they are valuable time savers. If you would like to check to see if your external style sheet is valid there in a validator service provided at http://jigsaw.w3.org/css-validator/.

Related Articles & Links
Web Composition Week 1
Web Composition Week 2
Web Composition Week 3
Web Composition Week 4
Web Composition Week 5
Web Composition Week 6
Web Composition Week 7

Responses:
Refresh frame to view latest entries.

Name: John
Comments:
Awesome Jonelle! This would have come in handy two days ago when I was looking for how to code something in my stylesheet the other day. You're doing great with this series.
Name: Kevin
Comments:
your complexity continues to amaze me! thanks for writing :D