mcs 270 cascading style sheets (css) gustavus adolphus college

MCS 270

Cascading Style Sheets (CSS)

Gustavus Adolphus College

HTML and CSS

• In the beginning – web pages were pure HTML • Old Style HTML was used for

– Content and Meaning (what is on the page)

– Formatting and Layout (how page looks)

HTML and CSS

1995

2007

Designers wanted more complex formatting on pages,Pure HTML was not enough

HTML and CSS

• Over time, it became apparent that web design needed to be split into two areas:

– Content and Meaning in HTML

– Formatting and Layout in another technology (language) called CSS

(Cascading Style Sheets)

CSS

• Style Sheets are quite different than HTML code.

• Style sheets have no content, only style specifications

• Style sheets allow one to design a style for all web pages on a developer’s web site

• Provide a uniform “look and feel” for a site• Don’t need to style every page!

CSS Example

• Before we get to the CSS commands, let’s see how a page can change under style commands.

• Start Eclipse, clone the repository cssTutorial from https://github.com/hvidsten/• This project was created using New->Other->Web->Static Web Project

https://github.com/hvidsten/





Basic.html

<!DOCTYPE html> <html> <head><meta charset=“US-ASCII”> <title>Basic CSS Example</title> </head> <body>  <ul class="navbar"> <li><a href="index.html">Home page</a></li> <li><a href="background.html">Background</a></li> <li><a href="links.html">Links</a></li> </ul>

(continued on next slide)

Basic.html

 <h1>A styled page</h1> <p>This is an example of a basic web page that we will

style.</p> <p>It has links that we will position (move around) on the

page. </p></body></html>

Basic.html

To view the web page, we will start the Eclipse built-in browser. Click the world icon in the toolbar at the top of the Eclipse window.

A browser window will appear in the middle Eclipse panel.

Basic.html

Drag the html file from the Project Explorer panel into the browser window to view it. (Or right-click on Basic.html and choose Open With -> Web Browser)

Basic.html

CSS Example

• The CSS file myStyle.css in the project directory will be used to “style” the page.

• The following line is in myStyle.css: body { color: purple; background-color: #d8da3d }

• To have the web page use this style file, we add the following to the web page head section:

<link rel="stylesheet" href="myStyle.css">

CSS Example

• Important! The style file myStyle.css must be in the same directory as the web page.

• Re-Save the web page and then click the yellow re-load button in the web browser.

CSS Example

myStyle2.cssbody { padding-left: 11em; color: purple; background-color: #d8da3d }ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em }

ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black }ul.navbar a { text-decoration: none }

CSS Example

• Edit Basic.html so that it uses myStyle2.css and then re-load the browser

CSS Example

CSS Basics - Rules

• The style characteristics for an HTML element are expressed by Style Rules Style Rules .

• A set of style rules is called a Style SheetStyle Sheet.

• Style rules are contained one of three places:

CSS Basics - Rules – External (Linked) Style Sheets – style sheets

stored in separate files from the HTML document (usually with the file extension .css): (Recommended)

<link rel=”stylesheet” href=”myStyle.css” type=”text/css” />

CSS Basics - Rules

– Internal Style Sheets – defined in the header section of an HTML document within the <style> tag: (Not recommended)

<style type=”text/css”>p { color: red; font-family: arial }

</style>

CSS Basics - Rules – Inline Style – defined within an HTML tag and will

apply to only that instance of the element: (Really not recommended!)

<p style=”color:red; font-family:arial”>

Paragraph text</p>

Three ways to add style rules

• Inline Style - Add style information to a tag• Internal Style - Add style information to the

document at the beginning• External Style Sheet - Put all of your style in

an external file– Preferred because style parameters can then be

used by many pages

External Style Sheet

• External style sheets– An external style sheet is a text file containing

style definitions (declarations)– Use it when you need to control the style for an

entire web site

myStyle2.cssbody { padding-left: 11em; color: purple; background-color: #d8da3d }ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em }

ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black }ul.navbar a { text-decoration: none }

body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px;}

Selector: The element of the document to which rule applies

Declaration Block: The style values that are being set for the element

Attribute Name: which styleaspect we are setting

Value: The value of that styleparameter

Anatomy of a CSS Rule

CSS <-> HTML

body { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: black; background: white; margin: 8px;}h1 { font-size: 19px; margin-top: 15px; margin-bottom: 5px; border-bottom: 1px solid black}.shaded { background: #d0d0ff;}

<body><h1>First Section Heading</h1><p>

Here is the first paragraph, containingtext that really doesn't have any useor meaning; it just prattles on and on,with no end whatsoever, no point tomake, really no purpose for existenceat all.

</p><div class="shaded">

<h1>Another Section Heading</h1><p>

Another paragraph.</p>

</div></body>

CSS: HTML:

• Predefined names:white black red …

• 8-bit hexadecimal intensities for red, green, blue:

• 0-255 decimal intensities:

• Percentage intensities:

CSS Color Specifiers

#ff0000

R G B

rgb(255,255,0)

R G B

rgb(80%,80%,100%)

R G B

1. Change the background color for the body of our basic web page to one of your favorite colors

2. Change the font for a paragraph tag <p> to the font family of Helvetica, sans-serif

3. Change the color of the font in a paragraph to another of your favorite colors (not black)

4. Consult your cheat sheet and make the text in the address blink on and off (set the text-decoration property to blink)

5. Experiment with setting other font, text, and background properties for elements on your page.

CSS Practice

CSS for Page Layout

• CSS can be used for more than just colors and font display – we can manipulate the size and position of block-level elements

• Block-level elements in HTML are elements that are formatted in boxes:– Heading tags, e.g., <H1>, <H2>– <p>, <blockquote> and <address> tags– List tags, e.g., <ul>, <ol>, <dl>– <div>– <body>– <hr>– <img>

Block Level Elements

• Start on their own line, end justification and start a new block • Can be a container for other elements• Blocks can contain other blocks

<div id=”content”> <p>One </p> <p>Two</p></div>

CSS Default Layout Order

• By default, CSS boxes for block elements are stacked, one above the other, so that they’re read from top to bottom.

• In CSS, this is said to be the “normal flow”.

• (Note that CSS boxes for inline elements are placed next to each other, within boxes for block elements, and will normally wrap according to the width of the containing block.)

Simple Example – SimpleDivs.html

<!DOCTYPE html> <html> <head> <title>The box model</title> </head> <body> <div id="box1"> This is box 1.

</div> <div id="box2"> This is box 2.

</div> <div id="box3"> This is box 3.

</div> </body></html>

Working With Ids

• To create an ID for a specific tag, use the property:– <tag ID=id_name>

• To apply a style to a specific ID, use:– #id_name {style attributes and values}

Simple Example- with style file

<!DOCTYPE html> <head> <html> <title>The box model</title> <link rel="stylesheet"

href="myStyleDivs.css"> </head> <body> <div id="box1"> This is box 1. </div> <div id="box2"> This is box 2. </div> <div id="box3"> This is box 3. </div> </body></html>

#box1 {width: 100%;height: 200px;background-color: #ABC;

}#box2 {

width: 300px;height: 100px;background-color: #007BAD;

}#box3 {

width: 10em;height: 5em;background-color: red;

}

Simple-divs.html myStyleDivs.css

Simple Example – with style file

CSS Measurement Units

What’s a Div??

• The div element is used for layout purposes. • A div is like an invisible box that is used to

group elements together. • The default width of a div is "as wide as

possible," while the default height of a div is "as tall as necessary“ to enclose the content inside the div section.

CSS Box Model

Content

Padding

Border

Margin

The margin, border and padding properties, can be specified independently for each side

The margin, border and padding properties, can be specified independently for each side

Simple Example – Box Model


margin: 10px 20px; padding: 10px;}#box2 {


myStyleDivs2.css

border-style: solid;border-color: black;

border-width: 4px;margin: 2em

}#box3 {

width: 10em;height: 5em;background-color: red;margin: 25px 50px 75px 100px;

}

Simple Example – Box Model

Floats: Positioning CSS Boxes

• …we can position block element boxes side-by-side in CSS using floats.

• Setting the float property to left or right causes a box to be taken out of its position in the normal flow and moved as far left or right as possible.

text text text text text text text text text text


text text text text text text text text text text text text text text text text text text text text










inline

inline

inlineblock

Simple Example – Float left


margin: 10px 20px; padding: 10px;

float:left}#box2 {


myStyleDivsFloat.css


border-width: 4px;margin: 2em;float:left

}#box3 {

width: 10em;height: 5em;background-color: red;margin: 25px 50px 75px 100px;float:left

}


• Is this what you expected?

• How can we get red box to float to right of blue box?




float:left}#box2 {


myStyleDivsFloat.css


border-width: 4px;margin: 2emfloat:left

}#box3 {

width: 10em;height: 5em;background-color: red;margin: 10px 5px 7px 10px;float:left

}

Float Values

• The Float property has three value options:– float: left;– float: right;– float: none;

• To restore the “normal flow”, we can use the clear property.• The clear property has three value options:

– clear: left;– clear: right;– clear: both;

• These specify which side of the element’s box may not have a float next to it.

Simple Example – Clear left

#box1 {width: 200px;height: 200px;background-color: #ABC;


float:left}#box2 {

width: 100%;height: 100px;background-color: #007BAD;

myStyleDivs.css


border-width: 4px;margin: 2emfloat:left

}#box3 {

width: 10em;height: 5em;background-color: red;margin: 10px 5px 7px 10px;clear: left

}

Simple Example – Clear left

CSS Positioning

• The third core concept to understand in CSS layout (after the ‘box model’ and ‘floats’), is positioning.

• There are two types of positioning that can be applied to CSS boxes:• Relative Positioning• Absolute Positioning

CSS Positioning: Relative Positioning

• A relatively positioned element will stay exactly where it is, in relation to the normal flow.

• You can then offset its position “relative” to its starting point in the normal flow:

Box 1 Box 2 Box 3

Containing box

CSS Positioning: Relative Positioning

• In this example, box 2 is offset 20px, top and left. The result is the box is offset 20px from its original position in the normal flow. Box 2 may overlap other boxes in the flow, but other boxes still recognise its original position in the flow.

Left: 20px

top: 20px

Position: relativeBox 1

Box 2

Box 3

Containing box

#myBox {position: relative;left: 20px;top: 20px;

}

CSS Positioning: Absolute Positioning

• An absolutely positioned box is taken out of the normal flow, and positioned in relation to its nearest positioned ancestor (i.e. its containing box).

• If there is no ancestor box, it will be positioned in relation to the initial containing block, usually the browser window.

Left: 20px

top: 20px

Position: absoluteBox 1

Box 2

Box 3

Containing box (relatively positioned ancestor)

CSS Positioning: Absolute Positioning

• An absolutely positioned box can be offset from its initial position inside the containing block, but other boxes within the block (and still within the normal flow) act as if the box wasn’t there.

Left: 20px

top: 20px

Position: absoluteBox 1

Box 2

Box 3

Containing box (relatively positioned ancestor)

#myBox {position: absolute;left: 20px;top: 20px;

}

Simple Example – Positioning

<!DOCTYPE html> <html> <head> <meta charset="US-ASCII"> <title>The box model</title> <link rel="stylesheet" href="myStylePosition.css”> </head> <body> <div id="box1"> This is box 1. </div> <div id="box2"> This is box 2. <div id="insideBox1"> this is box 1 inside box 2 </div> <div id="insideBox2"> this is box 2 inside box 2 </div> <div id="insideBox3"> this is box 3 inside box 2 </div> </div> <div id="box3"> This is box 3. </div> </body></html>

SimplePosition.html


#box1 {width: 200px;height: 200px;background-color: #ABC;

margin: 10px 20px; padding: 10px;}#box2 {

width: 100%;height: 100px;background-color: #007BAD;border-style: solid;border-color: black;

border-width: 4px;margin: 2em;

}

myStylePosition.css

#box3 {width: 10em;height: 5em;background-color: red;margin: 10px 5px 7px 10px;position:absolute;left: 150px;top:40px;

}#insideBox1, #insideBox3 {

background-color: purple;float:right

}#insideBox2 {

background-color: gray;position:relative;left: 25px;top:10px;

}

CSS Page Layout Example

Except for the image, all elements on this page follow normal flow

Two Column Page Layout

• wrapper contains the two columns – sets default background color

• Left-column navigation– float: left;– width:100px;

• Right-column content– margin-left: 100px;

• Float (flower photo)– float: right;

Two Column Page Layout

• Example is in TwoColumn.html

• Look at non-CSS styled page

• Link in twoColumn.css and compare difference

60

When to Use a class vs id• Define and Configure a class:

– If the style may apply to more than one element on a page– Use the . (dot) notation in the style sheet. – Use the class attribute in the XHTML.

• Define and Configure an id:– If the style is specific to only one element on a page– Use the # notation in the style sheet. – Use the id attribute in the XHTML.

Style Sheet: .content {padding:20px 20px 0 20px; } HTML file: <div id = “box1” class = “content”> Some stuff </div> <div id = “box2” class = “content”> More stuff </div>

1. Design a basic 3-column page with a header section, three columns (left, center, right) and a footer that always is below the 3 columns)

2. Design the CSS file that will layout the page correctly

CSS Practice

mcs 270 cascading style sheets (css) gustavus adolphus college

Documents

pearson addisonwesley

basic web page

web browser copyright

style file

example copyright

web design

page formatting

style commands