CSS (Cascading Style Sheets)
What is CSS?
Cascading Style Sheets (CSS) is a programming design language that includes all relevant information relating to the display of a webpage. CSS defines the style and formatting of a website or page, including the layout, colors, fonts, padding (the space around each element) and more.
Together with HTML and Javascript, CSS makes up the foundation of how the internet works. The standards and specifications for all three are maintained by the World Wide Web Consortium (W3C).
How CSS and HTML work together
CSS pertains only to the design of the webpage, while the content of the page is defined using a markup language such as HTML. This separation of style and content has many advantages, among them are improved accessibility, and more control over web design.
CSS documents are used to define the style of a webpage, and are then linked to the HTML document (or a document in different markup language) which contains the content and structure of the page. Setting the style directly in the HTML document is possible, but not recommended.
CSS documents can be created in any text editor, like Text Editor in Mac or Notepad in Windows, as well as many other free or paid options that you can download.
You may also be interested in:
How does CSS work?
CSS contains rules and values that a web browser can then apply to the content of the webpage in order to correctly display its content. For example, you can use CSS to define that the body section of the page has a blue background, and that the text is displayed in white Helvetica font with a size of 18px. In contrast, website builders that use What You See is What You Get (WYSIWYG) software do not require the user to enter any description code - it's all built in to the platform.
CSS rules are read by a specific order of priority in a document (and hence the word “cascading” in Cascading Style Sheets). Usually, the rule that’s later in the CSS doc is the winner - unless the first rule is more specific. For example, you may have two rules in your CSS file that conflict - like setting the body font to blue and the paragraph font to green. In this case, the winning rule would be the paragraph font, because it’s more specific than body font.
The advantages of CSS
Faster loading time: The more code your site has, the heavier it is and the longer it takes to load. With CSS, you’re only writing the code once, instead of adding code in many places in your HTML - so your website is lighter and faster.
Easy to maintain and reuse: All your styling is in one place, so you can reuse it across many pages. If you decide to change anything later - like the font used across all paragraphs in your site - you can change this once in your CSS file and it would apply across all pages automatically.
More styling options: CSS gives you many advanced features, allowing control over more aspects of your website’s visual appearance than in markup languages.
Mobile optimization: With CSS, you can change the display of your website for different devices, such as phones and tablets. This same feature is also beneficial for your site’s accessibility, as it allows for more control over how screen readers interact with your site.
Future-proof your site: Many features in HTML are already deprecated, and it’s likely this trend will continue. If you use CSS for styling, you won’t be affected in case these features are one day removed from HTML.
Versions of CSS
There are different versions or levels of CSS, each one building upon the previous one. Here’s a breakdown of all the available versions of CSS:
CSS3 and CSS4 - These versions build on CSS2.1, adding new functionality and preserving backward compatibility. Some features are still experimental and may change in the future. Use these with caution, because it may cause issues with your site.
CSS2.1 (recommended) - This version fixed many bugs and issues in CSS2 and is now the official, recommended version of CSS.
CSS1 and CSS2 (obsolete) - These were the first two versions of CSS, and they are no longer being updated or maintained.