Open main menu
Home
Random
Recent changes
Special pages
Community portal
Preferences
About Wikipedia
Disclaimers
Incubator escapee wiki
Search
User menu
Talk
Dark mode
Contributions
Create account
Log in
Editing
Style sheet (web development)
(section)
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
==Benefits== Separation of style and content has advantages,<ref name="why-use-css-mdn">[https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Why_use_CSS Why use CSS? - Web developer guide | MDN]</ref><ref name="purely-branded">[http://purelybranded.com/notes/why-use-css-in-website-design/ Why Use CSS in Website Design]</ref> but has only become practical after improvements in popular [[web browser]]s' CSS implementations. ===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 browser’s [[cache (computing)|cache]]. ===Maintainability=== Holding all the presentation styles in one file can reduce the maintenance time and reduces the chance of error, thereby improving presentation consistency. For example, the font color associated with a type of text element may be specified — and therefore easily modified — throughout an entire website simply by changing one short string of characters in a single file. The alternative approach, using styles embedded in each individual page, would require a cumbersome, time consuming, and error-prone edit of every file. ===Accessibility=== Sites that use CSS with either XHTML or HTML are easier to tweak so that they appear similar in different browsers (Chrome, [[Internet Explorer]], [[Mozilla Firefox]], [[Opera (web browser)|Opera]], [[Safari (web browser)|Safari]], etc.). Sites using CSS "[[Fault-tolerant system|degrade gracefully]]" in browsers unable to display graphical content, such as [[Lynx (browser)|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 agent]]s to be able to access the content of a site even if they cannot render the style sheet or are not designed with graphical capability in mind. For example, a browser using a [[Refreshable Braille display|refreshable braille display]] for output could disregard layout information entirely, and the user would still have access to all page content. ===Customization=== {{See also|CSS#Sources}} If a page's layout information is 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 style sheets, 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 style sheet, 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. Browser extensions like [[Stylish (software)|Stylish]] and [[Stylus (browser extension)|Stylus]] have been created to facilitate management of such user style sheets. ===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 style sheet. 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 style sheet 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 style sheet.
Edit summary
(Briefly describe your changes)
By publishing changes, you agree to the
Terms of Use
, and you irrevocably agree to release your contribution under the
CC BY-SA 4.0 License
and the
GFDL
. You agree that a hyperlink or URL is sufficient attribution under the Creative Commons license.
Cancel
Editing help
(opens in new window)