CSCI N241: Fundamentals of Web Design Copyright ©2006  Department of Computer & Information Science Using the Box Model, & Elements

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Goals By the end of this unit, you should understand … … how to use padding, borders and margins using the CSS Box Model.… how to use padding, borders and margins using the CSS Box Model. … how to arrange elements into logical groups using the element.… how to arrange elements into logical groups using the element. … how to apply styles to the element.… how to apply styles to the element. … how to apply styles to inline text & elements using the element.… how to apply styles to inline text & elements using the element.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The line-height Property We can use the line-height property to control the vertical space between lines in an element.We can use the line-height property to control the vertical space between lines in an element. The default (normal) line-height is 120% of the font size.The default (normal) line-height is 120% of the font size.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Defining line-height We can define line-height in one of three ways:We can define line-height in one of three ways: –Using a scaling factor (a number indicating a multiplicative factor of the font-size ) –Using a length unit, like em. –Using percentages of font-size.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Download and unzip the file " n241IntroBoxModel_examples.zip."Download and unzip the file " n241IntroBoxModel_examples.zip." Open the file called " css/lounge.css " and add the following declaration to the body rule: line-height: 1.6em;Open the file called " css/lounge.css " and add the following declaration to the body rule: line-height: 1.6em; Try a few other measurements for the line- height: 150%, 20px,.5em, 2, etc.Try a few other measurements for the line- height: 150%, 20px,.5em, 2, etc.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Introducing the Box Model CSS looks at each element (text, images, etc.) as a box.CSS looks at each element (text, images, etc.) as a box. Each box consists of four things: the content, padding, border and margins.Each box consists of four things: the content, padding, border and margins. Let's explore each …Let's explore each …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Content Area The content area includes text or images and the box the browser traces around that content (which is just big enough to fit the content).The content area includes text or images and the box the browser traces around that content (which is just big enough to fit the content). NOTE: The dashed line above illustrates the content area box. A browser would not draw an actual line!

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Padding Around the content area box, we can have optional padding. Padding is transparent and we can use it to create "visual whitespace" between the content area and the border.Around the content area box, we can have optional padding. Padding is transparent and we can use it to create "visual whitespace" between the content area and the border.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Border An element's border surrounds the padding. It is a line around the content and provides a "visual separation between" elements.An element's border surrounds the padding. It is a line around the content and provides a "visual separation between" elements.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Margin A margin gives space between an element and other elements in a web page. Like the padding, a margin is transparent.A margin gives space between an element and other elements in a web page. Like the padding, a margin is transparent.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Add the following class to lounge.css :.guarantee { line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; color: #444; border-color: black; border-width: 1px; border-style: solid; background-color: #A7CECE; }Add the following class to lounge.css :.guarantee { line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; color: #444; border-color: black; border-width: 1px; border-style: solid; background-color: #A7CECE; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Keep Goin' … Find the paragraph that begins "Our guarantee: at the lounge …" and apply the class: Our guarantee: at the lounge, we're committed to … Find the paragraph that begins "Our guarantee: at the lounge …" and apply the class: Our guarantee: at the lounge, we're committed to …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Still Goin' … Add the following declarations to the.guarantee rule: padding: 25px; margin: 30px;Add the following declarations to the.guarantee rule: padding: 25px; margin: 30px; Also, let's add a background image: background-image: url(../images/background.gif);Also, let's add a background image: background-image: url(../images/background.gif);

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science What's Up with the Background? We can control the background image with two additional properties:We can control the background image with two additional properties: –The background-repeat property allows us to make a background image repeat in a specified pattern, or not at all. It takes three values: repeat-xrepeat-x repeat-yrepeat-y no-repeatno-repeat –With the background-position, we can specify the origin image (starting point) for a background.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Updating the Background Image Add the following declarations to the.guarantee class: background-repeat: no repeat; background-position: top-left;Add the following declarations to the.guarantee class: background-repeat: no repeat; background-position: top-left; Also add the following under the original padding declaration: padding-left: 80px;Also add the following under the original padding declaration: padding-left: 80px;

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Finishing our Class Let's offset our class a little more. Change the border-style to a dashed border and make it white: border-style: dashed; border-color: white;Let's offset our class a little more. Change the border-style to a dashed border and make it white: border-style: dashed; border-color: white; Finally, add the following rule, to offset the right margin: margin-right: 250px;Finally, add the following rule, to offset the right margin: margin-right: 250px;

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science More on the id Attribute The id attribute uniquely identifies an element throughout a web page/website.The id attribute uniquely identifies an element throughout a web page/website. We can also write classes for those specific elements, when we one want a certain style to affect only a single element.We can also write classes for those specific elements, when we one want a certain style to affect only a single element. Let's update our.guarantee class to work with an id attribute …Let's update our.guarantee class to work with an id attribute …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Converting a Class to Work with an id Attribute First, rename.guarantee to #guarantee.First, rename.guarantee to #guarantee. Finally, find the paragraph in lounge.html that uses the.guarantee class and remove its class attribute. Replace it with the following: Finally, find the paragraph in lounge.html that uses the.guarantee class and remove its class attribute. Replace it with the following:

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Building Pages Using a Logical Flow We know how to group things using structure --,,, etc. But what if you wanted to apply a style to a group of elements that are logically related?We know how to group things using structure --,,, etc. But what if you wanted to apply a style to a group of elements that are logically related? The best solution is to use the element to group varied elements into one cohesive, logical group.The best solution is to use the element to group varied elements into one cohesive, logical group.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Without a Logical Flow

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science With a Logical Flow

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science More on More on By itself, the element does not change the style/flow of the elements nested inside it.By itself, the element does not change the style/flow of the elements nested inside it. However, we can apply styles to elements grouped inside a to do things like changing the layout of a web page …However, we can apply styles to elements grouped inside a to do things like changing the layout of a web page …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Adding a to lounge.html Open the file lounge.html. Enclose the elements between Weekly Elixir Specials and Join us any evening … using the following : … Open the file lounge.html. Enclose the elements between Weekly Elixir Specials and Join us any evening … using the following : …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Specifying a Style Add the following to your lounge.css : #elixirs { line-height: 1; border: solid thin #007E7E; width: 200px; padding: 0px 20px 20px 20px; margin-left: 20px; text-align: center; }Add the following to your lounge.css : #elixirs { line-height: 1; border: solid thin #007E7E; width: 200px; padding: 0px 20px 20px 20px; margin-left: 20px; text-align: center; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Keep Goin' … Add the following declarations to the #elixirs rule: background-image: url(../images/cocktail.gif); background-repeat: repeat-x;Add the following declarations to the #elixirs rule: background-image: url(../images/cocktail.gif); background-repeat: repeat-x;

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Changing the Style of Common Elements Nested in a Changing the Style of Common Elements Nested in a What if we want to change the styles of common elements, like the (for which we've already created a style) which are nested inside a.What if we want to change the styles of common elements, like the (for which we've already created a style) which are nested inside a. We don't want to change all elements … only those inside the elixirs.We don't want to change all elements … only those inside the elixirs. The best way to accomplish this is to use descendant selectors …The best way to accomplish this is to use descendant selectors …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Descendant Selectors We can use descendant selectors to apply styles to selected only under certain conditions.We can use descendant selectors to apply styles to selected only under certain conditions. For example, if we wanted to apply a specific style to elements, but only when we nest them inside an element, we would write a rule like this: li em { Declarations go here … }For example, if we wanted to apply a specific style to elements, but only when we nest them inside an element, we would write a rule like this: li em { Declarations go here … }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Using Descendant Selectors Add the following rules to lounge.css : #elixirs h2 { color: black; } #elixirs h3 { color: #D12C47; }Add the following rules to lounge.css : #elixirs h2 { color: black; } #elixirs h3 { color: #D12C47; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Keep Goin' … Add these rules, as well: #elixirs a:link, #elixirs a:visited { color: #007E7E; } #elixirs a:hover { background-color: #F88396; color: #0D5353; }Add these rules, as well: #elixirs a:link, #elixirs a:visited { color: #007E7E; } #elixirs a:hover { background-color: #F88396; color: #0D5353; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science One More … Let's also create a style for the copyright information at the bottom of the page.Let's also create a style for the copyright information at the bottom of the page. First, find the at the bottom of the page and then nest it inside the following : … First, find the at the bottom of the page and then nest it inside the following : …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Adding Style to the Copyright Add the following rule to lounge.css : #copyright { font-size: 70%; text-align: center; line-height: normal; margin-top: 30px; }Add the following rule to lounge.css : #copyright { font-size: 70%; text-align: center; line-height: normal; margin-top: 30px; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Applying Styles to Inline Text/Elements So far, we've been concentrating on applying styles to structural tags like, or.So far, we've been concentrating on applying styles to structural tags like, or. What if we wanted to apply a style to just a few words (inline text) or to an inline element?What if we wanted to apply a style to just a few words (inline text) or to an inline element? We could use the element …We could use the element …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Element We use the element to apply styles to inline text or inline elements.We use the element to apply styles to inline text or inline elements. Like, applying a without an associated style class or id declaration will do nothing.Like, applying a without an associated style class or id declaration will do nothing.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Add the following rules to your lounge.css file:.cd { font-style: italic; }.artist { font-weight: bold; }Add the following rules to your lounge.css file:.cd { font-style: italic; }.artist { font-weight: bold; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Keep Goin' … Look for the under the title labeled "What's playing at the Lounge." For each apply the cd and artist classes, like this: Buddha Bar, Claude Challe Look for the under the title labeled "What's playing at the Lounge." For each apply the cd and artist classes, like this: Buddha Bar, Claude Challe

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science What's to come? Next unit, we'll consider the advanced layout features of CSS.Next unit, we'll consider the advanced layout features of CSS. Just to give you a taste, let's try a very simple layout.Just to give you a taste, let's try a very simple layout. First, we need to make a few minor modifications to our lounge.html …First, we need to make a few minor modifications to our lounge.html …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Movin on Up! Find the elixirs and move the entire to just below the containing the lounge logo, near the top of the page.Find the elixirs and move the entire to just below the containing the lounge logo, near the top of the page. Next, add the following declaration to the #elixirs rule: float: right;Next, add the following declaration to the #elixirs rule: float: right;

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Next Time … Next time, we cover the following:Next time, we cover the following: –Understanding the "cascade" in Cascading Style Sheets –Working with advanced page layout

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Questions?

References Freeman, Elisabeth and Eric Freeman. Head First HTML with CSS & XHTML. Sebastopol, CA: 2006.Freeman, Elisabeth and Eric Freeman. Head First HTML with CSS & XHTML. Sebastopol, CA: Neiderst-Robbins, Jennifer. Web Design in a Nutshell, Third Edition. Sebastopol, CA: 2006.Neiderst-Robbins, Jennifer. Web Design in a Nutshell, Third Edition. Sebastopol, CA: 2006.