cascading style sheets part 3 l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Cascading Style Sheets Part 3 PowerPoint Presentation
Download Presentation
Cascading Style Sheets Part 3

Loading in 2 Seconds...

play fullscreen
1 / 61

Cascading Style Sheets Part 3 - PowerPoint PPT Presentation


  • 276 Views
  • Uploaded on

Cascading Style Sheets Part 3. Spring, 2008 Modified by Linda Kenney April 21, 2008. Types of elements. We’ve seen that elements can be categorized according to their syntax as either container elements or empty elements.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Cascading Style Sheets Part 3' - uriah


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cascading style sheets part 3

Cascading Style SheetsPart 3

Spring, 2008

Modified by Linda Kenney

April 21, 2008

types of elements
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
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.
types of elements replaced elements
Types of elements -- Replacedelements
  • 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
Types of elements -- Inlineelements
  • 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.
types of elements cont
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?
slide9
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
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
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
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

slide13
What happens when the navigation items are too big to fit into the space allowed?
  • Check with IE and Firefox
the box model
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
CSS Properties for Borders
  • border-width
  • border-style
  • border-color
setting the width of borders
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
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
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
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.
slide20
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
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.
slide22
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
Examples
  • See Border Examples:

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

setting box padding
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.
slide25
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.
slide26
Padding example:

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

margins
margins
  • margin specifies how much space should exist outside the border.
    • This property can accept one to four space-separated values.
margins cont
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.
slide29
Margin Example:

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

css positioning properties see absolute htm more css examples
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;

}

slide31
see absolute positioning 2 in Chapter 4
  • See box1 and box2 in more CSS examples
css positioning properties see relative htm more css examples
CSS Positioning PropertiesSee 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

h1 { background-color:#cccccc;

padding:5px;

color: #000000;

}

p { font-family:Arial,sans-serif;

}

#yls {float:right;

margin: 5px;

border: solid;

}

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.
clear float effect
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
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.
slide36
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;}

slide37
See float.htm in More CSS examples
  • See float2a.htm in More CSS examples
  • See float2.htm in More CSS examples
slide38

http://pubpages.unh.edu/~ltv6/cis599/samples/chapter4/examples/08_floated_positioning/floated_positioning_1.htmlhttp://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
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
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.
controlling list item markers cont41
Controlling list item markers (cont.)
  • 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
controlling list item markers cont42
Controlling list item markers (cont.)
    • 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.
slide43
Go over examples – Developing the home page
  • http://pubpages.unh.edu/~ltv6/cis599/samples/chapter4/
project web site bubbleunder com files number 1
Project Web Site (bubbleunder.com) files number 1

CSS:

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

project web site bubbleunder com files number 2
Project Web Site (bubbleunder.com) files number 2

body {

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

background-color: #e2edff;

line-height: 125%;

padding: 15px;

border: 4px solid navy;

}

project web site bubbleunder com files number 3
Project Web Site (bubbleunder.com) files number 3

#navigation {

width: 180px;

border: 1px dotted navy; }

project web site bubbleunder com files number 4
Project Web Site (bubbleunder.com) files number 4

#navigation {

width: 180px;

border: 1px dotted navy;

background-color: #7DA5D8;

}

project web site bubbleunder com files number 5
Project Web Site (bubbleunder.com) files number 5

#tagline p {

font-style: italic;

font-family: Georgia, Times, serif;

background-color: #bed8f3;

border-top: 3px solid #7da5d8;

border-bottom: 3px solid #7da5d8;

}

project web site bubbleunder com files number 6
Project Web Site (bubbleunder.com) files number 6

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;}

project web site bubbleunder com files number 7
Project Web Site (bubbleunder.com) files number 7

h2 {

color: navy;

font-size: 130%;

font-weight: normal;

padding-top: 15px;

}

project web site bubbleunder com files number 8
Project Web Site (bubbleunder.com) files number 8

h2, ul {

margin-top: 15px;

}

/* Styles added to demonstrate margins */

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

{

border: 1px solid red;

padding: 2px;

margin-bottom: 2px;

}

project web site bubbleunder com files number 9
Project Web Site (bubbleunder.com) files number 9

body {

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

background-color: #e2edff;

line-height: 125%;

padding: 0;

margin: 0;

}

project web site bubbleunder com files number 10
Project Web Site (bubbleunder.com) files number 10

h1 {

margin: 0;

}

#tagline p {

margin: 0;

}

project web site bubbleunder com files number 11
Project Web Site (bubbleunder.com) files number 11

#navigation, #bodycontent, #header

{

position: absolute;

}

project web site bubbleunder com files number 12
Project Web Site (bubbleunder.com) files number 12

#navigation, #bodycontent, #header {

position: absolute;

}

#navigation, #bodycontent {

top: 120px;

}

project web site bubbleunder com files number 14
Project Web Site (bubbleunder.com) files number 14

#navigation, #bodycontent, #header {

position: absolute;

}

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

#bodycontent { left: 200px; }

#header {

width: 100%;

}

project web site bubbleunder com files number 16
Project Web Site (bubbleunder.com) files number 16

#navigation, #bodycontent, #header {

position: absolute;

}

#navigation, #bodycontent {

top: 6.54em;

}

project web site bubbleunder com files number 17
Project Web Site (bubbleunder.com) files number 17

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>

project web site bubbleunder com files number 18
Project Web Site (bubbleunder.com) files number 18

li {

font-size: small;

list-style-type: none;

}