inls 461
Information Tools

Professor: Serena Fenton
School of Information and Library Science at UNC-Chapel Hill

sample css assignment

Internal or embedded style sheets,
... a few clarifications:

An internal stylesheet is just a stylesheet that has been placed in the <head> section of a html page, rather than being linked. You could almost think of it as being another metatag in the head section. All the style specifications occur within the <style> tags.

Textbook: Visual Quick Start HTML and css describes internal (embedded) style sheets on page 151.

w3c.org's definition of Internal Style Sheet:
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:

<head>
<style type="text/css">
hr {color: sienna}
p em { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
body {background-image: url("images/back40.gif")}
</style>
</head>

The browser will now read the style definitions, and format the document according to it.

A clear and somewhat in-depth explanation of div, class, span and id is available at: Web Design Group's Linking Style Sheets to HTML.

Please try these resources!

W3c's interactive css demo (hmmm... stealing this css might not be a bad idea)

w3c's style examples - each style example links to a playground page where you can create and tryout your own styles and then see them displayed in a mouseclick! Try this:

  1. Open the color scheme generator in one window
  2. Open the Try-it page for background color
  3. pick a color scheme in the color scheme generator
  4. Copy the hexidecimal number into the try-it pagefor the attribute: body {background-color: (remember to include the #)
  5. Click the button that says "edit text and click me"
  6. Admire your new color.
  7. Copy the background color specification and paste it into the <style> section of your page.
    Example:

<style type="text/css">
body {background-color: #BDBDD9}
h1 {background-color: #F2DA79}
h2 {background-color: transparent}
p {background-color: #B30000}
</style>

Some simple css style sheet examples:

Math Sciences Computing Facility - University of Kentucky

Advanced css tools:

layout-o-matic (generates layout in columns)

listamatic (html and css for a wide variety of list styles. Check out this colorful one !

 

revised December 6, 2006