Cascading Style Sheets - PowerPoint PPT Presentation

1 / 32
About This Presentation
Title:

Cascading Style Sheets

Description:

Cascading Style Sheets. Course for librarians ... multiple style definitions will cascade into one; 4. Cascading Style Sheet is a simple, declarative language ... – PowerPoint PPT presentation

Number of Views:117
Avg rating:3.0/5.0
Slides: 33
Provided by: NTLo
Category:

less

Transcript and Presenter's Notes

Title: Cascading Style Sheets


1
Cascading Style Sheets
  • Course for librarians
  • Integrated Training Centre for LIS specialists in
    Lithuania,
  • Klaipeda University Library,
  • 2001

2
Content
  • what Cascading Style Sheets are?
  • why it is used?
  • how is it used?
  • where?

3
What Cascading Style Sheets are?
  • styles define how to display HTML elements
  • styles are stored in Style Sheets
  • multiple style definitions will cascade into one

4
  • Cascading Style Sheet is a simple, declarative
    language that allows authors and users to apply
    stylistic information to structured documents
    written in HTML or XML.

5
  • World Wide Web Consortium (W3C)
  • CSS1 (1996)
  • CSS2 (1998)
  • CSS3 (2001)
  • Netscape and Microsoft Corporations
  • Internet Explorer (IE) and Netscape Navigator
    (NN) supports styles.

6
Why?
  • to save a lot of work and our time
  • easier to handle and edit web documents
  • easier to control content and layout of the
    multiple web sites.

7
Structure of the Style
  • selector property value
  • selector is an element which we are defining
  • property is an attribute
  • value specifies how a selector should be
    displayed.
  • property value is a definition of the
    selector.

8
Syntax
  • the property and value are separated by a colon
    and surrounded by curly braces
  • if the value consists from multiple words, it
    should be with quotes around it
  • body color black
  • if there are more than one property, each
    property should be separated with a semi-colon
    p text-align center color maroon.

9
Class Atribute (1)
  • defines different styles for the same element
  • p. center text-align center
  • in HTML document
  • ltp classcentergtParagraphlt/pgt

10
Class Atribute (2)
  • .center text-align center
  • means
  • lth1 class"center"gtHeading is centeredlt/h1gt
  • ltp class"center"gtParagraph is centeredlt/pgt

11
ID Attribute
  • there can be only one element with a given id in
    a document
  • to match all elements with a id
  • intro font-weightbold color 0000ff
  • only elements with id"intro"
  • pintro font- weightbold color0000ff

12
Grouping
  • you can group selectors
  • h1, h2, h3 color maroon
  • h4 color green
  • Note each selector has been separated with a
    comma.

13
Comments
  • are used for the explaining the code.
  • It can help to edit the code later
  • / Comment /
  • p text-align center font-family arial

14
Formatting text with CSS
  • font family and font size
  • text colour
  • text background
  • text aligning
  • styles for links

15
Font Properties
  • define the font in text and allow to change
  • the font family
  • boldness,
  • size,
  • style of the text.
  • H1 font-family arial

16
Text Properties
  • define the appearance of text and allow to
    change
  • the colour of a text
  • decorate a text
  • align a text
  • indent first line
  • increase/decrease the space between characters.
  • h1 color 800000 letter-spacing 0.5cm

17
Background Properties
  • define the background and allow to change
  • insert an image as the background
  • the background colour of an element
  • repeat a background image horizontally/
    vertically.
  • h2 background-color 00FFFF
  • p background-color transparent

18
Border Properties
  • define border around an element and allow
  • to create borders around text
  • to specify the style, colour of an element
    borders.
  • H1 border medium dashed 800000
  • text-align center

19
Layout with CSS
  • background
  • lists
  • borders
  • aligning elements
  • wrapping text, padding around element
  • styles for printing.

20
Margin Properties
  • define the space around an element.
  • p margin 1cm 4cm 2cm 4cm

21
Padding Properties
  • define the space between an element and the
    element border.

22
List Properties
  • allow to set an image as list item marker
  • to set where the item marker to place
  • to change list markers.
  • ul list-style circle inside url
    ("../images/dot.gif")

23
Positioning Properties
  • define the position of an element and allow
  • to set the shape of an element
  • to specify how an element should be displayed
    when its content is to big for the specified
    area
  • to place an element behind another.

24
Dimension Properties
  • allow to specify the height and width of an
    element
  • to increase the space between lines.
  • p.increase line-height 1cm

25
Classification Properties
  • allow to control the display and the visibility
    of an element
  • to set the position an element relative to its
    normal position or using an absolute value
  • to set where an image will appear in another
    element.
  • h2positionrelative left40
  • img float left

26
Print Properties
  • specify
  • the size and orientation of a page
  • the page breaking
  • and allow to solve the printing from the Web
    problems.
  • H 1page-break-before always

27
The order of the cascading
  • 1. Browser default
  • 2. External Style Sheet
  • 3. Internal Style Sheet
  • 4. Inline Style

28
Where?
  • externally
  • internally
  • inline (locally).

29
Inline Style
  • is used inside the HTML tags
  • ltp style"color green"gt First Paragraph
  • lt/pgt

30
Internal Style Sheet
  • is inside of the HTML tag ltHEADgt
  • ltheadgt
  • ltstyle type"text/css"gt
  • h1 color maroon
  • p margin-left 2cm
  • body background-image url(examples/saule.gif")
  • lt/stylegt
  • lt/headgt

31
External Style Sheet
  • is the additional web page saved in format
  • .css
  • each document must have a link to the file saved
    as .css
  • ltheadgtltlink rel"stylesheet" type"text/css a
    reffirst.css"gtlt/headgt

32
External Style Sheet
  • allow you to control and change layout
  • of the whole document by
  • the editing one single page!
Write a Comment
User Comments (0)
About PowerShow.com