Cascading Style Sheets Part 3 Spring, 2008 Modified by Linda Kenney April 21, 2008

Cascading Style SheetsPart 3

Spring, 2008

Modified by Linda KenneyApril 21, 2008

Types of elements

• We’ve seen that elements can be categorized according to their syntax as either container elements or empty elements.

– It’s often useful, however, to also categorize elements according to their general behavior.

• Block-level elements

• Replaced elements

• Inline elements

Types of elements -- Block-level elements

• Block-level elements define blocks of text by providing a line break at the end of their contents.

– Note that this has nothing to do with the <br /> element we mentioned earlier.

– For example, a <p>…</p> element is a block-level element because there is an implied line break at the end of every paragraph.

Examples of Block level elements

Types of elements -- Replaced elements

• Replaced elements are placeholders that eventually get replaced with something by the browser.

– For example, a <br /> element is a replaced element because the browser will eventually replace it with an actual line break.

– Others?

Types of elements -- Inline elements

• Inline elements are elements that modify or mark their contents in some way without implying a line break at the end.

– For example, an <em>…</em> element is an inline element because it can be used to selectively emphasize portions of a block (such as a paragraph) without forcing the block to end.

Examples of Inline elements

Types of elements (cont.)

– For the most part, block-level and inline elements will be container elements and replaced elements will be empty elements.

– What’s the difference?

• Block level elements may be contained only within other block level elements.

• Inline elements may be contained within other inline elements or within block level elements.

• Replaced elements may be contained within block level elements.

CSS tools for block level elements

• Give a block of text height or width

• Create padding

• Move the block to any location on the web page.

Setting a width

<style type="text/css"> body { font-family: Verdana; } .attentiongrab { width: 50%; font-weight: bold; } </style>See:http://pubpages.unh.edu/~ltv6/cis599/samples/chapter4/

examples/01_setting_a_width/width.html

Setting a height

<style type="text/css"> #mainnavigation { background-color: #FFCC33; color: navy; font-weight: bold; width: 200px; height: 300px; } </style>

http://pubpages.unh.edu/~ltv6/cis599/samples/chapter4/examples/02_setting_a_height/

height.html

• What happens when the navigation items are too big to fit into the space allowed?

• Check with IE and Firefox

The box model• Every element within a Web page is contained within a box.

– The element itself occupies the content area of this box.– The content area is surrounded by optional padding.– The padding is surrounded by an optional border.– And the border is surrounded by an optional margin (Determines the empty

space between the element and adjacent elements).

CSS Properties for Borders

• border-width

• border-style

• border-color

Setting the width of borders• The simplest way to set the width of a box’s

border is to use the border-width property.– This property can accept one to four space-separated

values.• If there is only one value, it will be used for all four borders.• If there are two values, the first will be used for the top and

bottom borders and the second will be used for the left and right borders.

• If there are three values, the first will be used for the top, the second will be used for the left and right, and the third will be used for the bottom.

• If there are four values, they will be used for the top, right, bottom and left, respectively.

– TRBL (pronounced “trouble”) is a common mnemonic

border-width

• The values may be length values or any of the three keywords: thin, medium or thick.

– The default value is medium.

border-style

• The border-style property is used to control the appearance of a box’s border.– It can accept one to four space separated

values.• The values are interpreted and applied as they are

for the border-width property.• There are nine valid keyword values.

– They are dotted, dashed, solid, double, groove, ridge, inset, outset and none.

– The default is none, so the borders of a box will remain invisible until this property is set to something else.

border-color

• By default, an element’s foreground color is used as the color of its box’s border.– To set a different color for the border, use the

border-color property.• It can accept one to four space-separated color

values, which are interpreted and applied as they are for the border-width property.

• There are also properties for controlling each side of the border separately.– border-top-width (or –style or –color)

– border-right-width (or –style or –color)

– border-bottom-width (or –style or –color)

– border-left-width (or –style or –color)

Shorthand properties for borders

• There are several shorthand properties to simplify more common border settings.– The most general is the border property,

which can be used to set the width, color and/or style of all four sides of the border simultaneously.

• Simply list the desired width, style and/or color values separated by spaces as the value of the border property.

– There are also separate shorthand properties for setting the width, color and/or style of each side of a border.

• They are border-top, border-right, border-bottom and border-left.

• For each, simply list the desired width, style and/or color value in a space-separated list as its value.

Examples

• See Border Examples:

http://pubpages.unh.edu/~ltv6/cis599/samples/chapter4/

Setting box padding

• The area between a box’s content area and its border is the box’s padding.– By default, the width of this padding is 0.– The simplest way to set a box’s padding is to use the

padding property.• This property can accept one to four space-separated

values.– Those values may be length values or percentages.

– They are interpreted and applied as above.

– There are also properties for controlling each side of the padding separately.

• padding-top• padding-right• padding-bottom• padding-left

– The padding of a box is filled with the same background color or image as the element’s content area.

• Padding example:

http://pubpages.unh.edu/~ltv6/cis599/samples/chapter4/examples/04_padding/padding.html

margins

• margin specifies how much space should exist outside the border.

– This property can accept one to four space-separated values.

margins (cont.)

– There are also properties for controlling each side of the margin separately.

• They are margin-top, margin-right, margin-bottom and margin-left.

– The margin of a box is always transparent.

– The top and bottom margins of adjacent elements are “collapsed”.

• Only the larger of the two is used, the other is ignored.

• Margin Example:

http://pubpages.unh.edu/~ltv6/cis599/samples/chapter4/examples/05_margins/margins.html

CSS Positioning Properties See absolute.htm (more CSS examples)

• Absolute– Use to precisely specify the

exact pixel location of an element in the browser window

h1 { background-color:#cccccc;padding:5px;color: #000000;}#content {position: absolute;left:200;top:100;font-family:Arial,sans-serif;width:300;}

• see absolute positioning 2 in Chapter 4

• See box1 and box2 in more CSS examples

CSS Positioning Properties See relative.htm (more CSS examples)

• Relative– Use to slightly change the location

of an element in relation to where it would otherwise appear

h1 { background-color:#cccccc;padding:5px;color: #000000;}#myContent { position: relative;left:30px;font-family:Arial,sans-serif;}

CSS Positioning Properties (3)

• Float– Elements that

seem to “float" on the right or left side of either the browser window or another element are often configured using the float property. Content flows around floated element.

h1 { background-color:#cccccc;padding:5px;color: #000000;}p { font-family:Arial,sans-serif;}#yls {float:right;margin: 5px;border: solid;}

clear float effect

<style type="text/css">p { font-family:Arial,sans-serif; }.rightfloat {float:right; margin:5px; clear: right; border:solid;}</style>

The clear property• When the float property is used to float

elements to the left or right, it’s possible that you will want some elements to be prohibited from wrapping beside those floated elements.– Use the clear property to prohibit floated elements

from appearing beside an element.

• The clear property can accept one of four keyword values.

– A value of left prohibits floating elements from appearing to the left of the element.

– A value of right prohibits floating elements from appearing to the right of the element.

– A value of both prohibits floating elements from appearing on either side of the element.

– The default value, none, allows floating elements to appear on either side of the element.

img.figure {float: left;}img.portrait {float: right;}h1, h2, h3, h4 {clear: both;}

• See float.htm in More CSS examples

• See float2a.htm in More CSS examples

• See float2.htm in More CSS examples

• http://pubpages.unh.edu/~ltv6/cis599/samples/chapter4/examples/08_floated_positioning/floated_positioning_1.html

• http://pubpages.unh.edu/~ltv6/cis599/samples/chapter4/examples/08_floated_positioning/floated_positioning_2.html

Controlling list item markers

• List items are traditionally preceded by a marker of some sort. CSS offers properties to control these markers.– The list-style-image property is used to

specify an image that should be displayed as a list item marker.

– Its value must be either a URL in functional notation or the keyword none

– list-style-image:url(myimage.gif)

Controlling list item markers (cont.)

– The list-style-type property is used to specify more traditional list item markers.

– Its value may be one of the following nine keyword values: disc, circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman and none.

– If list-style-image is also specified with a value other than none, the image will be used in place of the specified list-style-type, if it is available.


– The list-style-position property is used to specify how the marker is displayed in relation to the list items.

– Its value may be either inside or outside.

» The default value is outside, which leaves the marker hanging out to the left of the list item text

» A value of inside causes the marker to move into the list, acting almost like an indentation


– The list-style property is a shorthand property that can accept a space separated list consisting of up to one value from each of the previously mentioned list-related properties.

• Each of these properties is applicable to any element whose display property has a value of list-item and they are all inherited

• They are therefore applicable to <li> elements, but are most commonly applied to <ol> and <ul> elements and inherited by the <li> elements they contain.

• Go over examples – Developing the home page

• http://pubpages.unh.edu/~ltv6/cis599/samples/chapter4/

Project Web Site (bubbleunder.com) filesnumber 1

CSS:

p, h1, h2, ul { border: 1px solid red; }


body {

font-family: Verdana, Helvetica, Arial, sans-serif;

background-color: #e2edff;

line-height: 125%;

padding: 15px;

border: 4px solid navy;

}


#navigation {

width: 180px;

border: 1px dotted navy; }


#navigation {

width: 180px;

border: 1px dotted navy;

background-color: #7DA5D8;

}


#tagline p {

font-style: italic;

font-family: Georgia, Times, serif;

background-color: #bed8f3;

border-top: 3px solid #7da5d8;

border-bottom: 3px solid #7da5d8;

}


h1, h2, h3 {

font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;

}

h1 {

font-size: x-large;

background-color: navy;

color: white;

}

h2 {

color: navy;

font-size: 130%;

font-weight: normal;}


h2 {

color: navy;

font-size: 130%;

font-weight: normal;

padding-top: 15px;

}


h2, ul {

margin-top: 15px;

}

/* Styles added to demonstrate margins */

#header, #sitebranding, #tagline, #navigation, #bodycontent

{

border: 1px solid red;

padding: 2px;

margin-bottom: 2px;

}


body {

font-family: Verdana, Helvetica, Arial, sans-serif;

background-color: #e2edff;

line-height: 125%;

padding: 0;

margin: 0;

}


h1 {

…

margin: 0;

}

#tagline p {

…

margin: 0;

}


#navigation, #bodycontent, #header

{

position: absolute;

}


#navigation, #bodycontent, #header {

position: absolute;

}

#navigation, #bodycontent {

top: 120px;

}


#bodycontent {

left: 200px;

}



position: absolute;

}

#navigation, #bodycontent { top: 107px; }

#bodycontent { left: 200px; }

#header {

width: 100%;

}


• Look at on your own.



position: absolute;

}

#navigation, #bodycontent {

top: 6.54em;

}


img.feature {

float: right;

margin: 10px;

}<div id="bodycontent">

<h2>Welcome to our super-dooper Scuba site</h2>

<p><img class="feature" src="divers-circle.jpg" width="200" height="162"

alt="A circle of divers practice their skills" /></p>

<p>Glad you could drop in and share some air with us! You've passed

your underwater navigation skills and successfully found your way to

the start point - or in this case, our home page.</p>

</div>


li {

font-size: small;

list-style-type: none;

}

Documents

Cascading Style Sheets Part 3 Spring, 2008 Modified by Linda Kenney April 21, 2008