Cascading Style Sheets - PowerPoint PPT Presentation

Loading...

PPT – Cascading Style Sheets PowerPoint presentation | free to download - id: 70fcfe-NDE3M



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Cascading Style Sheets

Description:

Cascading Style Sheets CSS - Cascading Style Sheets language Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web ... – PowerPoint PPT presentation

Number of Views:60
Avg rating:3.0/5.0
Slides: 34
Provided by: Holv150
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Cascading Style Sheets


1
Cascading Style Sheets
  • CSS - Cascading Style Sheets language
  • Cascading Style Sheets (CSS) is a simple
    mechanism for adding style (e.g. fonts, colors,
    spacing) to Web documents
  • designed for HTML in 1996
  • CSS1 (1996), CSS2 (1998), CSS Mobile Profile
  • CSS3 (working drafts)
  • browser support (better than for XSL)
  • CSS1 IE5 onwards, Firefox, etc.
  • CSS level 2 IE8, Firefox, Opera
  • http//www.w3schools.com/css/css_reference.asp
  • own syntax

2
CSS rules
  • CSS style rules
  • Each rule starts with a tag name
  • followed by a list of style properties bracketed
    by and
  • tag name defines the element
  • Each style property starts with the property's
    name, then a colon and lastly the value for this
    property. When there is more than one style
    property in the list, you need to use a semicolon
    between each of them
  • property value
  • property i.e. font-size
  • value i.e. 16 pt'
  • h2 font-size 16pt font-weightbold
  • latest rule is valid

3
Using inline styles
  • lthtmlgt
  • lt!-- Exercise 1 inline style --gt ltheadgt lttitlegtXM
    L - Inline Styleslt/titlegt lt/headgt ltbodygt ltpgtThis
    text does not have any style applied to
    it.lt/pgt lt!-- The style attribute allows you to
    declare inline --gt lt!-- styles. Separate multiple
    styles with a semicolon. --gt ltp style
    "font-size 20pt"gtThis text has the
    ltemgtfont-sizelt/emgt style applied to it, making it
    20pt.lt/pgt ltp style "font-size 20pt color
    0000ff"gtThis text has the ltemgtfont-sizelt/emgt and
    ltemgtcolorlt/emgt styles applied to it, making it
    20pt. and blue.lt/pgt lt/bodygt lt/htmlgt

4
Internal styles
  • lthtmlgt lt!-- Exercise 2 internal style
    --gt ltheadgt lttitlegtXML introduction to CSS
    lt/titlegt
  • lt!-- Declaring a style in the header section
    --gt ltstyle type "text/css"gt
  • em background-color 8000ff color white
  • h1 font-family arial, sans-serif p
    font-size 14pt .special color blue
  • lt/stylegt lt/headgt
  • ltbodygt lt!-- This class attribute applies the
    .blue style --gt lth1 class "special"gtMain
    headinglt/h1gt ltpgt For st etc.

5
External styles
  • lthtmlgt
  • ltheadgt lttitlegt Linking an external style sheet
    lt/titlegt ltlink rel "stylesheet" type
    "text/css" href "style4.css"gt lt/headgt
  • ltbodygt
  • / Example style4.css /
  • / External style sheet /
  • a.nodec text-decoration none
  • ahover text-decoration underline color
    red background-color ccffcc
  • li em color red font-weight bold
  • ul margin-left 2cm

6
Some points of CSS examples
  • in HTML
  • ltspan style clear rightgthere a non-floating
    part of text is started. Span is used to delimit
    a text area for exceptional formatting.lt/spangt
  • div defines a separate paragraph div text-align
    center margin-bottom 1em
  • The z-index property sets the stack order of an
    element. An element with greater stack order is
    always in front of another element with lower
    stack order.
  • in CSS
  • em refers to the relative size of text

7
Cascading Style Sheets
Inheritance
ltbodygt
ltdivgt
lth1gt
ltpgt
ltbgt
8
Inheritance
  • ltstyle type"text/css"gt
  • body color red
  • h1 color blue
  • p font-family helvetica, arial, sans-serif
    padding 2px
  • lt/stylegt

9
Text boxes
  • padding 2pt 3 pt 4pt 5pt
  • between frame and content
  • margin 2px 3px 4px 5px
  • between boxes (order top, right, bottom, left)
  • margin-left, margin-right, etc.
  • width 50 height auto
  • size of image
  • float left / right / (makes the box float)
  • clear both / left, right/ (no floating)

10
Text boxes
inline
content
padding
block
border
margin
page
block
margins
11
How the browser sets priority for style
definitions
  • Styles declared as important by the page creator
    color red !important
  • Styles declared as important by the user
  • Normal styles by the page creator
  • Normal styles by the user
  • Default styles by the browser if there are no
    user styles

12
External information Pseudo-classes and
pseudo-elements
  • normally CSS styles are based on HTML tags and
    attributes. Sometimes it is not sufficient.
  • CSS introduces the concepts of pseudo-elements
    and pseudo-classes to permit formatting based on
    information that lies outside the document tree.
  • Anchor pseudo-class
  • Links (LINK) are VISITED or ACTIVE
  • Example  alink color red avisited color
    blue aactive color white
  • The hover pseudo-class applies while the user
    designates an element (with some pointing
    device), but does not activate it.

13
Some pseudo-elements
  • P.INITIALFIRST-LETTER font-size 200
  • P.INITIALFIRST-LINE text-transform uppercase
  • The first-child pseudo-class matches an element
    that is the first child of some other element.

14
Using CSS on HTML pages
  • Generalized use
  • Write style definitions to fit several pages,
    preferably the entire site. If you need page
    specific styles, use the STYLE attribute inside
    the document.
  • Scalability
  • Avoid using absolute values for font size,
    margins, etc. Users can have very different
    browsers, screen resolutions, window sizes, etc.
    Use relative measures.

15
Using CSS on HTML pages
  • Test the styles with different browser versions,
  • Design your pages to work also without style
    sheet support
  • Browsers behave and render pages in non-standard
    ways!
  • Select fonts with care
  • people may not have all nice fonts on their PC
  • Dont push it too far!
  • Not every single element and attribute needs a
    pre-set value.

16
XML and CSS
  • calling an external CSS from an XML-document
  • lt?xml-stylesheet href"my.css" type"text/css?gt
  • HTML CSS refers to standard tags (ltpgt is
    paragraph, ltemgt inline text)
  • XML you need to explicitly define block
    elements, inline elements, etc.

17
XML and CSS
  • display block
  • paragraph display block
  • display inline
  • name displayinline
  • display none
  • element is hidden
  • display list-item

18
XML and CSS2 example
  • lt?xml-stylesheet type"text/css"
    href"bach.css"?gt
  • ltarticlegt
  • ltheadlinegtFredrick the Great meets Bach
  • lt/headlinegt
  • ltauthorgtJohann Nikolaus Forkellt/authorgt
  • ltparagt
  • One evening, just as he was getting
    his
  • ltinstrumentgtflutelt/instrumentgt ready
    and his musicians were assembled, an officer
    brought him a list of the strangers who had
    arrived.
  • lt/paragt
  • lt/articlegt

19
XML and CSS2 example
  • article, headline, author, para display block
  • headline font-size 1.3em
  • author font-style italic
  • article, headline, author, para margin 0.5em
  • instrument display inline

20
XML and CSS internal styles and images
  • internal styles in XML
  • lt?xml-stylesheet type"text/css"
    href"internalstyles" ?gt
  • picture reference
  • ltstyle id"internalstyles"gt
  • logo_img background-imageurl(mylogo.jpg)
    width 125pxheight110 px position relative
  • lt/stylegt
  • ltlogo_img/gtltpgtWelcome to our institute!lt/pgt

21
XML and Cascading Style Sheets Examples
  • sidebars and tables
  • lt?xml-stylesheet type"text/css"
    href"internalstyles"?gt
  • ltstyle id internalstylesgt
  • style display none
  • document display block
  • heading display block font-size24pt
  • p display block font-family Arial
    positionrelative
  • sidebar display block float right
    borderinset 3pt background-colorC0C0FF
  • sidebar headingdisplay block font-size
    18pt
  • sidebar pdisplayblock font-size 10pt
  • lt/stylegt

22
XML and CSS Lists
  • lt!- example.css --gt
  • employees displayblock visibilityvisible
  • employee displaylist-itemlist-style-typedisc
  • lastName display inline font-size12pt
  • firstName display inline font-size12pt
  • salary display none

23
XML and CSS tables
  • tables have poor browser support (Mozilla only)
  • lt! table.css --gt
  • employees displaytable
  • employee displaytable-row
  • firstName display table-cell
  • lastName display table-cell
  • title display table-cell
  • salary display table-cell

24
Encoding ASCII
A is represented by this bit pattern 1 byte 8
bits
A
0
1
0
0
0
0
0
1
Encoding
25
ASCII -character set
26
Encoding standards
  • ASCII American Standard Code for Information
    Exchange
  • 7 bit 2 7 128
  • 8 bit 28 256 , including control characters
  • ANSI, ISO Latin-1 8 bit codes
  • Unicode (IBM, Microsoft, Sun)
  • 16 bit encoding 216 65 536
  • ISO 10646 four bytes

27
White space
  • space, linefeed, tabulators character Unicode
    value tab x9 newline xA carriage
    return xD space x20
  • linefeed in different OSs MacOS CR Unix LF Wind
    ows CR LF

28
White space
  • space, linefeed, tabulators
  • HTML simply ignores
  • XML in principle white space is kept
  • normalization
  • spaces between elements removed
  • line breaks are replaced by space
  • spaces from beginning and end of a block are
    removed
  • quotations around literals are removed
  • entity references are replaced by corresponding
    character strings
  • if you wish to keep the white space
  • white-space pre / normal, nowrap /

29
CSS2 extensions
  • CSS2 includes CSS1 plus extensions location of
    an element
  • book title ... / sub-elements of book
    element /
  • book gt title ... / title-child-elements of
    book-element
  • title para ... / para-elements which
    follow the title-element /
  • para first-child ... / para-elements 1.
    child /

30
CSS2 extensions
  • The 'before' and 'after' pseudo-elements can be
    used to insert generated content before or after
    an element's content
  • notebefore content"NOTE " font-weightbold
  • noteafter content"!!!"

31
CSS2 extensions
  • before and after
  • example ltSTYLEgt
  • P.Juliet font-styleitalic
  • P.Julietbefore content Juliet colorred
  • P.Romeo font-stylebold
  • P.Romeobefore content Romeo colorblue
  • lt/STYLEgt
  • ltP classRomeogtHark! What light on yonder
    window breaks?gtlt/Pgt
  • ltP classJulietgt Romeo? Romeo? Wherefore art
    thou, Romeo?gtlt/Pgt

32
CSS2 extensions
  • reference to attribute value
  • titlebefore content attr(author)
  • courseafter content "(" attr(for) ")"
  • element selection based on an attribute value
  • parasecurity ... /attribute exists /
  • parasecurity"secret" ...
  • parakeywords"css" ... / one of the values
    is css /
  • security"secret" ... / all elements with
    attribute security and value secret /

33
CSS2 extensions
  • media
  • aural sound
  • _at_media aural
  • documentplay-duringurl(backgroundmusic.mp3)
    repeat mix
  • title voice-familyElvis malevolumemedium
  • _at_media visual
  • _at_media braille
  • _at_media print
  • BODY font-size 10pt
  • _at_media screen
  • BODY font-size 12pt
  • _at_page
About PowerShow.com