1 / 39

Today

Today. CSS A project planning document Project designing. The Breakdown. All web pages can be broken down into bucketized content areas These areas can updated by changing the code on every page, - or - By using cascading style sheets!. Advantages of Style Sheet s. Saves time

marisa
Download Presentation

Today

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Today • CSS • A project planning document • Project designing sawan chourey 8435414606

  2. The Breakdown • All web pages can be broken down into bucketized content areas • These areas can updated by changing the code on every page, - or - • By using cascading style sheets! sawan chourey 8435414606

  3. Advantages of Style Sheets • Saves time • Easy to change • Keep consistency • Give you more control over layout • Use styles with JavaScript => DHTML • Make it easy to create a common format for all the Web pages sawan chourey 8435414606

  4. Applying a single style sheet to multiple documents sawan chourey 8435414606

  5. Basic Structure of a Style • Each definition contains: • A property • A colon • A value • A semicolon to separate two or more values • Can include one or more values • h1 {font-size:12pt;color:red} sawan chourey 8435414606

  6. Style Precedence • External style sheet • Embedded styles • Inline styles sawan chourey 8435414606

  7. Three Style Types • Inline styles • Add styles to each tag within the HTML file • Use it when you need to format just a single section in a web page • Example • <h1 style=“color:red; font-family: sans-sarif”>IU</h1> sawan chourey 8435414606

  8. Three Style Types • Embedded or internal styles • A style is applied to the entire HTML file • Use it when you need to modify all instances of particular element (e.g., h1) in a web page • Example • <style> • h1 {color:red; font-family:sans-serif} • </style> sawan chourey 8435414606

  9. Creating an Embedded Style <head> <title>Embedded Example</title> <style> (default is “text/css”) Style declarations </style> </head> • A style declaration: • Selector {attribute1:value1; attribute2:value2; …} • Selector = an element in a document (e.g., a header or paragraph) sawan chourey 8435414606

  10. An Example of an embedded style (p. 353 Fig 7-2) <head> <title>Getting Started</title> <style type=“text/css”> h1 {font-family: sans-serif; color: organge} </style> </head> sawan chourey 8435414606

  11. Three Style Types • External style sheets • An external style sheet is a text file containing the style definition (declaration) • Use it when you need to control the style for an entire web site • Example • h1, h2, h3, h4, h5, h6 {color:red; font-family:sans-serif} • Save this in a new document using a .css extension sawan chourey 8435414606

  12. Creating an External Style Sheet • Open a new blank document in Notepad • Type style declarations • h1 {color:red; font-family:sans-serif;} • Do not include <style> tags • Save the document as filename.css sawan chourey 8435414606

  13. Linking to Style Sheets 1 • Open an HTML file • Between <head> and </head> add • <link href=URL rel=“relation_type” type=“link_type”> • URL is the file.css • Relation_type=“stylesheet” • Link_type=“text/css” • Save this file and the .css file in the same web server directory sawan chourey 8435414606

  14. An example of an external style sheet with an original html file <head> <title>Getting Started</title> <link href=“scraps.css” rel=“stylesheet” type=“text/css” /> </head> h1 {font-family: sans-serif; color: orange} b {color: blue} Text file of css named “stylesheet” html file sawan chourey 8435414606

  15. Style Sheet Strategies • Wherever possible, place your styles in external style sheets • Take advantage of the power of CSS to have control over an entire Web site sawan chourey 8435414606

  16. Style Sheet Strategies • At the top level of your web site: define a default global.css style sheet • Refine styles at sublevels with a section.css style sheet • Try to avoid using styles in tags sawan chourey 8435414606

  17. Attribute Selectors • Create an attribute selector to select an element based on the element’s attributes. • See figure 7-13 in your text for a list of attribute selectors sawan chourey 8435414606

  18. Using IDs and Classes • Use an id to distinguish something, like a paragraph, from the others in a document. • For example, to identify a paragraph as “head”, use the code: <p id=“head”>… </p> sawan chourey 8435414606

  19. Working With Ids • To create an ID for a specific tag, use the property: • <tag ID=id_name> • To apply a style to a specific ID, use: • #id_name {style attributes and values} sawan chourey 8435414606

  20. Classes • HTML and XHTML require each id be unique– therefore an id value can only be used once in a document. • You can mark a group of elements with a common identifier using the class attribute. <element class=“class”> … </element> sawan chourey 8435414606

  21. Applying a style to a class sawan chourey 8435414606

  22. Working With Classes • To create a class, enter the following in the HTML tag: • <tag CLASS=class_name> • <h1 CLASS=FirstHeader>IU</h1> • class_name is a name to identify this class of tags • To apply a style to a class of tags, use: • tag.class_name {style attributes} or • .class_name {style attributes} sawan chourey 8435414606

  23. Working With Classes and Ids • The difference between the Class property and the ID property is that the value of the ID property must be unique: • you can’t have more than one tag with the same ID value • You can apply the same Class value to multiple document tags sawan chourey 8435414606

  24. Working With DIV • <DIV> tag is used for blocks of text, e.g., paragraphs, block quotes, headers, or lists • To create a container for block-level elements, use: • <DIV CLASS=class_name> • Block-level elements • </DIV> • Class_name is the name of the class • You can substitute the ID proper for the Class property (with ID, the syntax for CSS style, #id_name {style attributes and values} sawan chourey 8435414606

  25. Working With <DIV> (p. 372) DIV.Slogan {font-weigh:bold} style Maxwell…: “We teach… Resulting text <DIV CLASS=Slogan>Maxwell Scientific’s new Slogan is:<BR>”We teach science”</DIV> HTML code sawan chourey 8435414606

  26. Working With <span> • With the <span> tag, you can use inline elements, e.g., <B>, <I> • To create a container for inline elements, use: • <span CLASS=class_name> • inline elements • </span> sawan chourey 8435414606

  27. CSS for Page Layout • CSS manipulates the size and location of block-level elements • Block-level elements in HTML: • Heading tags, e.g., <H1>, <H2> • <p> • <blockquote> and <address> tags • List tags, e.g., <ul>, <ol>, <dl> • <div> • <body> • <hr> • <img> sawan chourey 8435414606

  28. CSS for Page Layout • Parts of the block-level elements: • Margin • Border • Padding sawan chourey 8435414606

  29. padding border margin CSS for Page Layout (Carey, 7.49) I appreciate the prompt delivery of the pack of star disks. sawan chourey 8435414606

  30. Controlling the Margins • To define the margins of an element, use: • margin:value • where value = a length value (“em” is often used), a percentage (a margin proportional to the element’s width, or auto sawan chourey 8435414606

  31. Controlling the Margins • To set margins on a side, use: • margin-top • margin-right • margin-bottom • margin-left • E.g., LI {margin-left:2em; margin-right:2em; margin-top:1em; margin-bottom:1em} sawan chourey 8435414606

  32. Setting the Padding Size • To define padding, use: • padding: value • where value = a length value or a percentage (a padding proportional to the element’s width) sawan chourey 8435414606

  33. Setting the Padding Size • To set margins on a side, use: • padding-top • padding-right • padding-bottom • padding-left sawan chourey 8435414606

  34. Formatting the Border • Border can be set in three ways: • border-width • border-style • border-color sawan chourey 8435414606

  35. Formatting the Border • To set the border, use: • border:width_value style color • To set borders on a side, use: • border-top • border-bottom • border-left • border-right • Carey 7.52-7.53 sawan chourey 8435414606

  36. Formatting Width & Height of Block-Level Boxes • To set the width of a block-level element, use: • width:value • height:value • where value can be a length value, a percentage, or auto • E.g., textarea {width:225px; height:100px} sawan chourey 8435414606

  37. Using the Float Attribute (p. 371-372) • To float (wrap) a block-level element, use: • float:margin • Where margin = right, left, none • To prevent an element from wrapping, use: • Clear:margin • Where margin=right, left, both, none sawan chourey 8435414606

  38. Using the Float Attribute float:right width:50px clear:right float:right width:50px sawan chourey 8435414606

  39. Formatting Hypertext Links • To remove the style of underlining hypertext, use: • A {text-decoration:none} • 4 types of hyperlinks can be modified: • A:visited {styles for previously visited links} • A:link {styles for links that have never visited} • A:active {styles for links that are currently being clicked} • A:hover {styles when the mouse cursor is hovering over the link} sawan chourey 8435414606

More Related