1 / 25

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS). Examples of CSS. CSS provides a powerful and still-evolving toolkit of style properties to develop advanced Web apps , e.g.: http://andrew-hoyer.com/experiments/rain/ http://vlog.it/ http://lab.simurai.com/monster/ http://andrew-hoyer.com/experiments/walking/.

ena
Download Presentation

Cascading Style Sheets (CSS)

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. Cascading Style Sheets (CSS) CSCB20 Databases and Web Applications

  2. Examples of CSS • CSS provides a powerful and still-evolving toolkit of style properties to develop advanced Web apps, e.g.: • http://andrew-hoyer.com/experiments/rain/ • http://vlog.it/ • http://lab.simurai.com/monster/ • http://andrew-hoyer.com/experiments/walking/ CSCB20 Databases and Web Applications

  3. Motivation • The “Style” in Cascading Style Sheets (CSS) refers to the presentation or appearance or “layout” of a document for viewing, as distinct from it’s structure or meaning • How would you design style support into HTML documents? • What are the advantages and disadvantages of your approach? CSCB20 Databases and Web Applications

  4. Separation of Concerns • HTML (and it’s cousin XML) are supposed to be about document structure and meaning • Early in the development of HTML, structure and style were intermixed – special tags to control style • What’s wrong with this approach? • style is highly localized – difficult to apply changes across entire document or set of documents • style is not reusable across elements without copying (repeating) style code • difficult to change style or structure without risking changing the other CSCB20 Databases and Web Applications

  5. Separation of Concerns • Burdening HTML with style details leads to tight coupling between style and structure • hard to maintain – style information spread across documents, changing style requires numerous consistent html tag changes (error prone) • difficult to divide responsibility (labour) between designers and document-content creators, who, in the case of dynamic documents, are software developers, not stylists CSCB20 Databases and Web Applications

  6. Binding style to document elements • Want a flexible way to bind style(s) to various subsets of document elements • Desirable Properties? • DRY (don’t repeat yourself): should be able to compactly define style to apply to a whole class of elements • Inheritance:styles of outer elements should be inherited by inner/nested elements • Structural independence – should be able to apply style to document components wherever they occur • Context awareness – applied style may vary depending on the structural context in which an element appears CSCB20 Databases and Web Applications

  7. inheritance • Most styles are inherited into nested elements. • One way to set a "default" document style is by setting style property values for the <body> element. <style type="text/css"> body { color: green; font-size: 200% } em { font-weight: bold } </style> ... <p>This <em>text</em> is green.</p> CSCB20 Databases and Web Applications

  8. grouping as selector • Multiple comma-separated elements can be grouped, with common style applied to all. <style type="text/css"> h1, h3 { color: blue; font-family: helvetica } h2 { font-size: 36pt; color: red; font-family: courier new } </style> … <body> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> </body> without CSS with CSS CSCB20 Databases and Web Applications

  9. class attribute as selector • Special case of attribute-selector for HTML documents • HTML elements can be tagged with possibly many classes • Style properties can be set for all elements of a given class <style type="text/css"> .red { color: red } .large { font-size: 30pt } h1.large { font-size: 40pt } </style>... <h1 class="large">A Heading</h1> <p class="large red">This <em>is</em> the first paragraph.</p> <p class="red">This <em>is</em> the second paragraph.</p> CSCB20 Databases and Web Applications

  10. id attribute as selector • XHTML and XML allow any element to have an"id" attribute whose value is unique within the document • can be used as the target for a hyperlink • used by JavaScript to identify a unique element, e.g. to place dynamic content retrieved from a server • used to associate style properties with a particular element, e.g. one paragraph from among a list of them <style type="text/css"> #myid { color:red } </style> <p id="myid">Paragraph text in red.</p> • Whereas a class selector may apply to several elements, an id selector applies to at most one element within a given XHTML (or XML) document CSCB20 Databases and Web Applications

  11. Contextual Selection • CSS can match a search-pattern on a stack of open elements (designated by whitespace- separated list of selectors) • Ancestors, not just parents can affect style • Can mix and match the various types of selectors into selector “sentences”: • div.chapterp.first { font-size: 120% } apply font-size style to paragraph elements with class “first” that occur as descendants of div elements with class “chapter” • #x23a p .foo { color: red } CSCB20 Databases and Web Applications

  12. CSS Selector Summary context is: CSS_selectors { style_property_declarations } • Element Type E • Grouping E, F, G • Universal * • Class [E].classvalue (element name E optional – meta brackets) • Id [E]#myID • Contextual • Descendent E F • Child E > F • Adjacent E + F • Pseudo-element E:pseudo-element • Attribute E[foo="hi"] (literal brackets) CSCB20 Databases and Web Applications

  13. CSS Style Properties • Sufficiently expressive for fine-grained control • don’t give designers a reason to cheat • Too many properties to cover comprehensively (many dozens) • We’ll focus on a few of the most important ones • text properties • layout and positional control, including the “box model” CSCB20 Databases and Web Applications

  14. CSS Style Properties: color • color used to specify foreground element color, especially text • background-color used to specify element background color • color specified with a predefined name, e.g. “red”, or an RGB (red-green-blue) value expressed in Hex as 6-digit values, e.g. #A0B0C0, or decimal as 3 values in the range 0-255, e.g. rgb(10,255,100) p { color: green; background-color: #D0E0F0; } q { color: rgb(100,200,10); } CSCB20 Databases and Web Applications

  15. Box Formatting Model margin (transparent) • Provides a means to control the spatial layout of elements; the basis for position-oriented properties border padding (transparent) content element width box width CSCB20 Databases and Web Applications

  16. Box Properties • width, height of box: .small { width: 100px; height: 20px }; • margin, margin-top, margin-right, margin-bottom, margin-left, and similar properties for border and padding • abbreviated way to specify margin, padding: list of values that provide the top/right/bottom/left widths, e.g. span { margin: 1em 2em 3em 4em; } • Units can be expressed in “px” (pixels), “cm” (centimeters), “em” (width of M character), “%” (relative to surrounding text) – generally preferable to use relative units such as “em” or “%” rather than absolute units like “cm”, e.g.: div { padding: 1em 2px; margin 2px, 1%, 4cm; } CSCB20 Databases and Web Applications

  17. Box Properties: borders • border property has values to control thickness, style, size of border on each of 4 sides of element border-color, border-width, border-style, border, and many properties for specific sides such as border-bottom-color, e.g. h3 { border-color: blue; border-style: solid; border-width: thin; } h4 { border: #E100D3 dashed 5px; } • CSS3 adds a new border-radius property for curved borders CSCB20 Databases and Web Applications

  18. Font and Text Properties • font-style: normal | italic | oblique • italic matches if keyword italic or oblique found in known font list • else must match exactly • font-variant: normal | small-caps • small-caps satisfied if font labelled as such or can be synthesized • font-weight: normal | bold | bolder | lighter | 100-900 • always matches • font-size: absolute | relative | length | percentage • matches within UA-defined tolerance • scalable fonts matched to within pixel • bitmapped fonts matched within as much as 20% • text-align: left | center | right • CSS3 text-shadow: horiz-shadowvert-shadow color, e.g. h2 { text-shadow: 5px 5px #EEDDEE } CSCB20 Databases and Web Applications

  19. Font Properties • font-family: [family-name | generic-family] [, [family-name | generic-family]]* • e.g. (means what?): body { font-family: gill, helvetica, sans-serif } • generic-families: • serif • sans-serif • cursive • fantasy • monospace CSCB20 Databases and Web Applications

  20. Floats • a floated element shifts out of the normal document left-to-right layout flow • if there is text beside a float, the text will wrap around the floated element .right_img { float: right; width: 200px; } <img class=“right_img” src=“…” alt=“…”> • to escape the wrapping behavior, use the “clear” property, which prevents overlap of floating elements q { clear: right; } • clear property possible values: left, right, both, none (default) CSCB20 Databases and Web Applications

  21. Backgrounds • background-color – color used too fill the background for an element body { background-color: #1A2B3C ; } • background-image – image used for background div.main { background-image: url(“img/movie_poster.jpg”); } • background-repeat – repeat a background image, like tiling div.main { background-image: url(“img/movie_banner.jpg”); background-repeat: repeat-x; /* horizontal repeat */ } CSCB20 Databases and Web Applications

  22. Associating CSS with documents • CSS in a separate document, e.g.: <link rel="stylesheet" type="text/css" href="mystyle.css"> • CSS in same document as HTML • Global: style defined within the document head applies to the entire document <style type="text/css"> style definitions … </style> • Local: style attributes on elements apply only to individual elements <p style="color:blue"> paragraph text in blue </p> • Which form is best? CSCB20 Databases and Web Applications

  23. Associating CSS with documents <html> <head> <title>CSS Linking Example</title> <linkrel="stylesheet"type="text/css" href="http://www.utsc.utoronto.ca/style.css"/> <styletype="text/css"> h1 { color: blue } /* local to document */ </style> </head> <body> <h1>Heading in blue</h1> <pstyle="color:green">Paragraph in green.</p> </body> </html> CSCB20 Databases and Web Applications

  24. Assignment-Related Examples • Assignment 2 asks you to display content in 2-column format, without using CSS3 column-* properties • One way to accomplish this is to take advantage of the way multiple floats are ‘stacked’ during layout. • E.g. If you have a set of right-floated elements, then during layout, the first will be laid out at the right edge of the container, the second will appear to its left, and so on. The following style illustrates this behavior: .right { width:25%; float: right; } <div class="right">…</div><div class="right">…</div> CSCB20 Databases and Web Applications

  25. Assignment-Related Examples • Assignment 2 asks you to display an image and some text together within a container. • A convenient way to accomplish this is to float the image beside the text; however, in some cases, the image may be larger than the text, causing the image to hang out over the border of the container • We can avoid this by utilizing the ‘overflow’ property on the text, with a value of hidden to automatically expand the text area to match the height of the image. p { overflow: hidden; } CSCB20 Databases and Web Applications

More Related