Module 2 (VII): CSS [Part 4]

Size: px

Start display at page:

Download "Module 2 (VII): CSS [Part 4]"

Cory George
5 years ago
Views:

1 INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester (081) Module 2 (VII): CSS [Part 4] Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals alfy@kfupm.edu.sa Objectives/Outline Objectives Master block level elements to control the layout Learn how to create menu bars and drop-down menus Learn about various media types Learn about user defined styles and understand the cascading of multiple style sheets Outline Block Level Elements Div and Span Elements Positioning Dimensioning Floating Z-index Layout Design Media Types User Defined Styles Cascading of Style Sheets Skinning Concept Tools 2.2 1

2 Block Level Elements Inline Elements do not have a line break before and after; flow with the text Block Level Elements - modify the flow of any text around them <div> general-purpose box <h1>... <h6> All headings <p> Paragraph <ul>, <ol>, <dl> Lists (unordered, ordered and definition) <li>, <dt>, <dd> List items, definition list terms, and definition list definitions <table> Tables <blockquote> Like an indented d paragraph, meant for quoting passages of text <pre> Indicates a block of preformatted code <form> An input form <body> 2.3 Block Level Elements (cont.) The box model for a block level element 4 th 3 rd 2 nd 1 st content Padding Border Margin Content: text & web page elements in the container Padding: area between the content and the border Border: area between the padding and the margin Margin: the empty space between the element and adjacent elements 2.4 2

3 Block-Level Elements Attributes Margins margin-top margin-right margin-bottom margin-left Padding padding-top padding-right padding-bottom padding-left Border Styles border-top-style border-right-style border-left-style border-bottom-style border-style Border Width border-top-width border-right-width border-left-width border-bottom-width border-width Border Colors border-top-color border-right-color border-left-color border-bottom-color border-color 2.5 Block-Level Elements Attributes (cont.) Border style values solid dashed dotted double outset inset groove ridge 2.6 3

4 CSS buttons <style type="text/css">.button { border: 2px inset #cccccc; width: 100px; padding: 3px 15px; color: #ffffff; background-color: #006600; font-family: Arial, Helvetica, sansserif; font-size: 16px; font-weight: bold; text-align: center; text-decoration:none; } a.button:link { color : #FFFFFF; } a.button:visited { color : #cccccc; } a.button:hover { color : #66cc33; border:2px outset #cccccc; } </style> <a href="index.html" class="button">home</a> <a href="products.html" class="button">products</a> <a href="sevices.html" class="button">services</a> <a href="contact.html" class="button">contact</a> <a href="about.html" class="button">about</a> 2.7 DIV Design DIV is a block-level element used to configure a specially formatted division or area of a Web page There will be a line break before and after the division Can contain other block-level and inline elements Can be used to create the skeleton of the page (an alternative to tables) DIV acts as a container like a table cell CSS can control position the DIV The goal is to entirely control the layout by the CSS Thus separating content from the layout and formatting of the page Example <style type="text/css">.footer { font-size: small; text-align: center; } </style> <div class= footer">copyright 2009</div> 2.8 4

<span> tag An inline-level element configure a specially formatted area displayed in-line with other elements, such as within a paragraph Works similar to <div> but no line break before and after the

special { color: red; font-weight: bold;} </style> <p>this is a cool course on <span class= special"> Web Development </span>; You should take it!!!! </p> 2.

5 <span> tag An inline-level element configure a specially formatted area displayed in-line with other elements, such as within a paragraph Works similar to <div> but no line break before and after the span group a number of non-block level tags (inline elements) together like <b> and <i> Example <style type="text/css">.special { color: red; font-weight: bold;} </style> <p>this is a cool course on <span class= special"> Web Development </span>; You should take it!!!! </p> 2.9 Example div { text-align: center; width: 50%; position: relative; left: 25%; border-width: 4px }.medium { border-width: medium }.thin { border-width: thin }.solid { border-style: solid }.double { border-style: double }.groove { border-style: groove }.inset { border-style: inset }.outset { border-style: outset }.dashed { border-style: dashed }.red { border-color: red }.blue { border-color: blue }

6 Normal Flow Browser display of elements in the order they are coded in the Web page document Two DIVs one after the other Two DIVs nested First div element First div element 2 nd div element 2 nd div element 2.11 Relative Positioning Changes 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; }

7 Absolute Positioning Precisely specifies the 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; } 2.13 Elements Dimensions A block level element can have its width and height set using relative or absolute values Be careful especially with height because if text exceeds the size of the area allocated unpredictable things might occur Content might sometimes exceed the set boundaries and unpredictable things might occur Set the overflow property to scroll to add scroll bars if the text overflows the boundaries set for it Example: Keep the <body> to 75% of the width of the browser window body {width:75%}

8 Example <div style = "width: 20%"> <div style = "width: 80%; text-align: center"> <div style = "width: 20%; height: 150px; overflow: scroll"> 2.15 Floating an Element 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. To get text aligned around the block level tag, use the float attribute to float an element to the left or to the right float: right left To prevent a floating element from appearing along-side a block level element use clear attribute clear: right left both

9 Floating an Element (cont.) Using the float attribute 2.17 Floating an Element (cont.) Using the clear attribute

10 Z-Index Property Modifies the stacking order of elements on a Web page. The default z-index value is 0". Elements with higher z-index values will appear stacked on top of elements with lower z-index values rendered on the same area of the page Page Layout Sample page layouts Using frames (not recommended) Using tables Using DIV element

21 2-Column Page Layout body {margin:0; font-family:verdana, Arial, sans-serif; }

width:100px; } #rightcolumn { margin-left:100px; background-color:#ffffff;

border-bottom: 1px solid #000000; padding:10px; }.

11 Page Layout (cont.) Except for imagelogo, all elements on this page follow normal flow Column Page Layout body {margin:0; font-family:verdana, Arial, sans-serif; } #wrapper { background-color:#e8b9e8; color:#000066; } #leftcolumn { float:left; width:100px; } #rightcolumn { margin-left:100px; background-color:#ffffff; color:#000000; } #logo { background-color:#eeeeee; color: #cc66cc; font-size:x-large; border-bottom: 1px solid #000000; padding:10px; }.content {padding:20px 20px 0 20px; } #floatright {margin:10px; float:right; }.footer {font-size:xx-small; text-align:center; clear:right; padding-bottom:20px; }.navbar{ text-decoration:none; margin: 15px; display:block; }

12 3-Column Layout A common Web page layout consists of a header across the top of the page with three columns below: navigation, content, and sidebar. If you are thinking about this layout as a series of boxes you re thinking along the right lines for configuring pages using CSS! Column Layout (cont.) container sets default background color, text color, and an minimum width Left-column navigation float: left; width:150px; Right-column content float: right; width:200px; Center column uses the remaining screen room available room after the floating columns display margin: 0 200px 0 150px; Footer clears the float clear:both;

Display Property Configures how and if an element is displayed

display: block ; The element is rendered as a block element --even

display: inline; The element will be rendered as an inline element

13 Display Property Configures how and if an element is displayed display: none ; The element will not be displayed. display: block ; The element is rendered as a block element --even if it is actually an inline element, such as a hyperlink. display: inline; The element will be rendered as an inline element even if it is actually a block element such as a <li> Building a Drop-Down Down Menu

menu a { display: none; 22 border-top: 2px solid #225599; 23 background-color: white; 24 width: 10em; 25 text-decoration: none; 26 color: black } 27 div.

14 Building a Drop-Down Down Menu (cont.) 12 <style type = "text/css"> 13 body { font-family: arial, sans-serif } 14 div.menu { font-weight: bold; 15 color: white; 16 border: 2px solid #225599; 17 text-align: center; 18 width: 10em; 19 background-color: color: # } 20 div.menu:hover a { display: block } 21 div.menu a { display: none; 22 border-top: 2px solid #225599; 23 background-color: white; 24 width: 10em; 25 text-decoration: none; 26 color: black } 27 div.menu a:hover { background-color: #dfeeff } 28 </style> 29 </head> 30 <body> 31 <div class = "menu">menu 32 <a href = "#">Home</a> 33 <a href = "#">News</a> 34 <a href = "#">Articles</a> 35 <a href = "#">Blog</a> 36 <a href = "#">Contact</a> 37 </div> 38 </body> 39 </html> 2.27 CSS Media Types allow a programmer to decide what a page should look like depending on the kind of media being used to display the page

15 CSS Media Types (cont.) Most common media type for a web page is the screen media type, which is a standard computer screen A block of styles that applies to all media types is declared all and enclosed in curly braces To create a block of styles that apply to a single media type such as print, print and enclose the style rules in curly braces 2.29 CSS Media Types (cont.) Other media types in CSS 2 include: handheld Designed for mobile Internet devices braille For machines that can read or print web pages in braille aural Allow the programmer to give a speech-synthesizing web browser more information about the content of the web page print Affects a web page s appearance when it is printed

16 Example 10 <style type = "text/css"> all 12 { 13 body { background-color: #4488aa } 14 h1 { font-family: verdana, helvetica, sans-serif; 15 color: #aaffcc } 16 p { font-size: 12pt; 17 color: white; 18 font-family: arial, sans-serif } 19 } /* all declaration. */ print 21 { 22 body { background-color: white } 23 h1 { color: #008844} 24 p { font-size: 14pt; 25 color: #4488aa; 26 font-family: "times new roman", times, serif } 27 } /* print declaration. */ 28 </style> 2.31 Skinning Concept Like a cell phone, web pages can have face plates (skins) that are changeable The CSS skins have nothing to do with the XHTML markup External CSS file Easily modifiable Faster Redesign The best example showing the power of CSS skinning! CSS Zen Garden

17 CSS Comments You can add comments to explain your CSS code to enhance readability Comments are ignored by browsers CSS comment begins with "/*", and ends with "*/, Example /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial } 2.33 User Style Sheets Users can define their own user style sheets to format pages based on their preferences Absolute font size measurements override user style sheets, while relative font sizes will yield to a user-defined style User style sheets are not linked to a document; rather, they are set in the browser s options

User Style Sheets (cont.) User style sheet in Internet Explorer 7 2.

Author may specify style rules for a document external embedded inline tag

documents The browser will also have its own set of default rendering behaviors

18 User Style Sheets (cont.) User style sheet in Internet Explorer Cascading Multiple Styles A style sheet may originate from several sources The Author may specify style rules for a document external embedded inline tag attribute The User may also specify style behaviors for viewing one or more documents The browser will also have its own set of default rendering behaviors Multiple styles will be blended together by applying the styles in the order of precedence (specificity)

19 Cascading Multiple Styles (cont.) Browser Defaults User Defined Styles External Styles Embedded Styles Inline Syles XHTML Attributes 2.37 Tools TopStyle Pro from Bradbury Software CSS / XHTML / HTML Editor p p

20 Q & A? 2.39 References Some useful links with examples and other resources: Internet and World Wide Web How to Program, 4/e, H. M. Deitel, P. J. Deitel, and A. B. Goldberg, Pearson Education Inc., Chapter 5. Web Development and Design Foundations with XHTML, 4/e, Pearson Education Inc Chapters W3C Cascading Style Sheets: CSS2 Specification: CSS resources W3 Schools CSS Tutorial: CSS Editors Best CSS stand alone editor is Topstyle Pro CSS Validators Index DOT CSS (The Advanced CSS Reference) Coder Tools

Creating Layouts Using CSS. Lesson 9

Creating Layouts Using CSS. Lesson 9 Creating Layouts Using CSS Lesson 9 CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control