| HTML | | | | This box: view • talk • edit | Web style sheets are a form of separation of presentation and content for web design in which the markup (i.e., HTML or XHTML) of a webpage contains the page's semantic content and structure, but does not define its visual layout (style). Instead, the style is defined in an external stylesheet file using a language such as CSS or XSL. This design approach is identified as a "separation" because it largely supersedes the antecedent methodology in which a page's markup defined both style and structure. HTML, an initialism of HyperText Markup Language, is the predominant markup language for web pages. ...
HTML has been in use since 1991, but HTML 4. ...
Dynamic HTML or DHTML is a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (Cascading Style Sheets, CSS), and the Document Object...
In HTML and XHTML, a font face or font family is the typeface that is applied to some text. ...
An HTML editor is a software application for creating web pages. ...
In computing, an HTML element indicates structure in an HTML document and a way of hierarchically arranging content. ...
The W3C HTML standard includes support for client-side scripting. ...
This article or section is incomplete and may require expansion and/or cleanup. ...
This article or section is incomplete and may require expansion and/or cleanup. ...
Quirks mode refers to a technique used by some web browsers to maintain backwards compatibility with web pages designed for older browsers. ...
Web pages authored using hypertext markup language (HTML) may contain multilingual text represented with the Unicode universal character set. ...
WWWC redirects here. ...
The following tables compare general and technical information for a number of web browsers. ...
Web colors are colors used in designing web pages, and the methods for describing and specifying those colors. ...
The Extensible HyperText Markup Language, or XHTML, is a markup language that has the same depth of expression as HTML, but also conforms to XML syntax. ...
The following tables compare XHTML compatibility and support for a number of layout engines. ...
Separation of presentation and content (or separate content from presentation) is common idiom, a design philosophy, and a methodology applied in various technical contexts, including information retrieval, template processing, web design, web development, and model-driven development. ...
Web design is a process of conceptualization, planning, modeling, and execution of electronic media content delivery via Internet in the form of Markup language suitable for interpretation by Web browser and display as Graphical user interface (GUI). ...
Markup refers to the use of a markup language to describe the structure and appearance of a particular document. ...
HTML, an initialism of HyperText Markup Language, is the predominant markup language for web pages. ...
The Extensible HyperText Markup Language, or XHTML, is a markup language that has the same depth of expression as HTML, but also conforms to XML syntax. ...
A webpage or web page is a page of the World Wide Web, usually in HTML/XHTML format (the file extensions are typically htm or html) and with hypertext links to enable navigation from one page or section to another. ...
CSS redirects here. ...
The eXtensible Stylesheet Language (XSL) is a family of transformation languages which allows one to describe how files encoded in the XML standard are to be formatted or transformed. ...
The philosophy underlying this methodology is a specific case of separation of concerns. In computer science, separation of concerns (SoC) is the process of breaking a program into distinct features that overlap in functionality as little as possible. ...
Benefits
Separation of style and content has many benefits, but has only become practical in recent years due to improvements in popular web browsers' CSS implementations. An example of a Web browser (Mozilla Firefox) A web browser is a software application that enables a user to display and interact with text, images, videos, music and other information typically located on a Web page at a website on the World Wide Web or a local area network. ...
Speed Overall, users experience of a site utilising style sheets will generally be quicker than sites that don’t use the technology. ‘Overall’ as the first page will probably load more slowly – because the style sheet AND the content will need to be transferred. Subsequent pages will load faster because no style information will need to be downloaded – the CSS file will already be in the browsers cache.[citation needed]
Maintainability Holding all the presentation styles in one file significantly reduces maintenance time, and reduces opportunity for human errors by reducing the maintenance tasks.
To illustrate - imagine if you had just finished writing a client's site using embedded content and the client then tells you that the font color should be #3667CA, not the web safe color you have always used for their site. A site using embedded styles would require a large, cumbersome, time consuming and error prone edit of every page.
If you had created the site utilizing CSS technology, and had done it properly, then the only thing you would need to change would be six characters in the CSS file – to be pedantic, you’d only need to change the second, fourth and sixth character of the color code.
Other advantages include clearer (X)HTML pages for easier editing, and an easily achieved consistency of presentation.
Accessibility Sites that use CSS with either XHTML or HTML are easier to tweak so that they appear extremely similar in different browsers (Internet Explorer, Mozilla Firefox, Opera, Safari, etc.). Windows Internet Explorer (formerly Microsoft Internet Explorer abbreviated MSIE), commonly abbreviated to IE, is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems starting in 1995. ...
Firefox redirects here. ...
Opera is a web browser and Internet suite developed by the Norwegian Opera Software company. ...
Safari is a web browser developed by Apple Inc. ...
Sites using CSS "degrade gracefully" in browsers unable to display graphical content, such as Lynx, or those so very old that they cannot use CSS. Browsers ignore CSS that they do not understand, such as CSS 3 statements. This enables a wide variety of user agents to be able to access the content of a site even if they cannot render the stylesheet or are not designed with graphical capability in mind. For example, a browser using a refreshable braille display for output could disregard layout information entirely, and the user would still have access to all page content. Fault-tolerance orr graceful degradation is the property that enables a system (often computer-based) to continue operating properly in the event of the failure of (or one or more faults within) some of its components. ...
Lynx being used on Mac OS X Lynx is a text-only web browser for use on cursor-addressable, character cell terminals. ...
A user agent is the client application used with a particular network protocol; the phrase is most commonly used in reference to those which access the World Wide Web. ...
A refreshable Braille display is an electro-mechanical device for displaying Braille characters, usually by means of raising dots through holes in a flat surface. ...
Customization If a page's layout information is all stored externally, a user can decide to disable the layout information entirely, leaving the site's bare content still in a readable form. Site authors may also offer multiple stylesheets, which can be used to completely change the appearance of the site without altering any of its content.
Most modern web browsers also allow the user to define their own stylesheet, which can include rules that override the author's layout rules. This allows users, for example, to bold every hyperlink on every page they visit.
Consistency Because the semantic file contains only the meanings an author intends to convey, the styling of the various elements of the document's content is very consistent. For example, headings, emphasized text, lists and mathematical expressions all receive consistently applied style properties from the external stylesheet. Authors need not concern themselves with the style properties at the time of composition. These presentational details can be deferred until the moment of presentation.
Portability The deferment of presentational details until the time of presentation means that a document can be easily re-purposed for an entirely different presentation medium with merely the application of a new stylesheet already prepared for the new medium and consistent with elemental or structural vocabulary of the semantic document. A carefully authored document for a web page can easily be printed to a hard-bound volume complete with headers and footers, page numbers and a generated table of contents simply by applying a new stylesheet.
Practical disadvantages today Currently specifications (for example, XHTML, XSL, CSS) and software tools implementing these specification are only reaching the early stages of maturity. So there are some practical issues facing authors who seek to embrace this method of separating content and style.
Lack of semantic vocabulary HTML offers a rich, but limited vocabulary of semantic elements (for example paragraph, quote, emphasis). The migration of HTML to the extensible XHTML may eventually speed the proliferation of richer semantic vocabularies to apply generalized styles to. So, for example, extensions such as Ruby (annotation markup), MathML, Xforms, XFrames and so forth will bring new elements for use in content documents: elements that will likely have readily available stylesheets for presentation. However, today these missing components mean content authors must create their own ad hoc elements to express themselves. Ruby is a W3C recommendation markup for inline annotation of text, often to provide pronunciation hints or other annotation above or below the main text. ...
Mathematical Markup Language (MathML) is an application of XML for describing mathematical notations and capturing both its structure and content. ...
XForms is two things: 1. ...
XFrames is an XML application being developed by the W3C for combining multiple documents together. ...
Complex layouts One of the practical problems is the lack of proper support for style languages in major browsers. Typical web page layouts call for some tabular presentation of the major parts of the page such as menu navigation columns and header bars, navigation tabs, and so on. However, deficient support for CSS and XSL in major browsers forces authors to code these tables within their content rather than applying a tabular style to the content from the accompanying stylesheet.
Narrow adoption without the parsing and generation tools While the style specifications are quite mature and still maturing, the software tools have been slow to adapt. Most of the major web development tools still embrace a mixed presentation-content model. So authors and designers looking for GUI based tools for their work find it difficult to follow the semantic web method. In addition to GUI tools, shared repositories for generalized stylesheets would probably aid adoption of these methods.
See also In computer science, separation of concerns (SoC) is the process of breaking a program into distinct features that overlap in functionality as little as possible. ...
A Style sheet is a form of separation of presentation and content in desktop publishing programs that store and apply formatting to text. ...
External Resources - Simply JavaScript: The Three Layers of the Web
- CSS Zen Garden: A site which challenges designers to create new page layouts without touching the XHTML source. Includes dozens of layouts. CSS source can be viewed for every layout.
- Revealed - Our HTML and CSS Codes - cameraontheroad.com: Gives practical examples of CSS advantages from a site which has moved from embedded presentation styles to style sheets. Includes links to CSS resources.
|
Feeds |
Contact