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 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 This project was created using New->Other->Web->Static Web Project

Basic.html Basic CSS Example Home page Background Links (continued on next slide)

Basic.html A styled page This is an example of a basic web page that we will style. It has links that we will position (move around) on the page.

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:

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.css body { 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 Style Rules The style characteristics for an HTML element are expressed by Style Rules. Style Sheet A set of style rules is called a Style 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)

CSS Basics - Rules – Internal Style Sheets – defined in the header section of an HTML document within the tag: (Not recommended) p { color: red; font-family: arial }

CSS Basics - Rules – Inline Style – defined within an HTML tag and will apply to only that instance of the element: (Really not recommended!) Paragraph text

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.css body { 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 style aspect we are setting Value: The value of that style parameter 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; } First Section Heading Here is the first paragraph, containing text that really doesn't have any use or meaning; it just prattles on and on, with no end whatsoever, no point to make, really no purpose for existence at all. Another Section Heading Another paragraph. CSS:HTML:

Predefined names: white black red … 8-bit hexadecimal intensities for red, green, blue: decimal intensities: Percentage intensities: CSS Color Specifiers #ff0000 RGB rgb(255,255,0) RGB rgb(80%,80%,100%) RGB

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 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.,, –, and tags – List tags, e.g.,,, –

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 One Two

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 The box model This is box 1. This is box 2. This is box 3.

Working With Ids To create an ID for a specific tag, use the property: – To apply a style to a specific ID, use: – #id_name {style attributes and values}

Simple Example- with style file The box model This is box 1. This is box 2. This is box 3. #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.htmlmyStyleDivs.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

Simple Example – Box Model #box1 { width: 100%; height: 200px; background-color: #ABC; margin: 10px 20px; padding: 10px; } #box2 { width: 300px; height: 100px; background-color: #007BAD; 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 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 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 block

Simple Example – Float left #box1 { width: 100%; height: 200px; background-color: #ABC; margin: 10px 20px; padding: 10px; float:left } #box2 { width: 300px; height: 100px; background-color: #007BAD; myStyleDivsFloat.css border-style: solid; border-color: black; border-width: 4px; margin: 2em; float:left } #box3 { width: 10em; height: 5em; background-color: red; margin: 25px 50px 75px 100px; float:left }

Simple Example – Float left Is this what you expected? How can we get red box to float to right of blue box?

Simple Example – Float left #box1 { width: 100%; height: 200px; background-color: #ABC; margin: 10px 20px; padding: 10px; float:left } #box2 { width: 300px; height: 100px; background-color: #007BAD; myStyleDivsFloat.css border-style: solid; border-color: black; border-width: 4px; margin: 2em float:left } #box3 { width: 10em; height: 5em; background-color: red; margin: 10px 5px 7px 10px; float:left }

Simple Example – 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; margin: 10px 20px; padding: 10px; float:left } #box2 { width: 100%; height: 100px; background-color: #007BAD; myStyleDivs.css border-style: solid; border-color: black; border-width: 4px; margin: 2em float: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: relative Box 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: absolute Box 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: absolute Box 1 Box 2 Box 3 Containing box (relatively positioned ancestor) #myBox { position: absolute; left: 20px; top: 20px; }

Simple Example – Positioning The box model This is box 1. This is box 2. this is box 1 inside box 2 this is box 2 inside box 2 this is box 3 inside box 2 This is box 3. SimplePosition.html

Simple Example – Positioning #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; }

Simple Example – Positioning

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: Some stuff More stuff

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