CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a

document written in a markup language such as HTML.[1] CSS is a cornerstone technology of
the World Wide Web, alongside HTML and JavaScript.[2]
CSS is designed to enable the separation of presentation and content, including layout, colors,
and fonts.[3] This separation can improve content accessibility, provide more flexibility and
control in the specification of presentation characteristics, enable multiple web pages to share
formatting by specifying the relevant CSS in a separate .css file which reduces complexity and
repetition in the structural content as well as enabling the .css file to be cached to improve the
page load speed between the pages that share the file and its formatting.
Separation of formatting and content also makes it feasible to present the same markup page in
different styles for different rendering methods, such as on-screen, in print, by voice (via speech-
based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for
alternate formatting if the content is accessed on a mobile device.[4]
The name cascading comes from the specified priority scheme to determine which style rule
applies if more than one rule matches a particular element. This cascading priority scheme is
predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet
media type (MIME type)  text/css  is registered for use with CSS by RFC 2318 (March 1998).
The W3C operates a free CSS validation service for CSS documents.[5]
In addition to HTML, other markup languages support the use of CSS including XHTML, plain
XML, SVG, and XUL.

Some of the advantages of using CSS are:

 Easier to maintain and update.

 Greater consistency in design.

 More formatting options.

 Lightweight code.

 Faster download times.

 Search engine optimization benefits.

 Ease of presenting different styles to different viewers.

 Greater accessibility.
 Basic selectors
 Universal selector
 Selects all elements. Optionally, it may be restricted to a specific namespace or to all
namespaces.
Syntax: * ns|* *|*
Example: * will match all the elements of the document.
 Type selector
 Selects all elements that have the given node name.
Syntax: elementname
Example: input will match any <input> element.
 Class selector
 Selects all elements that have the given class attribute.
Syntax: .classname
Example: .index will match any element that has a class of "index".
 ID selector
 Selects an element based on the value of its id attribute. There should be only one
element with a given ID in a document.
Syntax: #idname
Example: #toc will match the element that has the ID "toc".
 Attribute selector
 Selects all elements that have the given attribute.
Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] 
[attr$=value] [attr*=value]
Example: [autoplay] will match all elements that have the autoplay attribute set (to any
value).

 Grouping selectors
 Selector list
 The , is a grouping method, it selects all the matching nodes.
Syntax: A, B
Example: div, span will match both <span> and <div> elements.
 Combinators
 Descendant combinator
 The   (space) combinator selects nodes that are descendants of the first element.
Syntax: A B
Example: div span will match all <span> elements that are inside a <div> element.
 Child combinator
 The > combinator selects nodes that are direct children of the first element.
Syntax: A > B
Example: ul > li will match all <li> elements that are nested directly inside
a <ul> element.
 General sibling combinator
 The ~ combinator selects siblings. This means that the second element follows the first
(though not necessarily immediately), and both share the same parent.
Syntax: A ~ B
Example: p ~ span will match all <span> elements that follow a <p>, immediately or not.
 Adjacent sibling combinator
 The + combinator selects adjacent siblings. This means that the second element directly
follows the first, and both share the same parent.
Syntax: A + B
Example: h2 + p will match all <p> elements that directly follow an <h2>.
 Column combinator 
 The || combinator selects nodes which belong to a column.
Syntax: A || B
Example: col || td will match all <td> elements that belong to the scope of the <col>.

 Pseudo
 Pseudo classes
 The : pseudo allow the selection of elements based on state information that is not
contained in the document tree.
Example: a:visited will match all <a> elements that have been visited by the user.
 Pseudo elements
 The :: pseudo represent entities that are not included in HTML.
Example: p::first-line will match the first line of all <p> elements.
  Specifications
Specification Status Comment
Added the || column combinator, grid structural selectors, logical com
Selectors Level 4 Working Draft resource state, linguistic and UI pseudo-classes, modifier for ASCII ca
attribute value selection.

Recommendatio Added the ~ general sibling combinator and tree-structural pseudo-cla

Selectors Level 3
n Made pseudo-elements use a :: double-colon prefix. Additional attrib

CSS Level 2 Recommendatio Added the > child and + adjacent sibling combinators.

(Revision 1) n Added the universal and attribute selectors.

CSS Level 1

Embedded CSS
With this method, you specify formatting rules for elements within a file and
they affect only that document.

EXAMPLE You might decide to specify that every paragraph in the

document should be 11 points. Therefore, in the XHTML document code,
you specify between the <head> tags that all paragraphs (<p> tags) should
be that size. As a result, every time a <p> tag is found in that document,
the text will be 11 points. In the behind-the-scenes XHTML code, it might
look like this:

This method is a bit more powerful than the inline method, but it still does
not allow you to control the look and feel of more than one document at a
time, therefore it also is not recommended.
If you want to use embedded CSS in Flare, you would need to open the
XHTML code (in the Internal Text Editor or in a third-party editor) and enter
the embedded CSS rules manually. See Internal Text Editor.

External CSS
With this method, you do not specify formatting rules anywhere within the
XHTML or HTML document. Instead, you specify the rules in a separate,
external file that has a .css extension (see Creating Stylesheets and Editing
Styles in a Regular Stylesheet). Then, in the XHTML document you provide
a link to that external stylesheet (see Associating Master Stylesheets With
All Files and Associating Stylesheets Locally With Specific Files).

EXAMPLE You might decide to specify that every paragraph in all of your

documents should be 11 points. Therefore, you create an external
stylesheet, name it something like styles.css, and specify within it that all
paragraphs (<p> tags) should be that size. This work can be done in
the Flare interface. If you look at the behind-the-scenes code in the CSS
file, it might look like this:

Then you associate the external stylesheet with all of the XHTML files that
you want to use that look and feel. Again, this can be done in
the Flare project at multiple levels (topic, target, and project). If you look in
the behind-the-scenes XHTML code of one of the document files, it might
look like this:
External stylesheets are recommended over the other methods. They make
it possible to truly separate the content from the presentation and allow you
to apply formatting to multiple places at once.