No problem! Let Class begin:
Cascading Style Sheets (CSS) is a
stylesheet language*1 used to describe the presentation of a document written in a
markup language*2.
Its most common application is to style web pages written in
HTML*3 and
XHTML*4, but the language can be applied to any kind of
XML*5 document.
CSS is used by both the authors and readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentational characteristics, and reduce complexity and repetition in the structural content. 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. Similarly, identical HTML or XML markup can be displayed in a variety of styles, 'brands', liveries or colour schemes by using different CSS.
CSS information can be provided by various sources:
A. Author styles (style information provided by the web page author), in the form of
1. external stylesheets, i.e. a separate CSS-file referenced from the document
2. embedded style, blocks of CSS information inside the HTML document itself
3. inline styles, inside the HTML document, style information on a single element, specified using the "style" attribute.
B. User style
1. a local CSS-file specified by the user using options in the web browser, and acting as an override, to be applied to all documents.
C. User agent style
1. the default style sheet applied by the user agent, e.g. the browser's default presentation of elements.
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.
Advantages of using CSS include:
> Presentation information for an entire website or collection of pages can be held in one place, and can be updated quickly and easily.
> Different users can have different style sheets: for example a large text alternative for visually-impaired users, or a layout optimised for small displays for mobile phones.
> The document code is reduced in size and complexity, since it does not need to contain any presentational markup.
CSS has a simple syntax, and uses a number of English keywords to specify the names of various style properties.
A style sheet consists of a list of rules. Each rule consists of one or more comma-separated selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in curly braces. Each declaration itself consists of a property, a colon (
then a value.
Example:
Code:
p {
font-family: "Garamond", serif;
}
h2 {
font-size: 110%;
color: red;
background: white;
}
.note {
color: red;
background: yellow;
font-weight: bold;
}
p.warning{
background: url(warning.png) no-repeat fixed top;
}
#paragraph1 {
margin: 0;
}
a:hover {
text-decoration: none;
}
#news p {
color: blue;
} These are seven rules, with selectors:
p, h2, .note, p.warning, #paragraph1, a:hover and #news p.
Property values are specified by, for example, color: red, where the property color is given the value red.
In the first two rules, the HTML elements p (paragraph) and h2 (level-two heading) are being assigned stylistic attributes. The paragraph element will be rendered in Garamond font or, if Garamond is unavailable, some other serif font. The level-two heading element will be rendered in red on a white background.
The third rule shown matches those elements that have a class attribute containing the token 'note'. For example:
Code:
<p class="note">This paragraph will be rendered in red and bold, with a yellow background.</p>
The fourth rule shown matches those p elements that have a class attribute containing the token 'warning'. This is in contrast to the third rule which matched all elements that are marked with a given class attribute. (The earlier rule .note could also have been written as *.note.)
In fact, .class selectors involve a special kind of attribute matching, as opposed to testing for equality. Since the HTML class attribute is defined as a whitespace-separated list of tokens, a class selector is evaluated against each of them separately. For example, <p class="note warning">, would apply both the note and the warning rule.
The fifth rule will match the one and only element in each HTML document whose id attribute is set to paragraph1: It will have no margin within its rendering 'box' as its margin width is set to zero.
The sixth rule defines the hover style for a elements. By default in most browsers, a elements are underlined. This rule will remove the underline when the user "hovers" the mouse cursor over these elements.
The last rule matches those p elements that are within an element whose id attribute has the value news; an example of a descendant selector.
In CSS, selectors are used to declare which elements a style applies to, a kind of match expression. Here are some examples of selector syntax:
All elements
that is, using the * selector
By element name
e.g. for all p or h2 elements
Descendants
e.g. for a elements that are descendants of li elements (e.g links inside lists) the selector is li a
class or id attributes
e.g. .class and/or #id for elements with class="class" or id="id"
Adjacent elements
e.g. for all p elements preceded by h2 elements, the selector would be h2 + p
Direct child element
e.g. for all span elements inside p, but no span elements deeper within the hierarchy, the selector would be p > span
By attribute
e.g. for all <input type="text"> the selector would be input[type="text"]
In addition to these, a set of pseudo-classes can be used to define further behavior. Probably the best-known of these is :hover, which applies a style only when the user 'points to' the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover. Other pseudo-classes and pseudo-elements are, for example, :first-line, :visited or :before. A special pseudo-class is :lang(c), where the style would be applied on an element only if it is in language "c".
To use a CSS stylesheet, save the CSS code in a file such as example.css and then either link to it or import it from HTML or XHTML web pages using one of the two following formats:
Code:
<link rel="stylesheet" href="example.css" type="text/css" />
Code:
<style type="text/css">
@import "example.css";
</style>
To learn and read more about CSS, click
HERE!
-----------------------------------------------------
*1 - A stylesheet language is a computer language used to describe the style of elements in a document marked up using a markup language. A modern one with widespread use is CSS (Cascading Style Sheets), which is used to style documents written in HTML, XHTML,
SVG*6, and XUL(pronouced 'zool', no need to worry what this one means, its not a standard language, and mostly only used by mozillia).
*2 - A markup language combines text and extra information about the text. The extra information, for example about the text's structure or presentation, is expressed using markup, which is intermingled with the primary text. The best-known markup language in modern use is HTML
*3 (HyperText Markup Language), one of the foundations of the World Wide Web. Historically, markup was (and is) used in the publishing industry in the communication of printed work between authors, editors, and printers.
*3 - HyperText Markup Language (HTML) is a markup language designed for the creation of web pages with hypertext and other information to be displayed in a web browser. HTML is used to structure information — denoting certain text as headings, paragraphs, lists and so on — and can be used to describe, to some degree, the appearance and semantics of a document.
*4 - The Extensible HyperText Markup Language, or XHTML, is a markup language that has the same expressive possibilities as HTML, but a stricter syntax. Whereas HTML is an application of SGML (Standard Generalized Markup Language), a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML. Because they need to be well-formed (syntactically correct), XHTML documents allow for automated processing to be performed using a standard XML library—unlike HTML, which requires a relatively complex, lenient, and generally custom parser (though an SGML parser library could possibly be used). XHTML can be thought of as the intersection of HTML and XML in many respects.
*5 - Extensible Markup Language (XML) is a W3C-recommended general-purpose markup language for creating special-purpose markup languages, capable of describing many different kinds of data. In other words XML is a way of describing data and an XML file can contain the data too, as in a database. It is a simplified subset of Standard Generalized Markup Language (SGML). Its primary purpose is to facilitate the sharing of data across different systems, particularly systems connected via the Internet. Languages based on XML (for example, Geography Markup Language (GML), RDF/XML, RSS, Atom, MathML, XHTML, SVG, and MusicXML) are defined in a formal way, allowing programs to modify and validate documents in these languages without prior knowledge of their form.
*6 - Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics, both static and animated, and either declarative or scripted. It is an open standard created by the World Wide Web Consortium.
Linear Mode
