Training

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

±Arrows Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

Web Design

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

Cascading Style Sheets (CSS)

CSS or Cascading Style Sheets control the look of a webpage or website. Zen Garden does an outstanding job of showing what can be done with css.

Learning CSS

Step 1: HTML

You will need to start with a HTML file and some content. You can copy and paste this code into your text editor to get started.

Top of Page

Step 2: Starting CSS

Once you have some content to your web page, you may want to add some color. CSS can be used for adding color, font sizes, mouseover changes as well as positions. There are two options to setting up a cascading style sheet.

  1. CSS uses the <style type="text/css"> </style> tag. This tag should be placed in the HTML code in the <head> </head> tag after the <title></title> tag.

    2. <style type="text/css">
    <!--
    body {
    color: purple;
    background-color: yellow;
    }
    -->
    </style>

  2. Linking to a Cascading Style Sheet - To use the same style sheet for all of the pages in your website, you can create a file and link to it. The link tag should be placed within the <head></head> element of your web page.

<link rel="stylesheet" type="text/css" media="all" href="css/testCSS.css" />

  • rel - must be set to "stylesheet" for the browser to recognize that the href attribute gives the URL for your style sheet.
  • type - must be set to "text/css"
  • href - location of your style sheet

The content in the locationofCSSfile.css may look like:

body {
color: purple;
background-color: green;
}

Syntax

selector {property:value}

The selector can be:

  • the HTML element/tag you wish to change
  • the class selector is used to define different styles for the same type of HTML element
  • the id Selector defines styles for the id and uses a #.

Cascading Style Sheets are used to set style properties for the document's tags. The style elements must be enclosed in braces { }.

Comments

It is a good idea to add comments to your style sheet expecialy when you first start using them. Comments must start with /* and end with */.

/*
*******************************************
This is the comment section.
It can be one or more lines
*******************************************
*/

Changing the Color of the Text

Color Blindness - When using color, remember that 5 to 10% of men have some form of color blindness which can cause difficulties distinguishing between red and green, or between yellow and blue. In rare cases, there is an inability to perceive any colors at all. You are recommended to avoid foreground/background color combinations that would make the text hard to read for people with color blindness.

Select the tag that you want to change the color of the text. For this example: we will use the body tag. Remember that the <body></body> tag wraps all of your HTML code that will be seen in your browser except the <title> tag. The background color can be specified by:

  • hexadecimal code - #ff0000
  • name - a color name like "red"
  • RGB - rgb(255,0,0)

body {
color: purple;
}

Background Color

Select the tag that you want to change the background color.

background-color: yellow;

Fonts

You can specify the font. Many fonts are not available on everyone's computer/browser. To make sure you know which font will be used, you are allowed to list several fonts in preference order. Some fonts are guaranteed to be available, so you should end your list with one of these: serif, sans-serif, cursive, fantasy, or monospace.

font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;

Font size

Font size may be sent in pixels or in percentages relative to the size used for normal text.

font-size: 200%;

Text Alignment

h1 {text-align:center}
p {text-align:right}

Box Format

Margins

The margin is the space around an item.

margin-left: 10%;
margin-right: 10%;

  • margin-left 10% This sets both margins to 10% of the window width, and the margins will scale when you resize the browser window.

Shorthand Property

Iit is also possible to specify all the properties in one single property to shorten the code.
For example: The margin can be set using one command starting with the top margin of 10 pixels, right margin of 15pixels, the bottom margin of 5 px and the left margin of 20 pixels.

margin: 10px 15px 5px 20px;

Borders

You can add a border around a heading, list, paragraph or a group of these enclosed with a div element. For instance:

border-style:dashed;
border-color:#009;
border-width:thick;

Padding

Padding is the distance around an object.

padding: 10px 15px 5px 20px;

Padding can be set using one command starting with the top margin of 10 pixels, right margin of 15pixels, the bottom margin of 5 px and the left margin of 20 pixels.

The em is a very useful unit as it scales with the size of the font. One em is the height of the font. By using em's you can preserve the general look of the Web page independently of the font size. This is much safer than alternatives such as pixels or points, which can cause problems for users who need large fonts to read the text.

Points are commonly used in word processing packages, e.g. 10pt text. Unfortunately the same point size is rendered differently on different browsers. What works fine for one browser will be illegible on another! Sticking with em's avoids these problems.

Step 3: Making Changes

Use the examples above to change your html code.

Customizing Your Changes

You may want to have a customized part of your page. You can add a class element that can be added to any tag.

In the HTML code above you see the

<ul class="navbar">

This tells this <ul> tag to use the following code from the css file.

.navbar {
position: absolute;
top: 20px;
left: 20px;
width: 150px
}

  • Position
    • Static - HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.
    • Fixed - An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled. Fixed positioned elements can overlap other elements.Note: Internet Explorer supports the fixed value only if a !DOCTYPE is specified.
    • Relative - A relative positioned element is positioned relative to its normal position. The content of a relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
    • Absolute - An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>. Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements.
    • Overlapping Elements - When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order.
    • Float - Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. If an image is floated to the right, a following text flows around it, to the left.
  • top
    • px - pixels
    • em - means 2 times the size of the current font. E.g., if the menu is displayed with a font of 12 points, then '2em' is 24 points. Uuseful unit since it can adapt automatically to the font that the reader happens to use.

Navigation Bar

body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", Times, serif;
color: purple;
background-color: #d8da3d
}
h1 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}

Divisions

A web page can be divided in to divisions using the <div id="thedivisionid"></div> tag. Any tag can be customized using CSS.

#nav {
background-color: #d8da3d;
}

Named colors

Color names and sRGB values
black = "#000000" green = "#008000"
silver = "#C0C0C0" lime = "#00FF00"
gray = "#808080" olive = "#808000"
white = "#FFFFFF" yellow = "#FFFF00"
maroon = "#800000" navy = "#000080"
red = "#FF0000" blue = "#0000FF"
purple = "#800080" teal = "#008080"
fuchsia = "#FF00FF" aqua = "#00FFFF"

 

Pseudo-classes

Link

The four selectors are:

  • a:link - Defines the style for normal unvisited links.
  • a:visited - Defines the style for a link that has been visited.
  • a:hover
    • Defines the style for a link when you move your mouse over the link
    • MUST come after a:link and a:visited
  • a:active
    • Defines the style for a link once you have clicked on it or the selected link
    • MUST come after a:hover 
    a:link {
        background-color:#09F;
        color: #FF0;
        text-decoration: none;
   }
  a:visited {
          background-color:#CCC;
   } 
  a:hover {
          background-color:#F00;
   }
	a:active {
          background-color:#09F;
          color: #FF0;
   }

All CSS Pseudo Classes/Elements

Selector Example Example description
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:active a:active Selects the active link
:hover a:hover Selects links on mouse over
:focus input:focus Selects the input element which has focus
:first-letter p:first-letter Selects the first letter of every <p> element
:first-line p:first-line Selects the first line of every <p> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:before p:before Insert content before every <p> element
:after p:after Insert content after every <p> element
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"

 

top of page

Page last updated: May 31, 2012 10:24 AM

It is all about:
Content and Navigation...

Web Site by: A Safer Company LLC