1 / 15

Outline

Outline. Cascading style sheets Style sheet properties. Cascading style sheets. A language describing style constructs such as fonts, colors, and position Two major categories of styles Layout properties Formatting properties

macon
Download Presentation

Outline

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. Outline • Cascading style sheets • Style sheet properties

  2. Cascading style sheets • A language describing style constructs such as fonts, colors, and position • Two major categories of styles • Layout properties • Formatting properties • Styles are applied in a cascading manner (Tag level styles are the most specific) • Default styles of a browser • Styles specified in an external CSS file • Styles specified in the head section • Styles specified in the tag

  3. Tag level styles • Most XHTML tags have a style attribute. • Syntax: • <tagname style=“styleproperty:value; styleproperty:value;”> • E.g., • <body style=“font-family:cursive; text-align:left”>The body text follows this style, unless overridden by a more specific style. </body> • <p style=“font-size:12pt; color:blue”>This paragraph has blue letters with 12pt font</p> • <td style=“font-size:1.5em; font-weight:bold”>

  4. Document level styles • Specified in the head section between <style> and </style> tags • Can create classes of styles for any tag • E.g., <head> <style type=“text/css”> p {font-size:12pt;} p.c {color:blue; text-align:center;} p.l {color:red; text-align:left;} p.r {color:green; text-align:right;} </style> </head>

  5. Document level styles • In the document body, use the tag with the style classes • E.g., <body> <p>This paragraph uses normal style text </p> <p class=“c”>This paragraph is centered and blue. </p> <p class=“l”>This paragraph is left justified and red. </p> <p class=“r”>This paragraph is right justified and green. </p> </body>

  6. External style sheet • A set of styles can be created in a separate file with extension “css” • Link this external style sheet in your xhtml document • E.g., in a separate text file “mystyle.css” you have p {font-size:12pt; text-indent:5px; color:blue} p.b {font-size:10pt; font-weight:bold;} • In the xhtml document, you will have <head> <link rel=“stylesheet” type=“text/css” href=“mystyle.css” /> <head> <body> <p>This is a normal paragraph with 12pt and blue text. </p> <p class=“b”>This paragraph uses 10pt and bold text. </p> </body>

  7. <div> and <span> • Useful tags for creating containers. Once you have a container, you can position it, you can apply style to it, make it visible/invisible, etc. • Container may contain paragraphs, text, xhtml tags, images, tables, etc.

  8. Style properties: font • Sub-properties • font-family : serif, cursive, sans-serif, fantasy, times-roman, ‘arial black’ • font-size : 10pt, 150%, 1.5em, xx-large, larger • font-style : normal, italic, oblique • font-weight : normal, bold, bolder, lighter, 100, 200, …, 900 • You can also specify more than one font property in a single “font” style • E.g.: font: bold italic 14pt cursive • Text color can be specified by “color” style

  9. Style properties: background • Sub-properties • background-color • background-image :url(“…”) • background-position :top, center, bottom, … • background-repeat :repeat-x, repeat-y, no-repeat • You can also specify more than one background properties in a single “background” style • E.g.: background: navy url(“me.gif”)

  10. Style properties: borders • Sub-properties • border-width • border-style : solid, double, dashed, dotted, none • border-color • You can specify these border properties in a single “border style” • E.g., border: red 10px double • You can specify a specific border by using one of the following • border-left • border-right • border-top • border-bottom

  11. Style properties: Margins • Sub-properties • margin-top • margin-right • margin-bottom • margin-left • margin • padding-top • padding-right • padding-bottom • padding-left • padding • Margin adds spacing around element, padding adds spacing inside element

  12. Style properties: Text • Sub-properties • text-align :left, right, center, justify • text-decoration : underline, italic, line-through, none • text-indent • text-transform : none, capitalize, uppercase, lowercase • vertical-align : top, middle, bottom, sub, super

  13. Style properties: position • Position can be: • Relative • Absolute • Can specify an offset from • Top • Bottom • Left • Right • In • px • % • em • Cm • E.g., <img src=“…” style=“position:absolute;top:100px; left:200px” />

  14. Style properties: visibility, display • Visibility • Values: • Visible (default) • Hidden • E.g.: <div style=“visibility:hidden”> • Space is reserved for the item • Display • Values: • inline (default), block, list-item, table • None is like hidden visibility except it does not reserve space

  15. Events • E.g., • onMouseOver • onClick • onMouseOut • <p style=“color:green” onMouseover=“style.color=‘red’”>This paragraph changes to red when moused over.</p> • <p style=“color:green” onClick=“style.visibility=‘hidden’”>Click to hide me</p>

More Related