Research Resources : CSS: Extended Guide

What is CSS or “style”?

While HTML defines the structure of a web page, Cascading Style Sheets, commonly referred to as CSS or “style”, is used to define the appearance and layout of the content on a page. There are three ways to add styles to your web page: an external style sheet, an internal style sheet, and inline style.

The external style sheet is most commonly used because it allows a web designer to control the look of an entire website with one document. For example, if you click through the GooWi Explorers website pages, you will notice that the font and text color of page headings is uniform throughout the website. This is because the web developer has defined a font style and color for Heading 1, <h1>, in the external style sheet. That font style and color apply to all text on the site that is enclosed in Heading 1 tags.

The PBworks Wiki uses inline style to define the appearance and layout of your web page. This allows your project team to control the look of your individual web page. The inline style you apply to your content will override the external style sheet when your web page is displayed on the GooWi Explorers website.

CSS Syntax

A CSS rule consists of a selector and one or more declarations. The selector is the HTML element that you want to style, and the declaration contains the property and value for the style. You “declare” which property you would like to change and assign a value to it. In the following example, the rule tells the web browser to display the selected heading text in red Verdana font.

Selector	Property	Value	Property	Value
h2	font-family	Verdana	color	red

When inline style is used, style attributes are contained within HTML tags. In the PBworks Wiki, text styles are defined within an HTML span start tag, <span>. The span end tag, </span>, tells the browser to end the style rules associated with the span of text. Here is the rule written in the inline style format:

Input:	<h2><span style="font-family: Verdana; color: red;">This text will be displayed in red Verdana font.</span></h2>
Output:	This text will be displayed in red Verdana font.

The PBworks Wiki “writes” inline styles as you apply formatting to your content in the rich text editor. Click on the <>Source button to see how style rules appear in your wiki editor.

Important note: You will occasionally need to edit or add style to the source code in your wiki. It is extremely important that you use the correct punctuation and syntax when writing a CSS rule. The style will not “work” if you omit a single colon or quotation mark. Here is the correct format for a CSS rule:

<(html selector) style="property: value; property: value; "></(html selector)>

Common Style Rules

These are common styles that you will need to add or edit.

Float property

You may need to add float values to an object like a table or video. Adding a float value to your style declaration tells the object to “float” to the right or left of content, so that text wraps around it.

Table:	<table style="width: auto; float: right;" border="0"></table>
YouTube Video:	<iframe style="float: right;" src="URL here" width="480" height="360"></iframe>

Margin property

Margin values add space around an object. Margin values are entered in the order top, right, bottom, left. The following margin style will add 10 pixels of space at the top, left, and bottom margins of the object, and 20 pixels of space at the left margin.

Table:	<table style="width: auto; float: right; margin: 10px 10px 10px 20px;" border="0"></table>
YouTube Video:	<iframe style="float: right; margin 10px 10px 10px 20px;" src="URL here" width="480" eight="360"></iframe>

Note: If you choose to insert images that are not embedded in a table, you can add float and margin values to the list of image styles to achieve the same effect. (Be sure to add your image caption and credit using a program like Photoshop or Paint.)

Body styles

You can use body style attributes to adjust the width of a Google Earth Balloon or to add background color.

The body tag should be manually added to the source code once you’ve transferred the code to the Google Earth balloon. The start body tag, <body>, should come before all other code and the end body tag, </body>, should come at the very end of the code.

Width:	<body style="width:400; ">source code from the wiki here</body>
Background color with name value:	<body style="width:400; background-color: tan; ">source code from the wiki here</body>
Background color with hex value:	<body style="width:400; background-color: #E0E0FF; ">source code from the wiki here</body>

Note: You can enter common color names, like green or tan, or use color “hex codes” to define the background-color value. Use the HTML color picker at w3schools.com to generate hex code values: http://www.w3schools.com/tags/ref_colorpicker.asp?colorhex=FFEFD5 Just copy and paste the hex value into your code.

Other styles

Theoretically, you should be able to add any style rule that is accepted by web browsers to your wiki page or balloon. However, be aware that the wiki and balloon may not “accept” some style rules. To learn more about style, visit the CSS section of of www.w3schools.com.