Top Banner
1 Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block. A declaration-block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration. In CSS, selectors are used to declare which part of the markup a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, to elements specified by attribute, or to elements depending on how they are placed relative to, or nested within, others in the document tree. P Selector { Font-family : arial; Font-size : medium; Color : blue; } CSS information can be provided from various sources. CSS style information can be in a separate document or it can be embedded into an HTML document. Multiple style sheets can be imported. Properties Values
79

Cascading Style Sheets CSS) is a style sheet language used ... · 1 Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look

May 29, 2020

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
  • 1

    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML.

    CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

    CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

    A style sheet consists of a list of rules. Each rule or rule-set consists of one or more

    selectors, and a declaration block. A declaration-block consists of a list of declarations in

    braces. Each declaration itself consists of a property, a colon (:), and a value. If there are

    multiple declarations in a block, a semi-colon (;) must be inserted to separate each

    declaration. In CSS, selectors are used to declare which part of the markup a style applies to,

    a kind of match expression. Selectors may apply to all elements of a specific type, to

    elements specified by attribute, or to elements depending on how they are placed relative

    to, or nested within, others in the document tree.

    P Selector

    {

    Font-family : arial;

    Font-size : medium;

    Color : blue;

    }

    CSS information can be provided from various sources. CSS style information can be in a

    separate document or it can be embedded into an HTML document. Multiple style sheets

    can be imported.

    Properties Values

  • 2

    Inline styles, inside the HTML document, style information on a single element, specified using the style attribute

    Embedded or internal style, blocks of CSS information inside the element of HTML itself

    External style sheets, i.e., a separate CSS file referenced from the document

    Example : The following example demonstrates the inline style

    This is a paragraph formatted with inline css style.

    Example : The following example demonstrates the internal style

    P { Font-family:arial; Font-size:medium; Color:blue; Text-align:justify; }

    This is a paragraph formatted with internal css style.

    Example : The following example demonstrates the external style

    Create a new document in notepad, define the following css styles within it and save it with the name MyStyle.css

    P { Font-family:arial; Font-size:medium;

  • 3

    Color:blue; Text-align:justify; } H1 { Font-family:arial black; Background-color:blue; Color:white; }

    Create another new document in notepad and create a html file with the following html markup. To link an external css file, use element of html within the element.

    Heading

    This is a paragraph formatted with internal css style.

    Selector syntax

    A simple selector is either a type selector or universal selector followed immediately by zero

    or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple

    selector matches if all of its components match.

    A selector is a chain of one or more simple selectors separated by combinators. Combinators

    are: white space, ">", and "+". White space may appear between a combinator and the

    simple selectors around it.

    The elements of the document tree that match a selector are called subjects of the selector.

    A selector consisting of a single simple selector matches any element satisfying its

    requirements. Prepending a simple selector and combinator to a chain imposes additional

    matching constraints, so the subjects of a selector are always a subset of the elements

    matching the last simple selector.

    One pseudo-element may be appended to the last simple selector in a chain, in which case

    the style information applies to a subpart of each subject.

  • 4

    Grouping

    When several selectors share the same declarations, they may be grouped into a comma-

    separated list.

    In this example, we condense three rules with identical declarations into one. Thus,

    h1 { font-family: sans-serif }

    h2 { font-family: sans-serif }

    h3 { font-family: sans-serif }

    is equivalent to:

    h1, h2, h3 { font-family: sans-serif }

    Universal selector

    The universal selector, written "*", matches the name of any element type. It matches any

    single element in the document tree. If the universal selector is not the only component of a

    simple selector, the "*" may be omitted. For example:

    *[lang=fr] and [lang=fr] are equivalent.

    *.warning and .warning are equivalent.

    *#myid and #myid are equivalent.

    Type selectors

    A type selector matches the name of a document language element type. A type selector

    matches every instance of the element type in the document tree.

    The following rule matches all H1 elements in the document tree:

    h1 { font-family: sans-serif }

    Descendant selectors

    At times, authors may want selectors to match an element that is the descendant of

    another element in the document tree (e.g., "Match those EM elements that are contained

  • 5

    by an H1 element"). Descendant selectors express such a relationship in a pattern. A

    descendant selector is made up of two or more selectors separated by white space. A

    descendant selector of the form "A B" matches when an element B is an arbitrary

    descendant of some ancestor element A.

    For example, consider the following rules:

    h1 { color: red }

    em { color: red }

    Although the intention of these rules is to add emphasis to text by changing its color, the

    effect will be lost in a case such as:

    This headline is very important

    We address this case by supplementing the previous rules with a rule that sets the text color

    to blue whenever an EM occurs anywhere within an H1:

    h1 { color: red }

    em { color: red }

    h1 em { color: blue }

    The third rule will match the EM in the following fragment:

    This headline

    is very important

    The following selector:

    div * p

    matches a P element that is a grandchild or later descendant of a DIV element. Note the

    white space on either side of the "*" is not part of the universal selector; the white space is

    a combinator indicating that the DIV must be the ancestor of some element, and that that

    element must be an ancestor of the P.

    The selector in the following rule, which combines descendant and attribute selectors,

    matches any element that has the "href" attribute set and is inside a P that is itself inside a

    DIV:

    div p *[href]

  • 6

    Child selectors

    A child selector matches when an element is the child of some element. A child selector is

    made up of two or more selectors separated by ">".

    The following rule sets the style of all P elements that are children of BODY:

    body > P { line-height: 1.3 }

    The following example combines descendant selectors and child selectors:

    div ol>li p

    It matches a P element that is a descendant of an LI; the LI element must be the child of an

    OL element; the OL element must be a descendant of a DIV. Notice that the optional white

    space around the ">" combinator has been left out.

    Adjacent sibling selectors

    Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the

    selector. The selector matches if E1 and E2 share the same parent in the document tree and

    E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and

    comments).

    Thus, the following rule states that when a P element immediately follows a MATH element,

    it should not be indented:

    math + p { text-indent: 0 }

    The next example reduces the vertical space separating an H1 and an H2 that immediately

    follows it:

    h1 + h2 { margin-top: -5mm }

    The following rule is similar to the one in the previous example, except that it adds a class

    selector. Thus, special formatting only occurs when H1 has class="opener":

    h1.opener + h2 { margin-top: -5mm }

    Attribute selectors

    CSS 2.1 allows authors to specify rules that match elements which have certain attributes

    defined in the source document.

  • 7

    Matching attributes and attribute values

    Attribute selectors may match in four ways:

    [att]

    Match when the element sets the "att" attribute, whatever the value of the attribute.

    [att=val]

    Match when the element's "att" attribute value is exactly "val".

    [att~=val]

    Represents an element with the att attribute whose value is a white space-separated list of

    words, one of which is exactly "val". If "val" contains white space, it will never represent

    anything (since the words are separated by spaces). If "val" is the empty string, it will never

    represent anything either.

    [att|=val]

    Represents an element with the att attribute, its value either being exactly "val" or

    beginning with "val" immediately followed by "-". This is primarily intended to allow

    language subcode matches (e.g., the hreflang attribute on the a element in HTML) as

    described in BCP 47 or its successor.

    Attribute values must be identifiers or strings. The case-sensitivity of attribute names and

    values in selectors depends on the document language.

    For example, the following attribute selector matches all H1 elements that specify the "title"

    attribute, whatever its value:

    h1[title] { color: blue; }

    In the following example, the selector matches all SPAN elements whose "class" attribute

    has exactly the value "example":

    span[class=example] { color: blue; }

    Multiple attribute selectors can be used to refer to several attributes of an element, or even

    several times to the same attribute.

    Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value

    "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus":

    span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

  • 8

    The following selectors illustrate the differences between "=" and "~=". The first selector will

    match, for example, the value "copyright copyleft copyeditor" for the "rel" attribute. The

    second selector will only match when the "href" attribute has the value

    "http://www.nareshit.com/".

    a[rel~="copyright"]

    a[href="http://www.nareshit.com/"]

    The following rule hides all elements for which the value of the "lang" attribute is "fr" (i.e.,

    the language is French).

    *[lang=fr] { display : none }

    The following rule will match for values of the "lang" attribute that begin with "en",

    including "en", "en-US", and "en-cockney":

    *[lang|="en"] { color : red }

    Similarly, the following aural style sheet rules allow a script to be read aloud in different

    voices for each role:

    DIALOGUE[character=romeo] { voice-family: "Laurence Olivier", charles, male }

    DIALOGUE[character=juliet] { voice-family: "Vivien Leigh", victoria, female }

    Class selectors

    Working with HTML, authors may use the period (.) notation as an alternative to the ~=

    notation when representing the class attribute. Thus, for HTML, div.value and

    div[class~=value] have the same meaning. The attribute value must immediately follow the

    "period" (.).

    For example, we can assign style information to all elements with class~="pastoral" as

    follows:

    *.pastoral { color: green } /* all elements with class~=pastoral */

    or just

    .pastoral { color: green } /* all elements with class~=pastoral */

    The following assigns style only to H1 elements with class~="pastoral":

    H1.pastoral { color: green } /* H1 elements with class~=pastoral */

  • 9

    Given these rules, the first H1 instance below would not have green text, while the second

    would:

    Not green

    Very green

    To match a subset of "class" values, each value must be preceded by a ".".

    For example, the following rule matches any P element whose "class" attribute has been

    assigned a list of space-separated values that includes "pastoral" and "marine":

    p.marine.pastoral { color: green }

    This rule matches when class="pastoral blue aqua marine" but does not match for

    class="pastoral blue".

    ID selectors

    Document languages may contain attributes that are declared to be of type ID. What makes

    attributes of type ID special is that no two such attributes can have the same value;

    whatever the document language, an ID attribute can be used to uniquely identify its

    element. In HTML all ID attributes are named "id"; XML applications may name ID attributes

    differently, but the same restriction applies.

    The ID attribute of a document language allows authors to assign an identifier to one

    element instance in the document tree. CSS ID selectors match an element instance based

    on its identifier. A CSS ID selector contains a "#" immediately followed by the ID value,

    which must be an identifier.

    The following ID selector matches the H1 element whose ID attribute has the value

    "chapter1":

    h1#chapter1 { text-align: center }

    In the following example, the style rule matches the element that has the ID value "z98y".

    The rule will thus match for the P element:

    match p

    *#z98y { letter-spacing: 0.3em }

  • 10

    wide text

    In the next example, however, the style rule will only match an H1 element that has an ID

    value of "z98y". The rule will not match the P element in this example:

    match h1 only

    h1#z98y { letter-spacing: 0.5em }

    wide text

    ID selectors have a higher specificity than attribute selectors. For example, in HTML, the

    selector #p123 is more specific than [id=p123] in terms of the cascade.

    If an element has multiple ID attributes, all of them must be treated as IDs for that element

    for the purposes of the ID selector.

    Pseudo-elements and pseudo-classes

    In CSS 2.1, style is normally attached to an element based on its position in the document

    tree. This simple model is sufficient for many cases, but some common publishing scenarios

    may not be possible due to the structure of the document tree. For instance, in HTML 4, no

    element refers to the first line of a paragraph, and therefore no simple CSS selector may

    refer to it.

    CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting

    based on information that lies outside the document tree.

  • 11

    Pseudo-elements create abstractions about the document tree beyond those specified by

    the document language. For instance, document languages do not offer mechanisms to

    access the first letter or first line of an element's content. CSS pseudo-elements allow style

    sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may

    also provide style sheet designers a way to assign style to content that does not exist in the

    source document (e.g., the :before and :after pseudo-elements give access to generated

    content).

    Pseudo-classes classify elements on characteristics other than their name, attributes or

    content; in principle characteristics that cannot be deduced from the document tree.

    Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-

    class while a user interacts with the document. The exceptions are ':first-child', which can be

    deduced from the document tree, and ':lang()', which can be deduced from the document

    tree in some cases.

    Neither pseudo-elements nor pseudo-classes appear in the document source or document

    tree.

    Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be

    appended after the last simple selector of the selector.

    Pseudo-element and pseudo-class names are case-insensitive.

    Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to

    the same element. In case of conflicting rules, the normal cascading order determines the

    outcome.

    Pseudo-classes

    :first-child pseudo-class

    The :first-child pseudo-class matches an element that is the first child element of some

    other element.

    In the following example, the selector matches any P element that is the first child of a DIV

    element. The rule suppresses indentation for the first paragraph of a DIV:

    div > p:first-child { text-indent: 0 }

    This selector would match the P inside the DIV of the following fragment:

    the last p before the note.

  • 12

    the first p inside the note.

    but would not match the second P in the following fragment:

    the last p before the note.

    note

    the first p inside the note.

    The following rule sets the font weight to 'bold' for any EM element that is some

    descendant of a P element that is a first child:

    p:first-child em { font-weight : bold }

    The following two selectors are equivalent:

    * > a:first-child /* A is first child of any element */

    a:first-child /* Same */

    The link pseudo-classes: :link and :visited

    User agents commonly display unvisited links differently from previously visited ones. CSS

    provides the pseudo-classes ':link' and ':visited' to distinguish them:

    The :link pseudo-class applies for links that have not yet been visited.

    The :visited pseudo-class applies once the link has been visited by the user.

    The two states are mutually exclusive.

    The document language determines which elements are hyperlink source anchors. For

    example, in HTML4, the link pseudo-classes apply to A elements with an "href" attribute.

    Thus, the following two CSS 2.1 declarations have similar effect:

    a:link { color: red }

    :link { color: red }

    If the following link:

  • 13

    external link

    has been visited, this rule:

    a.external:visited { color: blue }

    will cause it to be blue.

    The dynamic pseudo-classes: :hover, :active, and :focus

    Interactive user agents sometimes change the rendering in response to user actions. CSS

    provides three pseudo-classes for common cases:

    The :hover pseudo-class applies while the user designates an element (with some pointing

    device), but does not activate it. For example, a visual user agent could apply this pseudo-

    class when the cursor (mouse pointer) hovers over a box generated by the element. User

    agents not supporting interactive media do not have to support this pseudo-class. Some

    conforming user agents supporting interactive media may not be able to support this

    pseudo-class (e.g., a pen device).

    The :active pseudo-class applies while an element is being activated by the user. For

    example, between the times the user presses the mouse button and releases it.

    The :focus pseudo-class applies while an element has the focus (accepts keyboard events or

    other forms of text input).

    An element may match several pseudo-classes at the same time.

    CSS does not define which elements may be in the above states, or how the states are

    entered and left. Scripting may change whether elements react to user events or not, and

    different devices and UAs may have different ways of pointing to, or activating elements.

    CSS 2.1 does not define if the parent of an element that is ':active' or ':hover' is also in that

    state.

    User agents are not required to reflow a currently displayed document due to pseudo-class

    transitions. For instance, a style sheet may specify that the 'font-size' of an :active link

    should be larger than that of an inactive link, but since this may cause letters to change

    position when the reader selects the link, a UA may ignore the corresponding style rule.

    a:link { color: red } /* unvisited links */

    a:visited { color: blue } /* visited links */

    a:hover { color: yellow } /* user hovers */

  • 14

    a:active { color: lime } /* active links */

    Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise

    the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because

    A:active is placed after A:hover, the active color (lime) will apply when the user both

    activates and hovers over the A element.

    An example of combining dynamic pseudo-classes:

    a:focus { background: yellow }

    a:focus:hover { background: white }

    The last selector matches A elements that are in pseudo-class :focus and in pseudo-class

    :hover.

    The language pseudo-class: :lang

    If the document language specifies how the human language of an element is determined, it

    is possible to write selectors in CSS that match an element based on its language. For

    example, in HTML, the language is determined by a combination of the "lang" attribute, the

    META element, and possibly by information from the protocol (such as HTTP headers).

    The pseudo-class ':lang(C)' matches if the element is in language C. Whether there is a

    match is based solely on the identifier C being either equal to, or a hyphen-separated

    substring of, the element's language value, in the same way as if performed by the '|='

    operator. The matching of C against the element's language value is performed case-

    insensitively for characters within the ASCII range. The identifier C does not have to be a

    valid language name.

    C must not be empty.

    The following rules set the quotation marks for an HTML document that is either in

    Canadian French or German:

    html:lang(fr-ca) { quotes: '« ' ' »' }

    html:lang(de) { quotes: '»' '«' '\2039' '\203A' }

    :lang(fr) > Q { quotes: '« ' ' »' }

    :lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }

    The second pair of rules actually set the 'quotes' property on Q elements according to the

    language of its parent. This is done because the choice of quote marks is typically based on

  • 15

    the language of the element around the quote, not the quote itself: like this piece of French

    “à l'improviste” in the middle of an English text uses the English quotation marks.

    Pseudo-elements

    Pseudo-elements behave just like real elements in CSS with the exceptions described below

    and elsewhere.

    The :first-line pseudo-element

    The :first-line pseudo-element applies special styles to the contents of the first formatted

    line of a paragraph. For instance:

    p:first-line { text-transform: uppercase }

    The above rule means "change the letters of the first line of every paragraph to uppercase".

    However, the selector "P:first-line" does not match any real HTML element. It does match a

    pseudo-element that conforming user agents will insert at the beginning of every

    paragraph.

    Note that the length of the first line depends on a number of factors, including the width of

    the page, the font size, etc. Thus, an ordinary HTML paragraph such as:

    This is a somewhat long HTML

    paragraph that will be broken into several

    lines. The first line will be identified

    by a fictional tag sequence. The other lines

    will be treated as ordinary lines in the

    paragraph.

    the lines of which happen to be broken as follows:

    THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT

    will be broken into several lines. The first

    line will be identified by a fictional tag

    sequence. The other lines will be treated as

    ordinary lines in the paragraph.

  • 16

    might be "rewritten" by user agents to include the fictional tag sequence for :first-line. This

    fictional tag sequence helps to show how properties are inherited.

    This is a somewhat long HTML

    paragraph that will be broken into several

    lines. The first line will be identified

    by a fictional tag sequence. The other lines

    will be treated as ordinary lines in the

    paragraph.

    If a pseudo-element breaks up a real element, the desired effect can often be described by a

    fictional tag sequence that closes and then re-opens the element. Thus, if we mark up the

    previous paragraph with a SPAN element:

    This is a somewhat long HTML

    paragraph that will be broken into several

    lines. The first line will be identified

    by a fictional tag sequence. The other lines

    will be treated as ordinary lines in the

    paragraph.

    the user agent could simulate start and end tags for SPAN when inserting the fictional tag

    sequence for :first-line.

    This is a

    somewhat long HTML

    paragraph that will be

    broken into several

    lines. The first line will be identified

    by a fictional tag sequence. The other lines

    will be treated as ordinary lines in the

    paragraph.

  • 17

    The :first-line pseudo-element can only be attached to a block container element.

    The "first formatted line" of an element may occur inside a block-level descendant in the

    same flow (i.e., a block-level descendant that is not positioned and not a float). E.g., the first

    line of the DIV in

    This line...

    is the first line of the P (assuming that both

    P and DIV are block-level).

    The first line of a table-cell or inline-block cannot be the first formatted line of an ancestor

    element. Thus, in

    Hello
    Goodbye

    etcetera the first formatted line of the DIV is not the line "Hello".

    Note that the first line of the P in this fragment:


    First... does not contain any letters

    (assuming the default style for BR in HTML 4). The word "First" is not on the first formatted

    line.

    The :first-line pseudo-element is similar to an inline-level element, but with certain

    restrictions. The following properties apply to a :first-line pseudo-element: font properties,

    color property, background properties, 'word-spacing', 'letter-spacing', 'text-decoration',

    'text-transform', and 'line-height'.

    The :first-letter pseudo-element

    The :first-letter pseudo-element must select the first letter of the first line of a block, if it is

    not preceded by any other content (such as images or inline tables) on its line. The :first-

    letter pseudo-element may be used for "initial caps" and "drop caps", which are common

    typographical effects. This type of initial letter is similar to an inline-level element if its 'float'

    property is 'none', otherwise it is similar to a floated element.

    These are the properties that apply to :first-letter pseudo-elements: font properties, 'text-

    decoration', 'text-transform', 'letter-spacing', 'word-spacing' (when appropriate), 'line-

    height', 'float', 'vertical-align' (only if 'float' is 'none'), margin properties, padding properties,

    border properties, color property, background properties.

    This example shows a possible rendering of an initial cap. Note that the 'line-height' that is

    inherited by the first-letter pseudo-element is 1.1, but the UA in this example has computed

    the height of the first letter differently, so that it does not cause any unnecessary space

    between the first two lines. Also note that the fictional start tag of the first letter is inside

    the SPAN, and thus the font weight of the first letter is normal, not bold as the SPAN:

    p { line-height: 1.1 }

    p:first-letter { font-size: 3em; font-weight: normal }

    span { font-weight: bold }

    ...

  • 18

    Het hemelsche gerecht heeft zich ten lange lesten

    Erbarremt over my en mijn benaeuwde vesten

    En arme burgery, en op mijn volcx gebed

    En dagelix geschrey de bange stad ontzet.

    The following CSS 2.1 will make a drop cap initial letter span about two lines:

    drop cap initial letter

    p { font-size: 12pt; line-height: 1.2 }

    p:first-letter { font-size: 200%; font-style: italic;

    font-weight: bold; float: left }

    span { text-transform: uppercase }

    the first few words of an article

    in the economist.

    This example might be formatted as follows:

  • 19

    The fictional tag sequence is:

    t

    he first

    few words of an article in the economist.

    Note that the :first-letter pseudo-element tags abut the content (i.e., the initial character),

    while the :first-line pseudo-element start tag is inserted right after the start tag of the block

    element.

    In order to achieve traditional drop caps formatting, user agents may approximate font

    sizes, for example to align baselines. Also, the glyph outline may be taken into account when

    formatting.

    Punctuation (i.e, characters defined in Unicode in the "open" (Ps), "close" (Pe), "initial" (Pi).

    "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter

    should be included, as in:

    The ':first-letter' also applies if the first letter is in fact a digit, e.g., the "6" in "67 million

    dollars is a lot of money."

    The :first-letter pseudo-element applies to block container elements.

    The :first-letter pseudo-element can be used with all such elements that contain text, or

    that have a descendant in the same flow that contains text. A UA should act as if the

    fictional start tag of the first-letter pseudo-element is just before the first text of the

    element, even if that first text is in a descendant.

  • 20

    Here is an example. The fictional tag sequence for this HTML fragment:

    The first text.

    is:

    The first text.

    The first letter of a table-cell or inline-block cannot be the first letter of an ancestor

    element. Thus, in

    Hello
    Goodbye

    etcetera the first letter of the DIV is not the letter "H". In fact, the DIV does not have

    a first letter.

    The first letter must occur on the first formatted line. For example, in this fragment:


    First... the first line does not contain any letters and ':first-letter' does not match

    anything (assuming the default style for BR in HTML 4). In particular, it does not match the

    "F" of "First."

    If an element is a list item ('display: list-item'), the ':first-letter' applies to the first letter in

    the principal box after the marker. UAs may ignore ':first-letter' on list items with 'list-style-

    position: inside'. If an element has ':before' or ':after' content, the ':first-letter applies to the

    first letter of the element including that content.

    E.g., after the rule 'p:before {content: "Note: "}', the selector 'p:first-letter' matches the "N"

    of "Note".

    Some languages may have specific rules about how to treat certain letter combinations. In

    Dutch, for example, if the letter combination "ij" appears at the beginning of a word, both

    letters should be considered within the :first-letter pseudo-element.

    If the letters that would form the first-letter are not in the same element, such as "'T" in

    'T..., the UA may create a first-letter pseudo-element from one of the elements,

    both elements, or simply not create a pseudo-element.

    Similarly, if the first letter(s) of the block are not at the start of the line (for example due to

    bidirectional reordering), then the UA need not create the pseudo-element(s).

    The following example illustrates how overlapping pseudo-elements may interact. The first

    letter of each P element will be green with a font size of '24pt'. The rest of the first

    formatted line will be 'blue' while the rest of the paragraph will be 'red'.

    p { color: red; font-size: 12pt }

  • 21

    p:first-letter { color: green; font-size: 200% }

    p:first-line { color: blue }

    Some text that ends up on two lines

    Assuming that a line break will occur before the word "ends", the fictional tag sequence for

    this fragment might be:

    S

    ome text that

    ends up on two lines

    Note that the :first-letter element is inside the :first-line element. Properties set on :first-

    line are inherited by :first-letter, but are overridden if the same property is set on :first-

    letter.

    The :before and :after pseudo-elements

    The ':before' and ':after' pseudo-elements can be used to insert generated content before

    or after an element's content. They are explained in the section on generated text.

    h1:before {content: counter(chapno, upper-roman) ". "}

    When the :first-letter and :first-line pseudo-elements are applied to an element having

    content generated using :before and :after, they apply to the first letter or line of the

    element including the generated content.

    p.special:before {content: "Special! "}

    p.special:first-letter {color: #ffd800}

    This will render the "S" of "Special!" in gold.

  • 22

    Animation Properties

    Property Description CSS Version

    @keyframes Specifies the animation 3

    animation A shorthand property for all the animation

    properties below, except the animation-play-state

    property

    3

    animation-name Specifies a name for the @keyframes animation 3

    animation-duration Specifies how many seconds or milliseconds an

    animation takes to complete one cycle

    3

    animation-timing-function Specifies the speed curve of the animation 3

    animation-delay Specifies when the animation will start 3

    animation-iteration-count Specifies the number of times an animation

    should be played

    3

    animation-direction Specifies whether or not the animation should

    play in reverse on alternate cycles

    3

    animation-play-state Specifies whether the animation is running or

    paused

    3

    Background Properties

    Property Description CSS Version

    background Sets all the background properties in one

    declaration

    1

  • 23

    background-attachment Sets whether a background image is fixed or

    scrolls with the rest of the page

    1

    background-color Sets the background color of an element 1

    background-image Sets the background image for an element 1

    background-position Sets the starting position of a background image 1

    background-repeat Sets how a background image will be repeated 1

    background-clip Specifies the painting area of the background 3

    background-origin Specifies the positioning area of the background

    images

    3

    background-size Specifies the size of the background images 3

    Border and Outline Properties

    Property Description CSS Version

    border Sets all the border properties in one declaration 1

    border-bottom Sets all the bottom border properties in one

    declaration

    1

    border-bottom-color Sets the color of the bottom border 1

    border-bottom-style Sets the style of the bottom border 1

    border-bottom-width Sets the width of the bottom border 1

    border-color Sets the color of the four borders 1

  • 24

    border-left Sets all the left border properties in one declaration 1

    border-left-color Sets the color of the left border 1

    border-left-style Sets the style of the left border 1

    border-left-width Sets the width of the left border 1

    border-right Sets all the right border properties in one declaration 1

    border-right-color Sets the color of the right border 1

    border-right-style Sets the style of the right border 1

    border-right-width Sets the width of the right border 1

    border-style Sets the style of the four borders 1

    border-top Sets all the top border properties in one declaration 1

    border-top-color Sets the color of the top border 1

    border-top-style Sets the style of the top border 1

    border-top-width Sets the width of the top border 1

    border-width Sets the width of the four borders 1

    outline Sets all the outline properties in one declaration 2

    outline-color Sets the color of an outline 2

    outline-style Sets the style of an outline 2

    outline-width Sets the width of an outline 2

  • 25

    border-bottom-left-

    radius

    Defines the shape of the border of the bottom-left

    corner

    3

    border-bottom-right-

    radius

    Defines the shape of the border of the bottom-right

    corner

    3

    border-image A shorthand property for setting all the border-image-

    * properties

    3

    border-image-outset Specifies the amount by which the border image area

    extends beyond the border box

    3

    border-image-repeat Specifies whether the image-border should be

    repeated, rounded or stretched

    3

    border-image-slice Specifies the inward offsets of the image-border 3

    border-image-source Specifies an image to be used as a border 3

    border-image-width Specifies the widths of the image-border 3

    border-radius A shorthand property for setting all the four border-*-

    radius properties

    3

    border-top-left-radius Defines the shape of the border of the top-left corner 3

    border-top-right-radius Defines the shape of the border of the top-right

    corner

    3

    box-decoration-break 3

    box-shadow Attaches one or more drop-shadows to the box 3

  • 26

    Box Properties

    Property Description CSS Version

    overflow-x Specifies whether or not to clip the left/right edges of

    the content, if it overflows the element's content area

    3

    overflow-y Specifies whether or not to clip the top/bottom edges

    of the content, if it overflows the element's content

    area

    3

    overflow-style Specifies the preferred scrolling method for elements

    that overflow

    3

    rotation Rotates an element around a given point defined by

    the rotation-point property

    3

    rotation-point Defines a point as an offset from the top left border

    edge

    3

    Color Properties

    Property Description CSS Version

    color-profile Permits the specification of a source color profile

    other than the default

    3

    opacity Sets the opacity level for an element 3

    rendering-intent Permits the specification of a color profile rendering

    intent other than the default

    3

  • 27

    Content for Paged Media Properties

    Property Description CSS Version

    bookmark-label Specifies the label of the bookmark 3

    bookmark-level Specifies the level of the bookmark 3

    bookmark-target Specifies the target of the bookmark link 3

    float-offset Pushes floated elements in the opposite direction of

    the where they have been floated with float

    3

    hyphenate-after Specifies the minimum number of characters in a

    hyphenated word after the hyphenation character

    3

    hyphenate-before Specifies the minimum number of characters in a

    hyphenated word before the hyphenation character

    3

    hyphenate-character Specifies a string that is shown when a hyphenate-

    break occurs

    3

    hyphenate-lines Indicates the maximum number of successive

    hyphenated lines in an element

    3

    hyphenate-resource Specifies a comma-separated list of external

    resources that can help the browser determine

    hyphenation points

    3

    hyphens Sets how to split words to improve the layout of

    paragraphs

    3

    image-resolution Specifies the correct resolution of images 3

    marks Adds crop and/or cross marks to the document 3

    string-set 3

  • 28

    Dimension Properties

    Property Description CSS Version

    height Sets the height of an element 1

    max-height Sets the maximum height of an element 2

    max-width Sets the maximum width of an element 2

    min-height Sets the minimum height of an element 2

    min-width Sets the minimum width of an element 2

    width Sets the width of an element 1

    Flexible Box Properties

    Property Description CSS Version

    box-align Specifies how to align the child elements of a box 3

    box-direction Specifies in which direction the children of a box are

    displayed

    3

    box-flex Specifies whether the children of a box is flexible or

    inflexible in size

    3

    box-flex-group Assigns flexible elements to flex groups 3

    box-lines Specifies whether columns will go onto a new line

    whenever it runs out of space in the parent box

    3

  • 29

    box-ordinal-group Specifies the display order of the child elements of a

    box

    3

    box-orient Specifies whether the children of a box should be laid

    out horizontally or vertically

    3

    box-pack Specifies the horizontal position in horizontal boxes

    and the vertical position in vertical boxes

    3

    Font Properties

    Property Description CSS Version

    font Sets all the font properties in one declaration 1

    font-family Specifies the font family for text 1

    font-size Specifies the font size of text 1

    font-style Specifies the font style for text 1

    font-variant Specifies whether or not a text should be displayed in

    a small-caps font

    1

    font-weight Specifies the weight of a font 1

    @font-face A rule that allows websites to download and use fonts

    other than the "web-safe" fonts

    3

    font-size-adjust Preserves the readability of text when font fallback

    occurs

    3

    font-stretch Selects a normal, condensed, or expanded face from a

    font family

    3

  • 30

    Generated Content Properties

    Property Description CSS Version

    content Used with the :before and :after pseudo-elements, to

    insert generated content

    2

    counter-increment Increments one or more counters 2

    counter-reset Creates or resets one or more counters 2

    quotes Sets the type of quotation marks for embedded

    quotations

    2

    crop Allows a replaced element to be just a rectangular

    area of an object, instead of the whole object

    3

    move-to Causes an element to be removed from the flow and

    reinserted at a later point in the document

    3

    page-policy Determines which page-based occurance of a given

    element is applied to a counter or string value

    3

    Grid Properties

    Property Description CSS Version

    grid-columns Specifies the width of each column in a grid 3

    grid-rows Specifies the height of each column in a grid 3

  • 31

    Hyperlink Properties

    Property Description CSS Version

    target A shorthand property for setting the target-name,

    target-new, and target-position properties

    3

    target-name Specifies where to open links (target destination) 3

    target-new Specifies whether new destination links should open

    in a new window or in a new tab of an existing

    window

    3

    target-position Specifies where new destination links should be

    placed

    3

    Linebox Properties

    Property Description CSS Version

    alignment-adjust Allows more precise alignment of elements 3

    alignment-baseline Specifies how an inline-level element is aligned with

    respect to its parent

    3

    baseline-shift Allows repositioning of the dominant-baseline relative

    to the dominant-baseline

    3

    dominant-baseline Specifies a scaled-baseline-table 3

    drop-initial-after-adjust Sets the alignment point of the drop initial for the

    primary connection point

    3

    drop-initial-after-align Sets which alignment line within the initial line box is

    used at the primary connection point with the initial

    letter box

    3

  • 32

    drop-initial-before-

    adjust

    Sets the alignment point of the drop initial for the

    secondary connection point

    3

    drop-initial-before-

    align

    Sets which alignment line within the initial line box is

    used at the secondary connection point with the

    initial letter box

    3

    drop-initial-size Controls the partial sinking of the initial letter 3

    drop-initial-value Activates a drop-initial effect 3

    inline-box-align Sets which line of a multi-line inline block align with

    the previous and next inline elements within a line

    3

    line-stacking A shorthand property for setting the line-stacking-

    strategy, line-stacking-ruby, and line-stacking-shift

    properties

    3

    line-stacking-ruby Sets the line stacking method for block elements

    containing ruby annotation elements

    3

    line-stacking-shift Sets the line stacking method for block elements

    containing elements with base-shift

    3

    line-stacking-strategy Sets the line stacking strategy for stacked line boxes

    within a containing block element

    3

    text-height Sets the block-progression dimension of the text

    content area of an inline box

    3

    List Properties

    Property Description CSS Version

    list-style Sets all the properties for a list in one declaration 1

  • 33

    list-style-image Specifies an image as the list-item marker 1

    list-style-position Specifies if the list-item markers should appear inside

    or outside the content flow

    1

    list-style-type Specifies the type of list-item marker 1

    Margin Properties

    Property Description CSS Version

    margin Sets all the margin properties in one declaration 1

    margin-bottom Sets the bottom margin of an element 1

    margin-left Sets the left margin of an element 1

    margin-right Sets the right margin of an element 1

    margin-top Sets the top margin of an element 1

    Marquee Properties

    Property Description CSS Version

    marquee-direction Sets the direction of the moving content 3

    marquee-play-count Sets how many times the content move 3

    marquee-speed Sets how fast the content scrolls 3

    marquee-style Sets the style of the moving content 3

  • 34

    Multi-column Properties

    Property Description CSS Version

    column-count Specifies the number of columns an element should

    be divided into

    3

    column-fill Specifies how to fill columns 3

    column-gap Specifies the gap between the columns 3

    column-rule A shorthand property for setting all the column-rule-*

    properties

    3

    column-rule-color Specifies the color of the rule between columns 3

    column-rule-style Specifies the style of the rule between columns 3

    column-rule-width Specifies the width of the rule between columns 3

    column-span Specifies how many columns an element should span

    across

    3

    column-width Specifies the width of the columns 3

    columns A shorthand property for setting column-width and

    column-count

    3

    Padding Properties

    Property Description CSS Version

    padding Sets all the padding properties in one declaration 1

    padding-bottom Sets the bottom padding of an element 1

  • 35

    padding-left Sets the left padding of an element 1

    padding-right Sets the right padding of an element 1

    padding-top Sets the top padding of an element 1

    Paged Media Properties

    Property Description CSS Version

    fit Gives a hint for how to scale a replaced element if

    neither its width nor its height property is auto

    3

    fit-position Determines the alignment of the object inside the box 3

    image-orientation Specifies a rotation in the right or clockwise direction

    that a user agent applies to an image

    3

    page Specifies a particular type of page where an element

    SHOULD be displayed

    3

    size Specifies the size and orientation of the containing

    box for page content

    3

    Positioning Properties

    Property Description CSS Version

    bottom Specifies the bottom position of a positioned element 2

    clear Specifies which sides of an element where other

    floating elements are not allowed

    1

  • 36

    clip Clips an absolutely positioned element 2

    cursor Specifies the type of cursor to be displayed 2

    display Specifies how a certain HTML element should be

    displayed

    1

    float Specifies whether or not a box should float 1

    left Specifies the left position of a positioned element 2

    overflow Specifies what happens if content overflows an

    element's box

    2

    position Specifies the type of positioning method used for an

    element (static, relative, absolute or fixed)

    2

    right Specifies the right position of a positioned element 2

    top Specifies the top position of a positioned element 2

    visibility Specifies whether or not an element is visible 2

    z-index Sets the stack order of a positioned element 2

    Print Properties

    Property Description CSS Version

    orphans Sets the minimum number of lines that must be left at

    the bottom of a page when a page break occurs inside

    an element

    2

    page-break-after Sets the page-breaking behavior after an element 2

  • 37

    page-break-before Sets the page-breaking behavior before an element 2

    page-break-inside Sets the page-breaking behavior inside an element 2

    widows Sets the minimum number of lines that must be left at

    the top of a page when a page break occurs inside an

    element

    2

    Ruby Properties

    Property Description CSS Version

    ruby-align Controls the text alignment of the ruby text and ruby

    base contents relative to each other

    3

    ruby-overhang Determines whether, and on which side, ruby text is

    allowed to partially overhang any adjacent text in

    addition to its own base, when the ruby text is wider

    than the ruby base

    3

    ruby-position Controls the position of the ruby text with respect to

    its base

    3

    ruby-span Controls the spanning behavior of annotation

    elements

    3

    Speech Properties

    Property Description CSS Version

    mark A shorthand property for setting the mark-before and

    mark-after properties

    3

    mark-after Allows named markers to be attached to the audio 3

  • 38

    stream

    mark-before Allows named markers to be attached to the audio

    stream

    3

    phonemes Specifies a phonetic pronunciation for the text

    contained by the corresponding element

    3

    rest A shorthand property for setting the rest-before and

    rest-after properties

    3

    rest-after Specifies a rest or prosodic boundary to be observed

    after speaking an element's content

    3

    rest-before Specifies a rest or prosodic boundary to be observed

    before speaking an element's content

    3

    voice-balance Specifies the balance between left and right channels 3

    voice-duration Specifies how long it should take to render the

    selected element's content

    3

    voice-pitch Specifies the average pitch (a frequency) of the

    speaking voice

    3

    voice-pitch-range Specifies variation in average pitch 3

    voice-rate Controls the speaking rate 3

    voice-stress Indicates the strength of emphasis to be applied 3

    voice-volume Refers to the amplitude of the waveform output by

    the speech synthesises

    3

  • 39

    Table Properties

    Property Description CSS Version

    border-collapse Specifies whether or not table borders should be

    collapsed

    2

    border-spacing Specifies the distance between the borders of

    adjacent cells

    2

    caption-side Specifies the placement of a table caption 2

    empty-cells Specifies whether or not to display borders and

    background on empty cells in a table

    2

    table-layout Sets the layout algorithm to be used for a table 2

    Text Properties

    Property Description CSS Version

    color Sets the color of text 1

    direction Specifies the text direction/writing direction 2

    letter-spacing Increases or decreases the space between characters

    in a text

    1

    line-height Sets the line height 1

    text-align Specifies the horizontal alignment of text 1

    text-decoration Specifies the decoration added to text 1

    text-indent Specifies the indentation of the first line in a text- 1

  • 40

    block

    text-transform Controls the capitalization of text 1

    unicode-bidi 2

    vertical-align Sets the vertical alignment of an element 1

    white-space Specifies how white-space inside an element is

    handled

    1

    word-spacing Increases or decreases the space between words in a

    text

    1

    hanging-punctuation Specifies whether a punctuation character may be

    placed outside the line box

    3

    punctuation-trim Specifies whether a punctuation character should be

    trimmed

    3

    text-align-last Describes how the last line of a block or a line right

    before a forced line break is aligned when text-align is

    "justify"

    3

    text-justify Specifies the justification method used when text-

    align is "justify"

    3

    text-outline Specifies a text outline 3

    text-overflow Specifies what should happen when text overflows

    the containing element

    3

    text-shadow Adds shadow to text 3

    text-wrap Specifies line breaking rules for text 3

  • 41

    word-break Specifies line breaking rules for non-CJK scripts 3

    word-wrap Allows long, unbreakable words to be broken and

    wrap to the next line

    3

    2D/3D Transform Properties

    Property Description CSS Version

    transform Applies a 2D or 3D transformation to an element 3

    transform-origin Allows you to change the position on transformed

    elements

    3

    transform-style Specifies how nested elements are rendered in 3D

    space

    3

    perspective Specifies the perspective on how 3D elements are

    viewed

    3

    perspective-origin Specifies the bottom position of 3D elements 3

    backface-visibility Defines whether or not an element should be visible

    when not facing the screen

    3

    Transition Properties

    Property Description CSS Version

    transition A shorthand property for setting the four transition

    properties

    3

    transition-property Specifies the name of the CSS property the transition

    effect is for

    3

  • 42

    transition-duration Specifies how many seconds or milliseconds a

    transition effect takes to complete

    3

    transition-timing-

    function

    Specifies the speed curve of the transition effect 3

    transition-delay Specifies when the transition effect will start 3

    User-interface Properties

    Property Description CSS Version

    appearance Allows you to make an element look like a standard

    user interface element

    3

    box-sizing Allows you to define certain elements to fit an area in

    a certain way

    3

    icon Provides the author the ability to style an element

    with an iconic equivalent

    3

    nav-down Specifies where to navigate when using the arrow-

    down navigation key

    3

    nav-index Specifies the tabbing order for an element 3

    nav-left Specifies where to navigate when using the arrow-left

    navigation key

    3

    nav-right Specifies where to navigate when using the arrow-

    right navigation key

    3

    nav-up Specifies where to navigate when using the arrow-up

    navigation key

    3

  • 43

    outline-offset Offsets an outline, and draws it beyond the border

    edge

    3

    resize Specifies whether or not an element is resizable by

    the user

    3

    Examples

    1. The following example demonstrates how to use background image paroperties of css

    body

    {

    background-image:url(e:/images/garden.jpg);

    background-repeat:no-repeat;

    background-size:200px 200px;

    background-position:center center;

    background-attachment:fixed;

    }

    Provide Text in the body to make the page scrollable

  • 44

    2. The following example animates a div element and moves it right and left with

    animation properties of css 3

    div

    {

    width:100px;

    height:100px;

    background:red;

    position:relative;

    animation:mymove 5s 2;

    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

    }

    @keyframes mymove

    {

    from {left:0px;}

    to {left:200px;}

    }

    @-webkit-keyframes mymove /*Safari and Chrome*/

    {

    from {left:0px;}

    to {left:200px;}

    }

  • 45

    3. The following example animates a div element and moves it right then down then left

    and finally top with animation properties of css 3

    div

    {

    width:100px;

    height:100px;

    background:red;

    position:relative;

    animation-name:myfirst;

    animation-duration:5s;

    animation-timing-function:linear;

    animation-delay:2s;

    animation-iteration-count:infinite;

    animation-direction:alternate;

    animation-play-state:running;

    /* Firefox: */

    -moz-animation-name:myfirst;

  • 46

    -moz-animation-duration:5s;

    -moz-animation-timing-function:linear;

    -moz-animation-delay:2s;

    -moz-animation-iteration-count:infinite;

    -moz-animation-direction:alternate;

    -moz-animation-play-state:running;

    /* Safari and Chrome: */

    -webkit-animation-name:myfirst;

    -webkit-animation-duration:5s;

    -webkit-animation-timing-function:linear;

    -webkit-animation-delay:2s;

    -webkit-animation-iteration-count:infinite;

    -webkit-animation-direction:alternate;

    -webkit-animation-play-state:running;

    /* Opera: */

    -o-animation-name:myfirst;

    -o-animation-duration:5s;

    -o-animation-timing-function:linear;

    -o-animation-delay:2s;

    -o-animation-iteration-count:infinite;

    -o-animation-direction:alternate;

    -o-animation-play-state:running;

    }

    @keyframes myfirst

    {

    0% {background:red; left:0px; top:0px;}

  • 47

    25% {background:yellow; left:200px; top:0px;}

    50% {background:blue; left:200px; top:200px;}

    75% {background:green; left:0px; top:200px;}

    100% {background:red; left:0px; top:0px;}

    }

    @-moz-keyframes myfirst /* Firefox */

    {

    0% {background:red; left:0px; top:0px;}

    25% {background:yellow; left:200px; top:0px;}

    50% {background:blue; left:200px; top:200px;}

    75% {background:green; left:0px; top:200px;}

    100% {background:red; left:0px; top:0px;}

    }

    @-webkit-keyframes myfirst /* Safari and Chrome */

    {

    0% {background:red; left:0px; top:0px;}

    25% {background:yellow; left:200px; top:0px;}

    50% {background:blue; left:200px; top:200px;}

    75% {background:green; left:0px; top:200px;}

    100% {background:red; left:0px; top:0px;}

    }

    @-o-keyframes myfirst /* Opera */

    {

    0% {background:red; left:0px; top:0px;}

    25% {background:yellow; left:200px; top:0px;}

    50% {background:blue; left:200px; top:200px;}

  • 48

    75% {background:green; left:0px; top:200px;}

    100% {background:red; left:0px; top:0px;}

    }

    4. The following example rotates an image when mouse is over the image with

    animation properties of css 3

    @-webkit-keyframes spin

    {

    from { -webkit-transform: rotate(0deg);}

    to { -webkit-transform: rotate(360deg);}

    }

    @-moz-keyframes spin {

    from { -moz-transform: rotate(0deg);}

    to { -moz-transform: rotate(360deg);}

    }

    @-o-keyframes spin {

    from { -o-transform: rotate(0deg);}

  • 49

    to { -o-transform: rotate(360deg);}

    }

    @-ms-keyframes spin {

    from { -ms-transform: rotate(0deg);}

    to { -ms-transform: rotate(360deg);}

    }

    img

    {

    width:250px;

    height:250px;

    align:center;

    }

    img:hover

    {

    -webkit-animation: spin 5s infinite linear;

    -moz-animation: spin 5s infinite linear;

    -o-animation: spin 5s infinite linear;

    -ms-animation: spin 5s infinite linear;

    }

  • 50

    5. The following example changes background of the page from red to yellow using

    animation properties of css 3

    body

    {

    width:100px;

    height:100px;

    background:red;

    position:relative;

    animation:mycolor 5s infinite;

    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

    }

    @keyframes mycolor

    {

    from {background: red;}

    to {background: yellow;}

    }

    @-moz-keyframes mycolor /* Firefox */

    {

    from {background: red;}

    to {background: yellow;}

    }

    @-webkit-keyframes mycolor /* Safari and Chrome */

    {

    from {background: red;}

    to {background: yellow;}

    }

  • 51

    6. The following example demonstrates how to design a page as follows using css

    Create an external css file with name global.css as follows

    /* BASIC */

    body {

    font: 62.7% Verdana, Arial, Helvetica, sans-serif;

    }

    h1, h2, h3, h4, p, ul, ol {

    margin: 0px;

    padding: 0px;

    }

    a img {

    border: none;

    }

    /* LAYOUT */

  • 52

    #banner {

    background: url(images/banner.png) no-repeat right top;

    height: 90px;

    }

    /* NAVIGATION */

    #mainNav li {

    list-style: none;

    display: inline;

    }

    #mainNav a {

    text-decoration: none;

    color: #000000;

    font-size: 1.1em;

    text-transform: uppercase;

    border-bottom: 1px dashed #999999;

    display: block;

    padding: 7px 5px 7px 30px;

    background: #E7E7E7 url(images/link.png) no-repeat left center;

    }

    a#homeLink {

    background-image: url(images/home.png);

    background-repeat: no-repeat;

    background-position: left center;

    }

    #logo {

    display: none;

    }

    #mainNav ul {

    border-top: 1px dashed #999999;

    margin-top: 20px;

    margin-bottom: 20px;

    }

    #mainNav a:hover {

    background: #B2F511 url(images/go.png) no-repeat left center;

    padding-right: 15px;

    padding-left: 30px;

    font-weight: bold;

  • 53

    }

    #home #mainNav a#homelink,

    #feature #mainNav a#featureLink {

    background: #FFFFFF url(images/bg_here.png) no-repeat 95% 50%;

    padding-right: 15px;

    padding-left: 30px;

    font-weight: bold;

    }

    #home #mainNav a#homelink:hover,

    #feature #mainNav a#featureLink:hover {

    color: #B2F511;

    }

    #nav p {

    color: #ED6733;

    padding-right: 5px;

    padding-left: 5px;

    }

    #nav a {

    text-decoration: none;

    color: #666666;

    }

    /* BANNER STYLES */

    #banner img {

    float: left;

    }

    #banner ul {

    margin: 0px;

    padding: 0px;

    list-style: none;

    }

    #banner li {

    display: inline;

    float: right;

    margin-right: 5px;

    padding-bottom: .5em; /* to display bottom border on links in IE */

  • 54

    }

    #sitetools li a {

    font-size: 1em;

    text-decoration: none;

    color: #FFFFFF;

    line-height: 2em;

    background: #1B3A89;

    padding: 5px;

    height: 2em;

    border: 1px solid #4D69B0;

    font-weight: bold;

    }

    #sitetools li a:hover {

    color: #10214E;

    background: #DCE5FF;

    }

    /* MAIN */

    #main a {

    text-decoration: none;

    border-bottom: 1px dashed #B2F511;

    color: #152D6A;

    }

    #main h1 {

    color: #152D6A;

    margin-top: 15px;

    margin-bottom: 5px;

    border-bottom: 2px solid #B2F511;

    font: normal 2.7em Impact, "Arial Narrow", sans-serif;

    text-transform: uppercase;

    letter-spacing: 1px;

    word-spacing: 5px;

    background: url(images/feature_bug.png) no-repeat top right;

    }

    #main h2 {

    font: normal 2em Georgia, "Times New Roman", Times, serif;

    margin-top: 15px;

  • 55

    margin-bottom: 3px;

    color: #152D6A;

    }

    #main p {

    font-size: 1.25em;

    margin-bottom: 5px;

    }

    /* headlines with warnings */

    .warning {

    background: url(images/warning.png) no-repeat left center;

    padding-top: 2px;

    padding-left: 30px;

    border-bottom: 1px dotted #CCCCCC;

    }

    /* NEWS */

    #news .story {

    background: url(images/bg_story.png) repeat-y;

    color: #FFFFFF;

    padding: 5px 5px;

    border-bottom: 1px dashed #AAEB11;

    display: block;

    text-decoration: none;

    line-height: 110%;

    }

    #news span.title {

    font-size: 1.1em;

    font-weight: bold;

    display: block;

    line-height: 120%;

    color: #FFCC00;

    }

    #news a.story:hover {

    color: #4A761D;

    background: url(images/bg_story_high.png);

    }

    * html #news a {

    height: 1px;

    }

  • 56

    #news h2 {

    background: #B2F511 url(images/bg_newshead.png) no-repeat;

    color: #333333;

    font-size: 2em;

    text-transform: uppercase;

    padding-top: 25px;

    padding-bottom: 0px;

    padding-left: 5px;

    }

    #news h2 span {

    background: url(images/down.png) no-repeat;

    position: absolute;

    right: 10px;

    height: 48px;

    width: 48px;

    top: 4px;

    z-index: 10;

    }

    /* ADVERTISING */

    div.natEx {

    text-align: center;

    margin-top: 25px;

    font-weight: bold;

    }

    .natEx p {

    margin-bottom: 5px;

    }

    #news a.story:hover span.title {

    color: #000000;

    }

    Create the html file as follows to design the page

  • 57

    body

    {

    margin: 0;

    padding: 0;

    background: #E6E6E6 url(images/page_bg.png) repeat-y center top;

    }

    #wrapper

    {

    width: 760px;

    margin-right: auto;

    margin-left: auto;

    border-right: 2px solid #000000;

    border-left: 2px solid #000000;

    background: #FFFFFF url(images/column_bg.png) repeat-y right top;

    }

    #main

    {

    display: inline; /*for IE */

    float: left;

    width: 419px;

    margin-left: 160px;

    padding-left: 10px;

    border-left: 1px dashed #999999;

    }

  • 58

    #news

    {

    float: right;

    width: 160px;

    }

    #nav

    {

    float: left;

    width: 160px;

    margin-left: -590px;

    }

    #legal

    {

    clear: both;

    margin-right: 160px;

    padding: 5px 5px 160px 20px;

    border-top: 1px dashed #999999;

    font-weight: bold;

    color: #666666;

    }

  • 59

    Contact Us

    Subscribe

    Bathtub Hydroponics

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    nibh euismod tincidunt ut laoreet dolore magna aliquam erat

    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem

    vel eum iriure. You'll find more

    information here

    .

    Watch the Water Level

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    nibh euismod tincidunt ut laoreet dolore magna aliquam erat

    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem

    vel eum iriure.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    nibh euismod tincidunt ut laoreet dolore magna aliquam erat

    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem

    vel eum iriure.

    Rubber Duckies Needn’t Apply

  • 60

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    nibh euismod tincidunt ut laoreet dolore magna aliquam erat

    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem

    vel eum iriure.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    nibh euismod tincidunt ut laoreet dolore magna aliquam erat

    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem

    vel eum iriure.

    Cast-Iron No-Nos

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    nibh euismod tincidunt ut laoreet dolore magna aliquam erat

    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem

    vel eum iriure.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    nibh euismod tincidunt ut laoreet dolore magna aliquam erat

    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem

    vel eum iriure.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    nibh euismod tincidunt ut laoreet dolore magna aliquam erat

    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem

    vel eum iriure.

    Clean the Overflow Valve

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    nibh euismod tincidunt ut laoreet dolore magna aliquam erat

    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem

    vel eum iriure.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    nibh euismod tincidunt ut laoreet dolore magna aliquam erat

    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

  • 61

    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem

    vel eum iriure.

    News

    Virgo: It's Your Month

    The stars are aligned in your favor. Next month? Not so much.

    Your FeedbackCosmoFarmer

    wants to hear from you. We want your honest opinion on this

    TOTALLY AWESOME web site.

    Indoor Lawns:

    Sod or Seed?

    Should you grow grass from scratch or have an expert install a beautiful, already

    grown, lucious bed of green in your living room?

    Lorem Ipsum

    Lorem ipsum dolor sit amet

    Lorem Ipsum Lorem ipsum

    dolor sit amet

    Lorem Ipsum Lorem ipsum

    dolor sit amet

    Lorem Ipsum Lorem ipsum

    dolor sit amet

    Lorem Ipsum Lorem ipsum

    dolor sit amet

    Lorem Ipsum Lorem ipsum

    dolor sit amet

  • 62

    Home

    Features

    Experts

    Quiz

    Projects

    Horoscopes

    CosmoFarmer.com believes that your privacy is important. All monitoring that

    takes place as you visit our site is protected. Infortmation collected

    is limited to our network of 9,872 partner affiliates. Your information will only be

    shared among them, and as part of our network's anti-spam policy

    you will be limited to one e-mail per partner affiliate per day, not to exceed a total

    of 9,872 e-mails a day. If you wish to opt out of this program please

    call us between the hours of 9:01-9:03am GMT.

    Subscribe to the National

    Exasperator Today!

     

    Copyright 2006, CosmoFarmer.com

  • 63

    7. The following example demonstrates how to design a page with a form as follows

    using css

    Create an external css file with the name global.css as follows

    /* BASIC */

    body

    {

    font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;

    margin: 0;

    background-color: #FFFFFF;

    }

    p,h1,h2,h3,h4,h5,h5,ol,ul

    {

    margin: 0px;

  • 64

    padding: 0px;

    }

    br.clear

    {

    height:1px;

    clear:both;

    line-height: 1px;

    background-color: #00CC33;

    }

    /* LAYOUT */

    #wrapper

    {

    width: 760px;

    border-right-width: 1px;

    border-right-style: solid;

    border-right-color: #999999;

    }

    #main

    {

    border-right: 1px solid #999999;

    border-left: 1px solid #999999;

    padding: 3px 3px 0 6px;

    float: left;

    width: 424px;

    }

    #subNav

  • 65

    {

    width: 150px;

    float: left;

    background-color: #FBEF99;

    }

    #banner

    {

    background-image: url(images/bg/banner_bg.jpg);

    background-repeat: repeat-x;

    background-position:

    left top;

    width: 759px;

    border-bottom: 1px solid #999999;

    }

    #announce

    {

    float: left;

    width: 166px;

    border-top: 10px solid #294E56;

    margin-top: 3px;

    background: url(images/bg/announce_bg.jpg) repeat-x left top;

    margin-left: 3px;

    line-height: 95%;

    margin-right: 3px;

    }

    #copyright

  • 66

    {

    clear: both;

    margin-left: 150px;

    border: 1px solid #999999;

    border-right:none;

    font-size: 12px;

    padding-left: 6px;

    }

    /* BANNER STYLES */

    #background

    {

    background-image: url(images/bg/banner_flower.jpg);

    background-repeat: no-repeat;

    background-position: right top;

    }

    /* image replacement technique */

    #banner p.logo

    {

    background: url(images/logo.gif) no-repeat left top;

    height: 70px;

    text-indent: -5000px;

    }

    #nav

    {

    margin-top: 10px;

    margin-bottom: 0px;

  • 67

    }

    #nav li

    {

    list-style-type: none;

    padding: 0px;

    margin: 0;

    float: left;

    }

    #nav a

    {

    display: block;

    font-size: 11px;

    color: #D6ECAE;

    text-decoration: none;

    background-color: #294E56;

    padding: 2px 2px 2px 3px;

    width: 8em;

    margin-left: 2px;

    border-right: 1px solid #73AFB7;

    border-bottom: 1px solid #73AFB7;

    font-weight: bold;

    margin-bottom: 2px;

    }

    #nav a:hover

    {

    background: #73AFB7;

  • 68

    border-right: 1px solid #14556B;

    border-bottom: 1px solid #14556B;

    color: #FBEF99;

    }

    /*highlight "you are here" buttons*/

    #home #nav a#homeLink,

    #feature #nav a#featureLink

    {

    background: #73AFB7;

    border-right: 1px solid #14556B;

    border-bottom: 1px solid #14556B;

    color: #FBEF99;

    }

    /* MAIN SECTION STYLES */

    #main h1 {

    color: #5F9794;

    font: bold 24px "Century Gothic", "Gill Sans", Arial, sans-serif;

    }

    /* ANNOUNCEMENT STYLES */

    #announce h2

    {

    font-size: 14px;

    }

    #announce a

    {

    font-size: 12px;

  • 69

    display: block;

    text-decoration: none;

    color: #102536;

    padding: 3px 5px;

    border-bottom: 1px solid #14556B;

    }

    #announce .title

    {

    font-weight: bold;

    display: block;

    }

    #announce a:hover

    {

    background-color: #5F9794;

    color: #FBEF99

    }

    #announce ul

    {

    list-style:none;

    }

    #announce li

    {

    display: inline;

    }

    /* PAGE SPECIFIC STYLES */

    /* HOME */

  • 70

    /* no left sidebar--stretch main entire distance */

    #home #main

    {

    margin-left: 0;

    width: 577px;

    }

    /* copyright fits page */

    #home #copyright

    {

    margin-left: 0;

    padding: 3px 0 3px 30px;

    font-style: italic;

    }

    #subNav li a

    {

    font-size: 12px;

    text-decoration: none;

    display: block;

    width: 138px;

    background: url(images/bg/side_nav_bg3.jpg) repeat-x;

    padding: 2px 6px;

    color: #14556B;

    border-bottom: 1px solid #d6ecae;

    }

    #subNav li a:hover

    {

  • 71

    background: url(images/bg/side_nav_bg.jpg);

    color: #102536;

    }

    .col2 #announce

    {

    float: left;

    margin-bottom: 10px;

    }

    .col2 #main

    {

    float: right;

    border-right: none;

    width: 573px;

    }

    .col2 #copyright

    {

    margin-left: 0px;

    }

    #main h2

    {

    font-size: 1.2em;

    margin-top: 15px;

    color: #666666;

    }

    #main #subForm p

    {

  • 72

    margin-top: 10px;

    margin-bottom: 10px;

    }

    #main p.privacy

    {

    color: #73AFB7;

    margin-top: 25px;

    margin-bottom: 50px;

    font-size: 0.85em;

    }

    Create a html page as follows for designing the page with a form

    #subForm

    {

    font-size: .8em;

    }

    #subForm .label

    {

  • 73

    float: left;

    width: 230px;

    margin-right: 10px;

    text-align: right;

    font-weight: bold;

    clear: left;

    }

    #subscribe

    {

    margin-left: 240px;

    background-color: #CBD893;

    font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;

    }

    #refer

    {

    font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;

    }

    #name, #email, #comments

    {

    background-color: #FBEF99;

    font-family:"Lucida Console", Monaco, monospace;

    font-size: .9em;

    width: 300px;

    margin-top: -2px;

    }

  • 74

    #name:focus,

    #email:focus,

    #comments:focus,

    #refer:focus

    {

    background-color: #FDD041;

    }

    CosmoFarmer 2.0

    Home

    Features

    Experts

    Quiz

    Projects

    Horoscopes


  • 75

    Sign Up: Reader Subscription Form

    What is your name?

    What is your email address?

    Rate your apartment farming skills

    Novice

    Intermediate

    Advanced

    Where did you hear about us?

    Select One

    Friend

    Herban Jungle

    Compost Today

    Vanity Fair

  • 76

    Any additional comments?


    CosmoFarmer.com believes that your privacy is important.

    Information collected at this site is limited to our network of 9,872 partner

    affiliates. Your information will only be shared among them, and as part of our

    network's anti-spam policy you will be limited to one e-mail per partner affiliate

    per day, not to exceed a total of 9,872 e-mails a day. If you wish to opt out of this

    program please call us between the hours of 9:01-9:03am GMT.

    Virgo: It's Your MonthLorem ipsum

    dolor site amet.

    Your Feedback Lorem ipsum dolor site

    amet.

    This Month's Survey Lorem ipsum

    dolor site amet.

    Indoor lawns: sod or seed? Lorem

    ipsum dolor site amet.

  • 77

    Lorem Ipsum Lorem ipsum dolor site

    amet.

    Dolor site amet Lorem ipsum dolor site

    amet.

    Adipiscing elit Lorem ipsum dolor

    site amet.

    Euismod tincidunt Lorem ipsum dolor

    site amet.

    Copyright 2006, CosmoFarmer.com

    8. The following example demonstrates how to create multi column layout

    .threecolumn

    {

    -moz-column-count:3; /* Firefox */

    -webkit-column-count:3; /* Safari and Chrome */

    column-count:3;

  • 78

    -moz-column-gap:40px; /* Firefox */

    -webkit-column-gap:40px; /* Safari and Chrome */

    column-gap:40px;

    -moz-column-rule:3px outset blue; /* Firefox */

    -webkit-column-rule:3px outset blue; /* Safari and Chrome */

    column-rule:3px outset blue;

    -moz-column-width:200px; /* Firefox */

    -webkit-column-width:200px; /* Safari and Chrome */

    -ms-column-width:200px;

    }

    h2

    {

    -webkit-column-span:1; /* Chrome */

    column-span:1;

    -ms-column-span:1;

    }

    This Heading Spans On All Columns In The page This Heading Spans On All

    Columns In The page

    This is a three column layout created for the page with css 3. This is a three column

    layout created for the page with css 3. This is a three column layout created for the

  • 79

    page with css 3. This is a three column layout created for the page with css 3. This

    is a three column layout created for the page with css 3. This is a three column

    layout created for the page with css 3. This is a three column layout created for the

    page with css 3. This is a three column layout created for the page with css 3. This

    is a three column layout created for the page with css 3. This is a three column

    layout created for the page with css 3. This is a three column layout created for the

    page with css 3. This is a three column layout created for the page with css 3. This

    is a three column layout created for the page with css 3. This is a three column

    layout created for the page with css 3. This is a three column layout created for the

    page with css 3. This is a three column layout created for the page with css 3. This

    is a three column layout created for the page with css 3. This is a three column

    layout created for the page with css 3. This is a three column layout created for the

    page with css 3. This is a three column layout created for the page with css 3. This

    is a three column layout created for the page with css 3. This is a three column

    layout created for the page with css 3. This is a three column layout created for the

    page with css 3. This is a three column layout created for the page with css 3. This

    is a three column layout created for the page with css 3. This is a three column

    layout created for the page with css 3. This is a three column layout created for the

    page with css 3. This is a three column layout created for the page with css 3. This

    is a three column layout created for the page with css 3. This is a three column

    layout created for the page with css 3. This is a three column layout created for the

    page with css 3. This is a three column layout created for the page with css 3. This

    is a three column layout created for the page with css 3. This is a three column

    layout created for the page with css 3. This is a three column layout created for the

    page with css 3. This is a three column layout created for the page with css 3. This

    is a three column layout created for the page with css 3. This is a three column

    layout created for the page with css 3.