CSSCIS-189

Cascading Style Sheets allow further separation of content from presentation◦ Can speed up content creation, since not worried

about presentation A single stylesheet can alter the appearance

of multiple web pages or documents Different stylesheets can alter the appearance

of a single web page or document Web pages can load more quickly since

stylesheets are downloaded once and cached (held in memory)

Cascading Style Sheets

Uses rules to control how elements are displayed

Made up of ◦ Selector – identifies where to apply the style◦ Declaration – documents the style◦ Semi-colon is used to separate properties

h1{font-family:verdana;}

CSS

Selector

Declaration

Separator

Stylesheets can be in-line, part of the document itself

Stylesheets can be separate files Stylesheets support inheritance

◦ Can use several stylesheets in a single document◦ In-line style overrides an external rule

Using Stylesheets

<style type="text/css" media="screen">body {

background-color: #F4FBFD ;font-family: verdana;font-size: small;color: navy;

}table {

font-family: verdana;font-size: small;cell-padding: 2px;

}.specialDates{ font-weight: bold; font-style: italic; } </style>

In-line Style Sheet(partial, from CIS189 syllabus)

body and table represent elements;.specialDates is a class

Reference:<?xml-stylesheet type="text/css" href="talltales.css"?> CSS File:talltales { background-image: url(background.gif); background-repeat: repeat;}

tt { display: block; width: 700px; padding: 10px; margin: 10px; border: 5px groove #353A54; background-color: #353A54;}… (continues)

External Stylesheet

From Sam’s Teach Yourself XML

talltales and tt represent elements

?xml version="1.0"?><?xml-stylesheet type="text/css" href="talltales.css"?><!DOCTYPE talltales SYSTEM "talltales.dtd">

<talltales> <tt answer="a"> <question> In 1994, a man had an accident while robbing a pizza restaurant in Akron,

Ohio, that resulted in his arrest. What happened to him? </question> <a>He slipped on a patch of grease on the floor and knocked himself out.</a> <b>He backed into a police car while attempting to drive off.</b> <c>He choked on a breadstick that he had grabbed as he was running

out.</c> </tt>… (continues)

Sample XML

From Sam’s Teach Yourself XML

Styled Output

From Sam’s Teach Yourself XML

Selectors indicate where rules should apply

Selectors

Selector Type (example)

Universal (*) Wildcard applies to all element types in document

Type (body) Apply to specific elements

Class (.specialDates)

Apply to elements with class attribute set to class name

ID (#myHomework) Apply to elements with ID attribute matching the name following hash mark (#)

Descendent (body p)

Apply to elements that belong to another element

Child (body > p) Apply to elements that are direct child of other element

Adjacent Sibling (p + ul)

Matches an element that is at same level but after

Selectors can also apply to attributes◦ Not fully supported across browsers

Class selector is for XHTML◦ Browser knows meaning of class attribute for

HTML ID selector only applies to attributes using

ID type◦ Must use DTD or schema for XML file◦ Browsers don’t force validation, so can’t

consistently read ID selectors correctly

Selector Use

CSS treats each element as a rectangle (box)

Box includes◦ Margin is transparent area separating rectangle

from other elements◦ Border defines the edge of the content area◦ Padding separates the content from the border

Boxes can be block or inline◦ Block deals with separate value similar to

paragraphs (<p>, <div>, <h1>)◦ Inline allows content to follow (flow) other

tags/elements (<span>, <em>)

Box Model

<p>Each week prior to Thanksgiving, students will prepare a summary of material covered in-class, online, and in the assigned reading. <strong>Each student is expected to prepare their own summary.</strong> Each week has a series of questions that must be answered as part of the summary to receive full credit; the questions are included in the weekly folder in Angel. Code fragments should be included to illustrate concepts or practices. Students may prepare the summary as a Word document or build a wiki; Word documents or links to the wiki must be emailed to the instructor by midnight on Friday to receive credit. Students will receive 5 points for a complete summary, 3 points for an incomplete summary, and no points for a late or missing submission.</p>

Block & Inline Example

<p></p> represents a block; <strong></strong> represents in-line.

<?xml version="1.0" encoding="utf-8"?><assignments><assignment>

<duedate>09/27/2011</duedate><name>Homework 1 - Using XML</name>

</assignment><assignment>

<duedate>10/11/2011</duedate><name>Homework 2 - DOM</name>

</assignment><assignment>

<duedate>10/18/2011</duedate><name>Homework 3 - DTD</name>

</assignment>…</assignments>

Assignments Data(CIS189Homework.xml)

In-line v. Block: In-line(css1.css)

assignment {font-family: Verdana, Geneva, Tahoma, sans-serif;font-size: medium;font-weight: bold;display:inline;color: #0000FF;

}duedate {

background-color: #99CCFF;}

Each assignment immediately follows prior assignment

In-line v. Block: Block (css1.css)

assignment {font-family: Verdana, Geneva, Tahoma, sans-serif;font-size: medium;font-weight: bold;display:block;color: #0000FF;

}duedate {

background-color: #99CCFF;display:inline;

}

Each assignment is on a new line (block)

Normal flow (default) presents one element after another from top to bottom◦ Can include relative positioning to offset a box from the

preceding element Float positioning allows other content to flow

around◦ Set a width to specify how much of the containing box to

use – otherwise will take up 100% of the space Absolute positioning specifies a fixed location to

place content◦ Set the top and left properties◦ Fixed can be used to make position about the browser

window

Positioning

Positioningassignments {

background-color: #C0C0C0;border: medium groove #0000FF;margin: 0px;padding: 10px;display: block;

}assignment {

margin: 5px;font-family: Verdana, Geneva, Tahoma, sans-serif;font-size: medium;font-weight: bold;display: block;color: #0000FF;

}duedate {

background-color: #CCCCFF;display: inline;float: right;

}

Due date comes after name (float)

Creates border around contents and sets background (applies to root element)

Tabular data can be displayed using float positioning or using display settings◦ Float positioning is shown in In-line v. Block: Block

Display settings include◦ table;◦ table-row;◦ table-cell;

Displaying Tables

Table of Assignments

assignment {display: table-row;

}name {

display:table-cell;font-style:italic;padding:10px;

}duedate {

display: table-cell;font-weight:bold;padding:10px;

}assignments {

padding: 10px;display: table;

}