CSS Syntax

1
CSS Syntax

• ECIS469 XML Lab

2
History of CSS

• A style is a rule that defines the appearance of
  an element
• Includes font types, sizes, background, etc.
• A stylesheet is a collection of all style rules
  for a particular document
• CSS was developed by the W3C.
• CSS1 released in 1996
• CSS2 released in 1998
• CSS3
• Not all browsers support all CSS features

3
Syntax of a style rule

• Selector attribute1value1attribute2value2
• Selector is the element in the document to
  receive the style
• Attribute is the CSS style (font-size, etc.)
• Value is the value of the attribute
• Examples
• ARTIST colorred

4
Inheritance

• By default style attributes are inherited from
  parent element
• So, if you have an XML structure
• ltSTANZAgt
• ltVERSEgtFugghedabowditlt/VERSEgt
• ltREFRAINgt Yea Yea Yea lt/REFRAINgt
• lt/STANZAgt
• And the CSS contains a style rule
• STANZA colorblue
• Then VERSE and REFRAIN will also be blue unless
  otherwise specified

5
Selectors

• You can specify the rule for one selector
• ARTIST colorred
• You can specify the same rule to apply to many
  selectors
• ARTIST, ALBUM, REFRAIN colorred
• You can apply the same style rule to all
  selectors by default
• colorred
• The is called the universal selector

6
More about selectors

• To apply style to all descendants of a parent
• ltSTANZAgt
• ltVERSEgtFugghedabowditlt/VERSEgt
• ltREFRAINgt Yea Yea Yea lt/REFRAINgt
• lt/STANZAgt
• STANZA REFRAIN colorred
• This will make red all REFRAINS that are children
  of STANZA
• There are other rules that may or may not work,
  depending on the browser

7
Pseudo-elements

• These selectors specify elements based on a
  condition that does not relate to the name of the
  element
• Elementfirst-child
• Elementhover

8
The display attribute

• Element displayblock
• Displays elememts in a block, separate from the
  other elements
• Element displayinline
• Inline with contents of parent element
• Element displaylist-item
• Displays content as a list
• Element displaynone
• Hides content of element

9
List-style type position

• TITLE displaylist-item list-style square
  inside
• List-style values
• Disc
• Circle
• Square
• Decimal
• Lower-alpha
• Upper-alpha
• Lower-roman
• Upper-roman
• Position
• Inside
• outside

10
Element Width and height

• Element Widthvalue heightvalue
• Mm
• Cm
• In
• Pt
• Px (this the default)
• Element overflowtype
• Visible
• Scroll
• Hidden
• auto

11
Positioning Elements

• Position type topvaluerightvaluebottomvalu
  eleftvalue
• Type
• Absolute
• Relative to upper left corner of parent element
• Relative
• May be specified in either or pixels

12
Background-color

• Applies to the element, not the entire page
• STANZA Background-colorred

13
Margins

• The margin between blocks
• Margin-topvalue
• Margin-bottomvalue
• Margin-rightvalue
• Margin-leftvalue

14
Aligning and decorating text

• Text-alignvalue
• Center
• Left
• Right
• Justify
• Text-decoration
• None
• Underline
• Overline
• Line-through

15
Background image

• Four properties
• Source of the image file
• Where image is to be place
• How image is repeated
• Whether image scrolls with display window
• Syntax
• Background-imageurl(image file)
• Background-repeattype
• Repeat-x, repeat-y, or none
• Background-positionh-value v-value
• Can use numbers, percentages, or top, center.
  Bottom, right, or left
• Background-attachmentattach value
• Scroll or fixed