CSS stands for Cascading Style Sheets. CSS is used to describe how HTML elements are to be displayed on the screen or in other media. As the layout of multiple web pages can be controlled through CSS, it has the potential of reducing the amount of time involved in creating and maintaining a website, and enhancing the continuity of its look and feel.
Developed for the World Wide Web Consortium in 1996, CSS has become an integral part of web pages, along with HTML, JavaScript, and PHP.
Before the introduction and widespread acceptance of CSS, web designers and developers were using HTML for formatting purposes, and web sites were becoming unwieldy. CSS was designed to separate styling from structural markup, or presentation from content. Through CSS, presentation instructions are stored in a separate file, which could be included in the document through the use of a link tag, and the presentational HTML elements were replaced by CSS to provide for improved versatility and accessibility. CSS allows web designers to define or modify the look of a webpage by making changes in the stylesheet without manipulating the HTML code.
CSS can be incorporated in HTML through the use of inline styles, internal styles, external stylesheets, or by using the import command.
Inline styles are not often used because they complicate the code, placing it back into the HTML document. Internal styles are used when the designer wants to define the styling for the entire page. CSS is embedded into the HTML code using the style tag, generally placing it between the head tags.
The preferred practice for incorporating CSS into HTML code is through the use of external stylesheets, which is maintained as a standalone document. A code snippet is included in the head section of the HTML code to invoke the CSS stylesheet.
The import command might be used to supplement the external stylesheet when a new requirement comes up for, let's say, a font color to be changed to blue on one specific page, when it is defined as black in the main stylesheet. A new stylesheet can be created and given a unique name, then the change can be invoked using the import command. In that way, only the one page is affected, while all the others remain the same.
Most commonly, then, the external stylesheet is the preferred method of incorporated CSS into a web site, while the import command might be used if one particular page has need of a unique style.
Cascading Style Sheets are designed to separate presentation features, such as layout, colors, and fonts, from the HTML document. This can allow for better content accessibility, more flexibility, and improved control over the characteristics of the presentation, allowing multiple web pages to share the same format specifications through the relevant CSS in an external stylesheet. Separating the formatting from the content allows the designer to present the same markup page in different styles for different rendering methods, such as on-screen or in print, removing the need for a separate print version. There are also CSS rules for alternate formatting if the content is accessed through a tablet computer or mobile device.
CSS specifications are maintained by the World Wide Web Consortium, which maintains a free CSS validation service for CSS documents. Plain XML, XHTML, SVG, and XUL markup languages also support Cascading Style Sheets.
The focus of this category is on Cascading Style Sheets, more commonly known as CSS. Topics relating primarily to CSS are appropriate for this category.
Recommended Resources
Cascading Style Sheets (CSS) is a simple mechanism for adding style, such as fonts, colors, or spacing, to web documents. W3C offers a guide to learning and using CSS, including available CSS software, and news from the CSS working group, including standards, drafts, and stable drafts. Employees of W3C member organizations are invited to join the working group. Books and other references on the topic are recommended.
https://www.w3.org/Style/CSS/
The web design gallery showcases web designs from web designers and web design agencies from several parts of the world, with links to each of the represented sites, as examples of what can be accomplished through Cascading Style Sheets and XHTML. Another gallery highlights CSS designs, most of which are available for purchase, or for free. Adverting opportunities may also be available, and contact information is available.
https://www.cssheaven.com/
Created with beginners in mind, the site has three main sections, these being an introduction to Cascading Style Sheets, a complete CSS tutorial, and additional CSS resources, and individual chapters include the intro section, three chapters of tutorials, CSS and images, and example of CSS in use on webpages. The author also highlights his book on website building, which discusses the use of CSS. Blog posts are also featured.
https://www.csstutorial.net/
Intended as a demonstration of what can be accomplished through design based on Cascading Style Sheets. Several sample styles are featured and may be loaded onto the page for viewing. The example HTML file and CSS file may be downloaded. The example files are commented well enough that CSS novices can use them as starting points in their own designs. Designs may also be uploaded to the site under a Creative Commons license. Submission guidelines and requirements are featured.
http://www.csszengarden.com/
Written and maintained by Eric A. Meyer, the tutorials and demonstrations featured here will work in at least one freely available web browser, but are not guaranteed to work with all browsers. The works, images, and text featured in this guide are copyrighted to the author and may not be reused without permission, except when quoted in a review, although any general design technique, HTML markup, or CSS code found here may be used.
https://meyerweb.com/eric/css/edge/
Organized in such a way as to begin with basic theory, then moving on to progressively more advanced material, the tutorial may be viewed from start to finish for a complete learning experience, or readers may view the various chapters for help with a specific problem or situation. Besides Cascading Style Sheets, the guide includes help files for ASP.NET MVC, ASP.NET Webforms, C#, HTML5, jQuery, PHP5, and WPF, with information on linking CSS to HTML and a guide to CSS selectors.
https://css3-tutorial.net/
Online since 2004, CSSMania showcases sites built with the use of Cascading Style Sheets, XHTML, and HTML5 prioritizing responsive websites since 2012. Submissions of examples corresponding to the above criteria are welcomed. A guide to submissions is put forth. Published examples are sorted by company, freelance, technology, marketing, lifestyle, weblogs, and geographical region. An informational blog is included.
http://www.cssmania.com/
The free visual guide to CSS features the most valuable properties of Cascading Style Sheets, explaining them through illustrated and animated examples. Included are examples for including animations in CSS, backgrounds, box models, flex boxes, CSS grids, positioning, transitions, and typography, with instructions, examples, and visual guides. All references can be searched. A 44-page e-book on CSS is also available for downloading.
https://cssreference.io/
Available on SourceForge, as an executable file for Linux, Mac, and Windows, CSSTidy is an open-source CSS parser and optimizer that can be controlled by command line, and as a PHP script, each of which has nearly the same functionality. The advantages of optimization, a discussion of compression, and an introduction to the application are presented, along with its usage, development notes, version reports, and CSS examples. An XHTML cheat sheet is included.
http://csstidy.sourceforge.net/
Interactive CSS Tutorials / A Visual Guide
Offering an online interactive flex generator and shrinker tool, through which flex layouts may be created and their source code copied to a clipboard, the site also features other tutorials, CSS grid diagrams, box models, flex, CSS grids, and transforms. Visitors to the site are invited to subscribe to a newsletter in order to be notified of any updates to the site, useful look-up diagrams, and tutorials. Contacts are included on the site.
http://www.csstutorial.org/
Available in several languages, the site teaches the fundamentals of Cascading Style Sheets as used in website layouts. The author assumes some knowledge of what selectors, properties, and values are, as well as some familiarity with layout. The tutorial is designed to be experienced from start to finish, although a table of contents allows the reader to view and jump to any of its chapters, as well as an introduction to the site.
http://www.learnlayout.com/
Russ Weakley, of Max Design, offers a guide to learning Cascading Style Sheets, HTML, and responsive web design, including a collection of CSS layouts, several CSS resources and associated exercises for learning purposes, and Simplex, a ready-to-use component library that can be used to build complex websites and applications, and a series of recent presentations on accessibility, CSS, design systems, and other aspects of design and functionality.
http://css.maxdesign.com.au/
W3Schools offers learning, testing, and training of all matters relating to web coding and development, including an online certification program. Its CSS certification program documents a student's knowledge of CSS, and its tutorials include complete CSS references of all properties and selectors with syntax, examples, browser support, and other information. CSS exercises and quizzes are included, along with several other developer resources.
https://www.w3schools.com/Css/
