FANDOM


Smallwikipedialogo.png Wikipedia has an article related to:

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

SyntaxEdit

The syntax discussed here is the syntax used in an external stylesheet (.css) file. For more information on other ways to use it, see Usage.

A CSS file is usually composed of rule sets or rules. A rule set is composed of a selector and a declaration block.

Rule setEdit

SelectorEdit

In a rule set, selectors are used to determine the elements in the target document (for example, an HTML document) to apply the declarations in its corresponding declaration block. Each selector is composed of a type selector or universal selector followed by zero or more of the other kinds of selectors. Each component and combinator used in the other kinds of selectors may have optional whitespace between each other.

Example (here, the selector is h2:

h2 { color: #ff8000 }

Multiple selectors may be grouped by separating them with a comma. Example (the selectors are h2, h3 and span:

h2, h3, span { color: #ff00ff; }
Type selector

A type selector matches every element with the specified element name. Example:

pre { font-size: 1.2em } /* The pre selector matches every pre element in the document */
Universal selector

The universal selector matches every element in the document. If the universal selector is not the only component of a selector, it may be omitted. Example:

* { font-family: Helvetica } /* matches all elements in the document */
*.highlight { background-color: #80ff80 } /* matches all elements in the document
                                             in the highlight class */
.highlight { background-color: #80ff80 } /* effectively same as above rule */
Class selector

The class selector matches elements that belong to the specified class. The class selector is defined using a period followed by the class name. Multiple class selectors may be specified, elements will only be selected if they have all of the specified classes. Example:

Reference HTML:
<h2>Heading 1</h2>
<h2 class="note">Heading 2</h2>
<h2 class="rc note">Heading 3</h2>
<p class="note">Paragraph 1</p>
/* matches all elements with the "note" class.
   This matches Heading 2, Heading 3 and Paragraph 1. */
*.note { color: green }
/* same as above */
.note { color: green }
/* matches all h2 elements with the "note" class.
   This matches Heading 2 and Heading 3. */
h2.note { font-size: 1.2em }
/* matches al h2 elements with the "note" and the "rc" class.
   This matches Heading 3. */
h2.note.rc { font-weight: bold }
ID selector

The ID selector matches an element that has the specified ID. It is defined by preceding the ID with a number sign (#). Example:

/* matches the element with the ID "q1", looking in all elements */
#q1 { color: #ff00ff } /* same as *#q1 */
/* matches the element with the ID "q1", looking only in h3 elements */
h3#q1 { color: #ff00ff }
Attribute selector

The attribute selector matches elements with a specific defined attribute.

  • [attribute name] - matches elements that sets the specified attribute, regardless of the value of the attribute.
  • [attribute name=value] - matches elements with the specified attribute and value.
  • [attribute name~=val] - matches elements with the specified attribute with val being one of the space-separated values of the attribute.
  • [attribute name|=val] - same as above, but the values are hyphen-separated.
Child selector

The child selector matches elements which are children of some element. It is defined by selectors separated by the greater than sign (">"). Example:

/* matches all li elements that are children of a ul element */
ul>li { line-height: 0.7 }
Descendant selector

The descendant selector matches all descendants of some element. It is defined by selectors separated by whitespace. The level of descendancy may also be controlled using the universal selector. Example:

/* matches all descendant 'a' elements of div elements in the t2 class. */
div.t2 a { color: #9080ff }
/* matches grandchildren or later 'a' elements this time. */
div.t2 * a { font-size: 1.2em }
Adjacent sibling selector

The adjacent sibling selector matches an element "B" when an element "A" precedes it in the document tree, ignoring text and comments, and they share the same parent. It is defined using the syntax "A + B". Example:

h2 + span.nospace { margin-top: -0.5px }
Pseudo-elements and pseudo-classesEdit

Pseudo-elements match content that is not covered in the language of the document. Pseudo-classes match elements in ways other than attributes, structure of the document tree, and others.

Pseudo-classes:

  • :first-child - matches the first child element of some element
  • (a):link - matches unvisited links
  • (a):visited - matches visited links
  • :hover - styles applied when the user "hovers over" the element (for example, placing the cursor over the element), but does not activate (for example, clicking) the element.
  • :active - styles applied when the user activates the element (for example, between clicking and releasing the mouse button)
  • :focus - styles applied when the element has the focus.
  • :lang(<language code>) - styles applied when the document's languages matches those specified.

Pseudo-elements:

  • :first-line - styles applied to the first formatted line of a paragraph.
  • :first-letter - styles applied to the first letter of a paragraph.
  • :before and :after - inserts (generated) content before or after the actual content of the element, using the content: <value> declaration. Styles that come with the rule set are applied to the generated content.

DeclarationEdit

Declarations can change the properties of an element in the target document. Each declaration is composed of a property name, a colon (:), and the value of the property. If two or more declarations are declared in the block, they must be separated with semicolons (;). The declarations may optionally contain whitespace around them, such as spaces or line breaks. A single declaration block may have zero or more declarations.

Example of a single declaration:

h2 { font-weight: bold }

Example of multiple declarations in a block:

h2 {
    font-weight: bold;
    font-size: 12pt
}

Media typesEdit

This CSS feature specifies how the document is to be presented in different types of media presentation.

The @media rule specifies the media type to be used for a specific set of rule sets. Rule sets outside @media rules apply to all media types for the target document.

The different media types accepted in CSS are: all (all types), print (paper and paged media), projection (paged, for presentation), screen (color computer screens), tv (television-like), speech (spoken), braille (touch), embossed (braille pages), handheld (small screens), and tty (character grid, for example, console window).

CommentEdit

Comments are specified between "/*" and "*/". These can be multiline comments, and may be placed anywhere. Example:

h2 /* This selects all h2 (subheading) elements */ {
    font-size: 12pt; /* This sets the font size to 12 points */
} /* this is now
a multiline comment */

The !important ruleEdit

A declaration marked as !important overrides a normal declaration. An 'important' declaration is marked as important by appending "!important" to it. For example, when applying a style A to a document, then a style B:

/* style A */
p {
    font-size: 12pt !important;
    font-color: red;
    color: #ff00ff !important;
}
 
/* style B */
p {
    font-size: 15pt;
    font-color: #000000;
    color: blue !important;
}

As with normal cascading, the property 'font-color' will be replaced in the application of style B, and the actual value of the property is #000000.

The property 'font-size' has been marked as important in style A, and so will not be replaced in style B. The actual value of the property is 12pt.

The property color has been marked as important in both, and the last applied important style is considered. The actual value is blue.

The @import ruleEdit

Styles may also be imported from other style sheets using the @import rule. Each @import rule should precede all rule sets, and each should be placed in its own line. The media type may also be specified. An @import rule is defined by starting a line with "@import", followed by a url(<string containing an URI to the style sheet>) construct or just the URI, followed by optional media types to apply to the rules of the style sheet, followed by a semicolon (;). Example:

@import "basic.css";
@import url("justme.css") print, speech;

UsageEdit

CSS syntax may be placed in an (external) file, with the .css extension. A reference to the CSS file is then established. For example, in HTML, a reference to the file is made by using a link element. Example:

<link rel="stylesheet" type="text/css" href="styles/clstyles.css" />

CSS syntax may also be declared in the document itself, using the style element. Example:

<head>
    <style type="text/css">
    p:first-letter { font-size: 3em; }
    </style>
</head>

Styles applied to a single element may also be directly applied to an element by placing the declarations in a style attribute. Note that pseudo-elements, descendant selectors, etc. cannot be specified using this syntax. Example:

<div style="width: auto; font-family: fantasy">Lorem ipsum dolor sit amet</div>

External links Edit

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.