Web Authoring: Using Cascading Style Sheets

Web Authoring:Using Cascading Style Sheets ITNW 6030

Introductions:What is your name?What is your experience with web design? What is your experience with CSS? Is there anything specific you would like to make sure we cover?Class StructureHousekeeping

Going the Extra Mile: Absolute & Relative PositioningWithin CSS you can position where items will appear in the browser. This is done by either one of two ways. An absolute position, where you are defining exactly where within the browser that the item should appear. A relative position, where an item is placed within the browser based on its relationship to another item already in the browser output.

Going the Extra Mile: Absolute Positioning If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. Say I wanted a graphic to appear 46 pixels from the top of the page and 80 pixels in from the right, I could do it. The CSS code you'll need to add into the image isimg {position: absolute; top: 46px; right: 80px; } You can add the CSS directly into the tag using the style attribute, or you can use classes and ids and put them into your stylesheet.

Going the Extra Mile: Relative Positioning When you position something relatively, you are modifying its position from where it would have been if you hadn't changed anything.<span style="position: relative; top: 12px; left: 22px;">some words</span>

Going the Extra Mile: z-index When using relative or absolute positioning you can aslo use z-index. The z-index property refers to the 'stacking order' of an element - enabling the items with a greater stack order to appear 'on top of' items with a lower stack order.img{position:absolute;left:0px;top:0px;z-index:10;} img{position:absolute;left:0px;top:0px;z-index:5;} would appear 'above' *

Going the Extra Mile: Working with Lists The display property is used to define an element with one of four values:block (a line break before and after the element)inline (no line break before and after the element)none (no display) Each element typically is given a default display value by the browser, based on suggested rendering in the HTML specification.The display property can be dangerous because of its ability to display elements in what would otherwise be an improper format. The use of the value none will turn off display of the element to which it is assigned, including any children elements.

Going the Extra Mile: Working with Lists The white-space property will determine how spaces within the element are treated. This property takes one of three values:normal (collapses multiple spaces into one)pre (does not collapse multiple spaces)nowrap (does not allow line wrapping without a <BR> tag)

Going the Extra Mile: Working with Lists The list-style-type property specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off.Examples:LI.square { list-style-type: square } UL.plain { list-style-type: none } OL { list-style-type: upper-alpha } /* A B C D E etc. */ OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */ OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */

Going the Extra Mile: Working with Lists The list-style-image property specifies the image that will be used as list-item marker when image loading is turned on, replacing the marker specified in the list-style-type property.Examples:ul.check { list-style-image: url(/li-markers/checkmark.gif) } ul li.special { list-style-image: url(special.png) }

Going the Extra Mile: Working with Lists The list-style-position property takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented.

Going the Extra Mile: Working with Lists Syntax: list-style: <value>Possible Values: <list-style-type> || <list-style-position> || <url>Initial Value: Not definedApplies to: Elements with display value list-itemInherited: YesThe list-style property is a shorthand for the list-style-type, list-style-position, and list-style-image properties.Examples:LI.square { list-style: square inside } UL.plain { list-style: none } UL.check { list-style: url(/LI-markers/checkmark.gif) circle } OL { list-style: upper-alpha } OL OL { list-style: lower-roman inside }

Going the Extra Mile: Working with Tables TABLEborder-width (px) 1px 2px 3px 4px 5px thin medium thick 0pxborder-spacing 2px 1px 3px 4px 5px 0pxborder-style outset none hidden dotted dashed solid double ridge groove insetborder-color gray white blue green black red customborder-collapse separate collapsebackground-color white #FFFFF0 #FAF0E6 #FFF5EE #FFFAFA custom:TD/THborder-width (px) 1px 2px 3px 4px 5px thin medium thick 0pxpadding 1px 2px 3px 4px 5px 0pxborder-style inset none hidden dotted dashed solid double ridge groove outsetborder-color gray white blue green black red custom:background-color white #FFFFF0 #FAF0E6 #FFF5EE #FFFAFA custom:

Going the Extra Mile: The Box Model To understand positioning in CSS you must first understand the box model. For display purposes, every element in a document is considered to be a rectangular box which has a content area surrounded by padding, a border and margins. The illustration below shows these various parts.

Going the Extra Mile: The Box Model Margins are always transparent. Borders come in various styles. Background settings for an element apply to the the area just inside the borders which includes both the padding and content areas.Margins, borders and padding are all optional but for purposes of calculating positions and sizes they are given a default width of zero if not specified. Different widths can be set for each individual side (top, right, bottom and left) if desired. Margins can even have negative values.The width and height of each box is equal to the width and height of the outer margin box. Note that this is not the necessarily the same as the width and height of the content area.A box can contain any number of other boxes, creating a hierarchy of boxes that corresponds to the nesting of page elements. The browser window serves as the root element for this hierarchy.

Going the Extra Mile: Box Types There are two basic types of boxes, block and inline. Block boxes are generated by elements such as P, DIV or TABLE. Inline boxes are generated by tags such as B, I or SPAN and actual content like text and images.The box type may also be set using the display property. Setting a value of block on an inline element, for example, will cause it to be treated as a block element. Note that if you set the display to none, no box is created. The browser acts as if the element did not exist. Likewise, any nested elements are ignored as well, even if they specifically declare some other display value.There are other types of boxes which apply to special elements like lists and tables. However, these are ultimately treated as block or inline boxes for positioning purposes. As such, these other box types not covered here.

Going the Extra Mile: Containing Boxes Block boxes act as a containing block for any boxes within them. For example, in this code:<div> This is the first sentence. <p>This is the second sentence.</p> </div> the DIV element establishes a containing block for both the first string of text and the P element. The P element in turn creates a containing block for the second text string.

Going the Extra Mile: Containing Boxes While the text of the first sentence generates an inline box, there is considered to be block box surrounding it. These "anonymous" block boxes are used to simplify the positioning process. The result is that a block box will only contain either all inline boxes or all block boxes, even if some of those block boxes only act as a wrapper for an inline box.This containing block is used in determining both the position of the boxes within it and in some cases, the dimensions of those boxes. For example, if an element has a style setting of width:50%; its width will be set to half the width of its containing block.

Going the Extra Mile: Creating space Elements in an html document can be styled with attributes affecting the alignment or spacing to other elements. There is the normal flow of items - and there are additional attributes that can be styled. width height float clear padding margin border

Going the Extra Mile: Creating space - width Each block-level or replaced element can be given a width, specified as a length, a percentage, or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the width property is auto, which results in the element's intrinsic width (i.e., the width of the element itself, for example the width of an image). Percentages refer to the parent element's width. Negative values are not allowed.This property could be used to give common widths to some INPUT elements, such as submit and reset buttons.input.button {width: 120px;}

Going the Extra Mile: Creating space - height Each block-level or replaced element can be given a height, specified as a length or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the height property is auto, which results in the element's intrinsic height (i.e., the height of the element itself, for example the height of an image). Negative lengths are not allowed.As with the width property, height can be used to scale an image:img.announce {width: 60px; height: 40px;} In most cases, authors are advised to scale the image in an image editing program, since browsers will not likely scale images with high quality, and since scaling down causes the user to download an unnecessarily large file.

Going the Extra Mile: Creating space - float The float property allows authors to wrap text around an element. This is identical in purpose to HTML 3.2's ALIGN=left and ALIGN=right for the IMG element, but CSS1 allows all elements to "float," not just the images and tables that HTML 3.2 allows.

Going the Extra Mile: Creating space - clear The clear property specifies if an element allows floating elements to its sides. A value of left moves the element below any floating element on its left; right acts similarly for floating elements on the right. Other values are none, which is the initial value, and both, which moves the element below floating elements on both of its sides. #footer {clear:both;}

Going the Extra Mile: Creating space - padding The padding-top property describes how much space to put between the top border and the content of the selector. The padding-right property describes how much space to put between the right border and the content of the selector. The padding-bottom property describes how much space to put between the bottom border and the content of the selector. The padding-left property describes how much space to put between the left border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Going the Extra Mile: Creating space - padding The padding property is a shorthand for the padding-top, padding-right, padding-bottom, and padding-left properties.Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.If four values are given, they apply to top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.For example, the following rule sets the top padding to 2em, the right padding to 4em, the bottom padding to 5em, and the left padding to 4em:BLOCKQUOTE { padding: 2em 4em 5em }

Going the Extra Mile: Creating space - margin The margin-top property describes how much space to clear beyond the top border. The margin-right property describes how much space to clear beyond the right border. The margin-bottom property describes how much space to clear beyond the bottom border. The margin-left property describes how much space to clear beyond the left border. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are permitted.

Going the Extra Mile: Creating space - margin The margin property is a shorthand for the margin-top, margin-right, margin-bottom, and margin-left properties.Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are permitted.If four values are given, they apply to top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.For example, the following rule sets the top and bottom padding to 2em, the right and left padding to 4em:BLOCKQUOTE { margin: 2em 4em }

Going the Extra Mile: Creating space - border The border-top property describes the width, style, and color of an element's top border.The border-right property describes the width, style, and color of an element's right border.The border-bottom property describes the width, style, and color of an element's bottom border.The border-left property describes the width, style, and color of an element's left border.p {border-top: 5px solid red;}

Going the Extra Mile: Creating space - border The border-width property is used to set the border width of an element by specifying between one and four values, where each value is a keyword or a length. Negative lengths are not permitted.If four values are given, they apply to top, right, bottom, and left border width, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.This property is a shorthand for the border-top-width, border-right-width, border-bottom-width, and border-left-width properties.

Going the Extra Mile: Creating space - border The border-style property specifies what type of border to use. Keep in mind - none of the other border properties will be displayed unless border-style is set.

Going the Extra Mile: Creating space - border The border-color property sets the color of an element's border. Between one and four color values are specified. If four values are given, they apply to top, right, bottom, and left border color, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

Going the Extra Mile: Creating space - border The border property is a shorthand for setting the width, style, and color of an element's border. H2 { border: groove 3em } A:link { border: solid blue } A:visited { border: thin dotted #800080 } A:active { border: thick double red }The border property can only set all four borders; only one border width and border style may be given. To give different values to an element's four borders, an author must use one or more of the border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, or border-left-width properties.

Going the Extra Mile: ReviewAbsolute and relative positioningz-indexinline vs. blockWorking with ListsWorking with TablesBox Model

Implementation

Implementation: Creating menus Vertical NavigationWhy use a List?At its most basic level, site navigation is simply a list of related items - or links to other pages - in the site. So, a standard HTML list is the ideal starting point. <ul id="navigation"><li>Home </li><li>About </li><li>Services</li><li>Staff</li><li>Portfolio</li><li>Contact</li><li>Sitemap</li></ul>

Implementation: Creating menus Styling the ListTo style the list, you will need to use selectors that target the <ul>, <li>, and <a> elements. To make sure you do not target every instance of these elements on the page, you will need to include the unique identifier, #navigation, within each selector. Here are some of the selectors you can use.ul#navigation {...}ul#navigation a {...}ul#navigation a:hover {...}ul#navigation li {...}

Implementation: Creating menus Styling the <ul> elementMost browsers display HTML lists with left indention. To set this indentation, some browsers use padding and others use margins. To remove the left indention consistently across all browsers, set both padding-left and margin-left to 0 on the <ul> element. ul#navigation { margin-left: 0;padding-left: 0;}

Implementation: Creating menus To remove the list bullets, set the list-style-type to none.ul#navigation { margin-left: 0;padding-left: 0;list-style-type: none;}

Implementation: Creating menus Styling the <a> ElementText links are generally only active when you mouse over the actual text area. You can increase this active area by applying display: block; to the <a> element. This will change it from inline to block level and the active area will extend to the full width of the list item. To remove the underlines from the links, use text-decoration: none;. ul#navigation a { display: block;text-decoration: none;}

Implementation: Creating menus To set the background color you can use the shorthand rule background: #036; . This color can be changed to set your needs. ul#navigation a { display: block;text-decoration: none;background: #036;}

Implementation: Creating menus To set a padding for an <a> element you can use a shorthand declaration. For example if we want a .2 em top padding and .5em bottom padding. This will give the user a bigger area in which to select the link. ul#navigation a { display: block;text-decoration: none;background: #036;padding: .2em .5em;}

Implementation: Creating menus Setting BorderTo provide some space in between the list items, you can add a border on the bottom of each list item you can use:border-bottom: 1px solid #fffThis color of #fff will help distinguish the different links. ul#navigation a { display: block;text-decoration: none;background: #036;padding: .2em .5em;border-bottom: 1px solid #fff;}

Implementation: Creating menus You can set the width of the <a> element by adding width: 6em to your code. Of course this width can be changed to suit your needs. ul#navigation a { display: block;text-decoration: none;background: #036;padding: .2em .5em;border-bottom: 1px solid #fff;width: 6em;}

Implementation: Creating menus Adding A Hover Effect To this set the background to #69C and the color to #000 to ul#navigation a:hover {...}ul#navigation a:hover { background: #69C;color: #000;}

Implementation: Creating menus Styling the <li> elementYou might notice there are some slight gaps between the list items in some versions of IE or Opera . This can be overcome by setting the <li> element to display: inline.

Implementation: Creating menus Going horizontal: We will use the same code we have been using and change the code in order to make it horizontal. ul#navigation {...}ul#navigation a {...}ul#navigation a:hover {...}ul#navigation li {...}<ul id="navigation"><li>Home </li><li>About </li><li>Services</li><li>Staff</li><li>Portfolio</li><li>Contact</li><li>Sitemap</li></ul>

Implementation: Creating menus To remove indentation you can use:ul#navigation { margin-left: 0;padding-left: 0;}To remove the list bullets, set the list-style-type to none.ul#navigation { margin-left: 0;padding-left: 0;list-style-type: none;}

Implementation: Creating menus Add a background:ul#navigation { margin-left: 0;padding-left: 0;list-style-type: none;background: #036;}

Implementation: Creating menus To float the <ul>, use float: left. You will also need to set a width. In this case, we will use 100% because we want the list to spread across the full width of the page. ul#navigation { margin-left: 0;padding-left: 0;list-style-type: none;background: #036;float: left;width: 100%}

Implementation: Creating menus Styling The <li> ElementTo make sure the list items are displayed in a single line, the <li> element must be set to display: inline; . ul#navigation li { display: inline; }

Web Authoring: Using Cascading Style Sheets