Marketing for Libraries Logo

HTML Section: CSS Styles

Consistency is one of the keys to an effective website. The easiest way to maintain consistency throughout your pages is the use of Cascading Style Sheets.

Cascading Styles Sheets (CSS) provide information about the styles used on HTML documents.

What do you want your fonts to look like? How do you want your images displayed? How do you want the page formatted? You specify what you need on your style sheet.

Cascading Style Sheets (CSS) are used to give your website a consistent "look and feel." A style sheet is a text file that contains the rules that determine how elements of your web page should be displayed. This set of rules is applied to web pages to provide better visual presentation and consistent formatting. Since HTML was never intended to be a full-formatting environment for visual documents, CSS was invented as a presentation solution. It allows developers to separate the visual presentation from the content of the web page.

CSS allows more sophisticated style options, more efficient web site maintenance, and more compact coding.

Styles

You can use styles ways: inline, internal CSS and external CSS. First, you can use the style attribute within HTML elements such as a paragraph tag. Second, you can enter the style tags at the top of a single document or within a single document. These are called an internal style rules and will help you maintain consistency within a document. Third, you can create a separate document called an external style sheet that can be attached to a single document or a series of pages such as a website.

There are three places where you can use styles:

An external CSS file is the preferred approach because a single file can be shared by many documents in a website.

Inline

A simple way to add styles to a document involves creating inline style rules. This is often done when a developer is only creating a single web page or a page that is unique from the others at the website.

An inline styles is used within a particular element such as a heading or paragraph.

Examine the sample code of an inline style. Notice how it specifies the color and margins. Notice = sign and the quotes around the information. Also notice the use of the : and ; to separate information.

<p style="color:red; margin-left:15px;">This is the content of the paragraph.</p>

You can also set the style of the body.

<body style="background-color:blue;">

You can also set the particular font color and size.

<h1 style="font-family:verdana; text-align:center;">An Important Heading</h1>

Internal

An internal style sheet is used for a single document by creating internal style rules. This is often done when a developer is only creating a single web page or a page that is unique from the others at the website.

The style tags are entered at the top of a single document or within a single document. These internal style rules will help you maintain consistency within a document.

The styles are defined in the <head> tag. Your style sheet will go between the start head tag <head> and the end head tag </head> at the top of your document. Most people place it under the meta name tags.

Start with the style tag. Between the style start and end tags, you place the rules you want to be followed. For example, you might want to use a black text color and white background color on your body font. If you want to use a color, you use a number sign and a color number. Or, you can use standard color names such as black, red, purple, blue, green.

You can control many other font functions such as style, size, and font family.

There are many other things that can be added. For example, you can set the page margins. This will provide a margin on the right and left side of the browser window.

Examine the sample below:

<head>
<style type="text/css">
body {background-color:blue;}
p {color:yellow;}
</style>
</head>

Explore the Landmarks CSS page. Notice the CSS in the head area.
Add styles to your own page.

External

For most web projects and websites, you'll want to create an external style sheet known as a Cascading Style Sheet. This is a separate document that can be attached to a single document or a series of pages such as a website. An external style sheet allows you to make changes to this single document that will impact all of your web page.

Let's say you want to change the color of the headings on very page of your website. Using the traditional method would involve changing the styles on every page of your website. If you had 100 pages, this would take a long time! Using a shared CSS, all you have to do is make a single change to your style sheet document and all the pages would be impacted.

The preferred approach is to use an external file for the CSS information. Then, use the <link> tag in the <head> section of the HTML document.

IMPORTANT: If you copy the style rules from the HEAD of a web page, remember that you DO NOT need the start and end style tags, just the rules.

Examine the sample below:

<link rel="stylesheet" type="text/css" href="mystyle.css">

<head>
<link href="pets.css" rel="stylesheet" type="text/css" />
</head>

The external style sheet should be written in a text editor. The CSS file contains ONLY the information about the styles. No tags. The file is saved with the .css file extension such as mystyle.css.

Examine the sample below:

p {margin-left:25px;}
body {background-image:url("images/back1.gif");}
hr {color:red;}

body {font-family: Arial, sans-serif; margin-left: 15%; margin-right: 15%; }
p { font-family: Times, serif; color: black; font-size: 100%; }
h1 {font-family: Verdana, sans-serif; color: red; font-size: 200%; }
h2 {font-family: Arial, sans-serif; color: green; font-size: 150%; }

Explore the Pets page and the associated external pets.css
Notice the style link in the head area of the page.
Create an external style sheet.

try itTry It!
Go to w3schools and read about the Style tag. Also, review CSS How To.
Use the Try It Yourself buttons to practice coding.

CSS Styles

Cascading Styles Sheets allow you to easily change the typography and styles throughout your website by changing the information on the CSS file.

For now, we'll concentrate on the styling aspects of CSS. Later in the course, we'll examine the topics for boxes, images, and page layout.

CSS Syntax

When creating CSS code, you'll name the selector such as p for paragraph or h1 for the first heading. Then, you place one or more declarations inside brackets {} such as p {color:red; font-size:10px;}. Notice that the you place colons between the property and its value. You place a semi-colon at the end of each declaration.

The most common mistakes involve punctuation.

Examine the sample below.

p {color:black; font-size:12px; }
h1 {color:red; text-align:center; }

try itTry It!
Go to w3schools and read about the CSS Syntax.
Use the Try It Yourself buttons to practice coding.

Cascades

The word cascading comes from the way that your CSS handles conflicting styles. There are three things that determine how styles are handled: inheritance, specificity, and location.

Inheritance determines what happens when you don't specific a rule.

Specificity is used when more than one rule applies. The more specific the selector, the stronger the rule. The id attributes are most specific and would override the body or paragraph element.

Location makes the final determination of what style is applied. Rules that appear later have more weight. Rules that apply locally in the HTML override those in the CSS. For example, you might decide to apply boldface in the HTML. This would override the settings in the external CSS.

 

Background Colors and Images

Use the background-color property to specific a background color.

You can use HEX values, RGB values, or color names. To learn more about colors, go to the CSS Legal Color Values page.

Examine the sample below:

body {background-color:black;}

You can set the background-color of the body, headings, paragraphs, and divs.

As an alternative to a background-color, you can also set a background image. However use caution. It can be difficult to read text on a busy background. Also, consider the use of contrasting colors to make reading easier.

Examine the sample below:

body {background-image:url('ocean1.jpg');}

Background images are often repeated to ensure that they cover the page.

Examine the sample below:

body {background-image:url('pattern1.png'); background-repeat:repeat-x;}

try itTry It!
Go to w3schools and read about the CSS Background.
Use the Try It Yourself buttons to practice coding.

Text

You can set the color, alignment, decoration, transformation, and indentation of text.

Color is the most common text property. You can use HEX values, RGB values, or color names. To learn more about colors, go to the CSS Legal Color Values page.

Alignment can include center, left, right, or justified.

Decoration includes setting or removing decorations such as underlines.

Transformation indicates the use of uppercase and lowercase letters in text.

Indentation specifies the amount the first line is indented in pixels.

Examine the sample below:

h1 {text-align:center;}
h2 {text-decoration:underline;}
p {text-indent:50px;}
p.date {text-align:right;}
p.main {text-align:justify;}
p.uppercase {text-transform:uppercase;}
a {text-decoration:none;}

try itTry It!
Go to w3schools and read about the CSS Text.
Use the Try It Yourself buttons to practice coding.

Font

You can indicate the font properties including the font family, font style, and font size.

The font family is a set of related fonts. When specifying the font family, you can choose the generic family serf or sans-serif. You can also state a font family like Arial or "Times New Roman". If the font family is more than one word, it should be in quotes. In many cases, programmers will provide a font family with a generic fallback if that font isn't available.

The font style property can specify normal, italic, or oblique (leaning).

The font size property can be expressed as absolute or relative size. Absolute specifies a particular size such as 30px or 2em. Relative size set the font relative to the surrounding elements such as 90%, 100%, or 110%.

Examine the sample below:

body {font-size:100%;}
p {font-family:"Times New Roman", Times, serif; font-size:14px;}
p.italic {font-style:italic;}
h1 {font-family:Arial, Verdana, sans-serif; font-size:30px;}
h2 {font-size:20px;}

try itTry It!
Go to w3schools and read about the CSS Font.
Use the Try It Yourself buttons to practice coding.

Links

Links can be styled in the same way as fonts, however you can also set the four link states including the following. Be sure to use this order when creating your CSS.

The default is to have links underlined. If you don't want the underline, set the text-decoration to none. You can also sent a background-color for your link.

Examine the sample below:

a:link {color:blue; text-decoration:underline;}      /* unvisited link */
a:visited {color:white; text-decoration:none;}  /* visited link */
a:hover {color:red text-decoration:none;}  /* mouse over link */
a:active {color:yellow; text-decoration:none;}  /* selected link */

try itTry It!
Go to w3schools and read about the CSS Link.
Use the Try It Yourself buttons to practice coding.

 

CSS Comments

Comments can be incorporated into your CSS using /* to start your comment and */ to end your comment.

Examine the following sample code.

/*This is a comments on my CSS file*/
p {color:black; font-size:12px; }
/*This comment talks about the first heading.*/
h1 {color:red; text-align:center;

CSS Selectors

The selector determines which elements a style will affect. For instance, if you want all the heading 1 (h1) elements to be Arial font and 18 pixels high, you'd create a selector that identified these elements.

Element Names

When creating your style sheet you normally start with the most common elements such as p, h1, h2, h3.

h3 {color: green;}

Selectors

You can create two types of selectors: id and class.

You can give your elements a unique name or one that identifies them as belonging to a specific class. You can then use criteria in a selector to apply formatting to only those elements that have this label.

Use the id attribute to name unique elements. To select elements to format based on their id, type the # (pound sign) and the id name followed by the criteria. If you want to impact a particular element with a class, then use the element before the period such as h2.questions {color: green;}

Use the class attribute to name a group of elements. To select elements to format based on their class, type the . (period) and the class name following by the criteria.

The id Selector

An id selector allows you to specify a style for a single unique elements. Selectors should begin with a letter and only be one word.

When you're ready to use the id or class attribute in your HTML, you simply name the id or class. To name unique elements, type id="whatever". To name groups of elements, type class="whatever". Insert your own unique word for whatever.

Examine the following sample code. In the case below, all elements with the class="focus1" will be centered and red.

#focus1 {text-align:center; color:red; }

#frog {color: green;}

You can identify elements based on their ancestors, their parent, or their sibling.

div#frog p {color: green;}

The class Selector

The class selector is used to specify a group of elements. Selectors should begin with a letter and only be one word.

Examine the following sample code. In the case below, all p elements with the class="center" will be center-aligned.

p.center {text-align:center;}

try itTry It!
Go to w3schools and read about the CSS id and class Selector.
Use the Try It Yourself buttons to practice coding.

try itTry It!
Go to w3schools and read the CSS section. This is a large section with lots of information.
Use the Try It Yourself buttons to practice coding.


| eduScapes | IUPUI Online Courses | Teacher Tap | 42eXplore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson