• Save
Upcoming SlideShare
Loading in...5







Total Views
Slideshare-icon Views on SlideShare
Embed Views



1 Embed 1

http://manoelneves.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    CSS CSS Presentation Transcript

    • CSS- Cascading Stylesheets Layout for web and XML
    • Cascading Stylesheets
      • A language to define how XML documents, html documents and XHTML documents should be rendered for screen, paper, TV, sound …
      • Reommendation from W3C
      • Not in itself XML-based, but operates on XML structures
    • CSS - Historical perspektive
      • html was built to structure text documetns with links, regardless of presentation medium.
      • The commercial success of the web drove a need to make more estetically pleasing content.
      • Logical elements (like <h3>) was used to get a certain graphical effect, instead of using it to indicate a logical content. New elements added without control.
      • Solution: Make an entirely new language for laout: CSS
    • Examples
      • Now
      • File b.css
      • p {
      • font-family: Helvetica, sans-serif;
      • }
      • File b.html
      • <?xml-stylesheet type=&quot;text/css&quot; href=&quot;b.css&quot;?>
      • […]
      • <p>
      • Text in helvetica
      • </p>
      • […]
      Before File a.html […] <p> <font face=&quot;Helvetica&quot;> Text in Helvetica </font> </p> […]
    • Internal or external CSS
      • A CSS can either be placed in the actual xml/html document, or as an external filef.
      • An internal CSS has the advantage that only one http request is required
      • However, the drawback is that copies of the CSS code must be placed in all documents using it, making updates more difficult.
    • Associating an XML-document ->CSS
      • type: MIME-typen text/css
      • href: URI to the css-file
      • charset: Character set
      • title: Title
      • media: The media for which the stylesheet should be used.An XML document can have several associated stylesheets. Which one(s) is used depends on the output medium: Screen, tty, tv, projection, handheld, print, braille, aural or all
      • To associate an XML document with a CSS, a processing instruction can be used.
      • Processin instruction in an XML-fil
      • <?xml-stylesheet
      • type=&quot;text/css&quot;
      • href=&quot;b.css&quot;
      • charset=&quot;ISO8859-1&quot;
      • title=”My Stylesheet&quot;
      • media=&quot;screen&quot;?>
    • Associating an HTML-document ->CSS
      • An internal CSS can be added using the style-element in the element head.
      • internal CSS in an HTML.-fil
      • <html>
      • <head>
      • <style type=&quot;text/css&quot;>
      • body { background-color: #ffffff; }</style>
      • </head>
      • <body>
      • </body>
      • </html>
      • To associate an html document with a CSS, you usually ad a link-element in the head-element.
      • External CSS + HTML-file
      • <html>
      • <head>
      • <link rel=&quot;stylesheet”
      • type=&quot;text/css&quot;
      • href=&quot;test.css”/>
      • </head>
      • <body>
      • </body>
      • </html>
    • Basic principle: Pattern -> Behaviour
      • The basic principle is to find different ”patterns” in the XML/html using ”selectors”, and then setting some property to some value.
      • A pattern can, for example, be a tag name.
      • A property can be a font-size.
      • Example:
      • p {
      • font-family: Helvetica, sans-serif;
      • }
      Selector: All p-elements Property Property value
    • Different selectors
      • There are a number of selectors that can be used to find different parts of an XML/html structure.
      • For example, you can find decendents, children, siblings and attributes.
      • Example:
      • * {
      • font-size: Medium
      • }
      • p a {
      • font-size: Medium
      • }
      Matches all elements matches all a-elements which are decendents to p-elements
    • Different selectors
      • Example:
      • p > a {
      • font-size: Medium
      • }
      • p + a {
      • font-size: Medium
      • }
      Matches a-elements which are children to p-elements. Matches all a-elements which directly follows a p-elements (siblings) Example: <p> <a></a> </p> <p> <strong> <a>Hej</a> </strong> </p> Matches Matches inte
    • Matching attributes
      • Example:
      • a-element wit href=&quot;a.html&quot;
      • a[href=&quot;a.html&quot;] {font-size: Medium}
      • a-element which has a href-attribut
      • a[href] {font-size: Medium}
      • a-element whose href contains the substring &quot;html&quot;
      • a[href~=&quot;html&quot;] {font-size: Medium}
      • Examples of attribute matches
        • if the attribute has a value
        • Substrings of attribute values
        • ID-values
    • Pseudo classes and pseudo elements
      • Example:
      • First child to a p-element
      • p:first-child {font-size: Medium}
      • First letter in a banana-element
      • banana:first-letter {font-size: Medium}
      • Before (or after) a banan-element
      • banana:before {content: ”A Banana!&quot;}
      • Pseudo classes and pseudo elements matches different types of meta information in the document.
      • Separated from elements/attributeses with a colon.
      • There are a number of properties to set height, lenght and sizes.
        • border-width, font-size, line-height, margin-left, margin-top, margin-right, margin-bottom, left, top, height, width
      • Most units used in typography can be used.
        • Absolute, t.ex. cm, in, pt
        • Relative.ex. em, ex, px
      • Example
      • banana {line-height: 2.2em}
      • tomato {font-size:14pt;line-height:3ex}
      Properties: Height/length/size Obs! Två properties till samma selektor, separerat med semikolon
    • Properties:Fonter
      • A number of properties for font handling.
        • font-family: i.e. Helvetica, sans-serif
        • font-style: i.e. italic, slanted
        • font-size: absolute values like 12pt or relative values like x-small
        • font-weight: bold, bolder, lighter or a scale of 100 - 900
        • font-stretch:wider, ultra-expanded, semi-condensed and so forth.
        • … and several other properties
    • Properties:Texts
      • Text-properties deals with indent, alignment and simple transformations.
        • Display: block, inline or none. Blocks start on a new-line and is followed by a new-line, inline does not disrupt the text flow, and ”none” hides the content.
        • text-indent: applicable only on elements with block-display.
        • text-align: left, right, center, justify
        • text-decoration: underline, overline, linethrough
        • text-transform: capitalize, uppercase, lowercase
        • white-space: pre to preserve linebreaks and whitespace.
    • Properties:Colours
      • The most important properties or colours are
        • Color (note: american spelling)
        • Background-color
        • Border-color
      • Pre-defined colours
        • Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
      • Or hexadecimala colours representations
        • p {color: # FF FF CC }
      • or
        • p {color:rgb( 100%, 100%, 70%}
    • Advanced 1: Counters
      • It is also possible to use ”variables” as counter, and insert the value of the counters in what is displayed.
      • p:before {
      • content: counter(banana) &quot;. &quot;;
      • counter-increment: banana
      • }
      • h1 {
      • counter-reset: banana
      • }
    • Advanced 2: Classes
      • If you want to set different properties just to some elements of a certain kind, you can use ”classes”.
      • p.tomato {
      • font-size:14pt
      • }
      • <p class=&quot;tomato&quot;>
      • Hello
      • </p>
    • Advanced 3: Pseudoclasses for links
      • It is common to want different colours on links, depending on whether they have been visited or not.
      • a:link {color: #FF0000} /* unvisited link */
      • a:visited {color: #00FF00} /* visited link */
      • a:hover {color: #FF00FF} /* mouse over link */
      • a:active {color: #0000FF} /* selected link */
    • Advanced 4: media types
      • A way to define different properties for diferent media types, i.e. print, screen and aural.
      • <html>
      • <head>
      • <style type=&quot;text/css&quot; media=&quot;screen&quot;>
      • @import &quot;/css/initial.css&quot;;
      • @import &quot;/css/screen.css&quot;;
      • </style>
      • <style type=&quot;text/css&quot; media=&quot;print&quot;>
      • @import &quot;/css/initial.css&quot;;
      • @import &quot;/css/print.css&quot;;
      • </style>
      • </head>
      • <body>
      • <p class=&quot;test&quot;>Hello</p>
      • </body>
      • </html>
    • Advanced 5: the print media type
      • A few properties exist only for the media type &quot;print&quot;. The most important are:
        • page-break-after
        • page-break-before
      • For more info, see http://www.w3schools.com/css/css_ref_print.asp
    • Advanced 6: mediatypen aural
      • An interesting possibility is to control the audio from a voice synthesizer. An example could be:
      • h1, h2, h3, h4
      • {
      • voice-family: male;
      • richness: 80;
      • cue-before: url(&quot;beep.au&quot;)
      • }
      • For more info, see http://www.w3schools.com/css/css_ref_aural.asp
    • Browsersupport
      • Today good support in all(most) modern browsers.
      • Opera probably best support
      • However: Don’t count on mobile phones to support CSS.
    • Limitations and possibilities
      • I CSS1: Only support for html-tags
      • I CSS2: Supports all XML documents, making it easier to separate content from presentation.
      • I CSS3: Support for columns, pagination, more powerful selectors and for non-european character sets.
      • A problem is that it is not possible to change the orders of elements, or to re-use an element several times.