jqjacobs.net/web
Cascading Style Sheets
This page, an introduction to Cascading Style Sheets (CSS), is intended to provide a basic understanding of CSS. The World Wide Web Consortium (W3C) developed the system known as Cascading Style Sheets (or simply Styles) to enhance the capabilities of HTML and provide page designers greater control over the appearance of Web pages. HTML 4.01 includes the stylesheet methodology as part of the specification. Styles are more efficient and versatile than HTML tags. CSS uses existing HTML tags and allows redefinition of existing tags. CSS also allows definition of custom style tags. CSS is a separate language with unique code and syntax. Many Web Authoring tools provide support for CSS style sheets. CSS Levels 1 and 2 have been officially recommended and work is underway on CSS2.1 and CSS3. Cascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in Dec. 1996. CSS2, released in 1998, builds on CSS1 and adds support for media-specific style sheets, downloadable fonts, element positioning and tables. CSS1 is almost completely supported by version 4 browsers, while CSS2 is supported by Netscape 6 and Explorer 5. CSS1 is presented in this page, because this version has the broadest support. Styles allow you to set the properties of a single tag, of specific tags throughout a page, or of an entire site. Without styles, occurrences of tags, such as paragraphs <P>, must be individually formatted, resulting in a great deal of replication of tags. For example, without styles, if a specific font attribute is specified, each paragraph tag might repeat that attribute. Styles allows the page designer to specify that paragraphs will be formatted in a specific way, headers another way, etc., eliminating the replication. Also, CSS allows applying numerous attributes to HTML tags that only have one attribute in HTML, greatly expanding HTML formatting. For example, the italic <i> element can have color, size, font face, and other attributes. It is easier to edit pages with styles because only one attribute (definition) change can change the entire page or an entire web site. You won't need to check if every instance of an element has in fact changed. Styles also allow you to exceed the limitations of previous tag attributes. Styles allow for indents and line spacing, among other formatting possibilities. CSS2 expands on CSS1, with extended font selection, text shadows, relative and absolute positioning, new box types, content overflow control, new pseudo-classes, system colors and fonts, and more.
CSS codes what the HTML will look like in the browser. To use styles you must learn the syntax, which is distinct from HTML, or use an HTML editor that supports styles. Cascading Style Sheets and Style rules are very easy to create. CSS rules consist of a selector and a declaration. The declaration consists of properties and the values assigned to the properties, with the following syntax.
The terms of the code are separated by a space. The first term is the selector. The properties and their values follow and are enclosed in curly brackets. A property is separated from its value with a colon, and properties of the same selector are separated with semicolons. When Styles are used as attributes of HTML elements the syntax is slightly different. Quotations are used instead of curly brackets, as seen in the following example.
Selectors can be HTML tags or CSS defined selectors, such as a 'class' or an 'ID.' CSS defined selectors can be applied to HTML tags or parts of an HTML document. They can be uniquely named by the code author. However, Java and JavaScript variable terms need to be avoided. CSS is not case-sensitive. However, with CSS it is necessary to be case-sensitive due to browser interpretation. Be certain not to confuse HTML elements and attributes when creating a CSS rule. The class selector is used to write rules, give the rule a name, and apply that name to any element in a page. Class selectors are used to create independent styles. Class selectors are preceded by using a flag character, a period (dot), indicating that it is a class selector. ID selectors utilize a pound sign as a flag character. ID selectors are used to designate an object for use with a JavaScript function, and are important in Dynamic HTML (DHTML). Unlike a class selector, an ID selector should only be used once in a page to designate a single element as an object. In the following CSS rule the selector is the HTML tag <H1>.
The following class selector defines three properties, font-family, font-size, and color.
The following CSS rule creates an ID selector.
Custom divisions can be declared with a class or ID selector in a style rule. The following style rule specifies a customized, block-level element with the class name "quote." The <div> element is then used in the body to apply the class, as seen in the second line of code.
Usage of the class attribute can be restricted to a single element type. To restrict use, the selector that is required for the style to be applied prefixes the class selector. In the following example the source class selector is restricted to usage within a paragraph element.
Context sensitive CSS allows control of styles of tags that are dependent on their parents' characteristics. When tags are nested inside other tags they are referred to as the parent (outer) and child (inner) tags. In an HTML file, for instance, the <head> and the <body> are child elements of the <html> parent element. CSS rules inherit from parent element to child elements unless the child is separately styled. For example, if the unordered list <ul> tag is styled in a specific font size, the list item <li> elements will inherit the style. CSS rules can create a rule for a tag that applies only if the tag is a child of another tag. These are also called descendant or contextual selectors. The first following example codes italic text red only if it is contained in a paragraph element. The second example codes italic text red within the list item element within the ordered list element.
In order to select portions of a document not signified with an HTML element, pseudo-classes and pseudo-elements are used. For example, to control the color of hyperlinks inline there is no HTML element to designate the links of the anchor <a> element. Pseudo-classes include unvisited links (:link), visited links (:visited), first letter (:first-letter), and first line (:first-line). Note that the pseudo-element selector is preceded by a colon flag. The following rule alters the size of the first letter of any paragraph.
The universal selector allows for specifying a default style for all elements. The symbol for the universal selector is an asterisk. The universal specification is always overridden by more specific rules. The universal selector can also be applied to all children of an element. The following two rules illustrate the override of the universal selector. In this scenario, the default color is black, and any list is dark grey.
To specify that two or more selectors can have the same definitions, place the selectors in a comma-separated list. The same selectors can also have their own unique definitions if defined individually. The following example illustrates this aspect of CSS syntax. All the tags will display in the same font face, while each will display in an individual font size.
To add comments within the <style> element or in a style sheet, begin with a slash and asterisk and end with an asterisk and a slash.
Styles can control the attributes of a single tag, or all the tags in a page or in multiple pages. When Styles are applied to a single tag or area of a single page, that is locally, they are termed inline styles. Styles applied to multiple pages are externally applied. Linked or external style sheets can be used for multiple pages. To apply styles externally, reference the external source(s) by adding a head tag as follows.
In this example, style.css is the name of the linked stylesheet. The stylesheet page contains all the styles applied to any linked documents. The stylesheet page must be an ASCII file with a .css extension and should be uploaded in ASCII mode. Browsers will download the referenced file just as they do image files referenced in a page. Since the styles are controlled from a single source page, editing the style sheet alters the formatting of every document referencing the style sheet. External style sheets are useful when you want several pages or an entire web site to have the same look, or when you want to be able to edit all the pages from a single style sheet. A basic CSS file's contents follows.
Internal styles are embedded in the <head> section of the HTML document using the <style> element. Style rules in the <head> of a particular page will affect all the affected tags in the page. The syntax requires a <style> tag and a closing </style> tag. The <style> tag should have a type attribute with the MIME type "text/css" attribute. HTML comment tags <!-- --> enclose the style rules to hide them from old browsers that fail to recognize the <style> tags. Here follows an example of embedded, internal style code.
Combining multiple style sheets, along with global rules, is possible using the @import keyword in the <style> element. The @import statement must precede all style rules. The @import keyword is followed by a URL, as shown in the following code.
Styles are applied locally by several methods. To set style properties for an individual HTML tag, use the style attribute in the tag. Local styles allow additional formatting that is not possible using existing HTML tags. The syntax is similar, as the following example illustrates. Within a tag the properties and their values are enclosed in quotations rather than curly brackets.
The span <span> and division <div> elements are used to apply a style to an inline portion or a block-level element of a page respectively. Class, ID, and style attributes can be used within the <span> and <div> containers. The <div> tag has the inherent property of a break above and below it. The <div> and </div> tags are generally used to apply a style to a block of a page that also includes other HTML elements. Like the <b> or <i> elements, the <span> element works inline, as seen in the following example: This text is rendered as red.
The name "Cascading" Style Sheets derives from the order in which the styles take effect. All three methods of applying styles, locally, internally and externally, can be used in one page. For the browser to determine which style to apply precedence order rules are required. By default the following precedence order is followed.
Basically, the last rule listed has precedence, and styles that are inherent to a tag or inherited from a parent tag are applied. There is a method of overriding the default order of precedence, but it is not universally supported. The syntax uses an exclamation flag character followed by the word important. The priority designation is enclosed with the definition before the semicolon in a style rule with a selector and curly brackets. In the following example the font size property is given priority. If this rule resides in an external style rule it would override an internal rule.
Length can be specified in CSS using either relative or absolute values. Relative values vary according to the computer displaying the page. Absolute values are constant across platforms. Although pixels are a relative size specification, they are recommended for font formatting because they are well supported by browsers and operating systems.
References and Links. Use the following links for further information.
Mike Brenner. Thanks for catching the typo. Years of students missed it! |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|||||
|
|
|
|
|
|
|