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 and play a signficant role within the world of website development. The standards and specifications for all three are maintained by the World Wide Web Consortium (W3C).

A brief history of CSS

In the early days of the web (late 1980s and early 1990s), websites were primarily plain text with minimal formatting options. The introduction of HTML allowed for basic formatting using tags like `<font>` and `<b>`.

In 1994, Håkon Wium Lie and Bert Bos, both working at CERN, introduced the concept of CSS in a paper titled "Cascading HTML style sheets: a proposal." They advocated for separating the content and structure of web documents from their visual presentation.

CSS Level 1 became a formal recommendation by the World Wide Web Consortium (W3C) in December 1996. It introduced basic styling properties like colors, fonts, margins, and positioning.

CSS Level 2 (1998-2007) expanded upon CSS1 by adding more advanced styling options, including improved positioning, borders, backgrounds, and support for media types. However, implementation of some CSS2 features varied across different browsers, leading to inconsistencies in rendering and how content was displayed.

The late 1990s and early 2000s were marked by the "Browser Wars," where Internet Explorer and Netscape Navigator competed for web dominance. This era saw inconsistent CSS support across browsers, leading to the need for complex workarounds to achieve consistent designs.

In 2003, the CSS Zen Garden project showcased the power of CSS by demonstrating how the same HTML content could be styled in numerous creative ways without altering the underlying structure. This project emphasized the importance of separating content and presentation.

CSS Level 3 (2001-2017) introduced a wide range of new features and modules, including rounded corners, gradients, animations, transitions, and flexible box layout. However, the modular nature of CSS3 led to gradual adoption, with different features becoming available at different times.

While there isn't a formal specification known as CSS4, the term has been used to refer to the ongoing development of CSS beyond the CSS3 modules. The W3C has moved towards modularization to allow for independent development and implementation of various CSS features.

CSS has been a fundamental technology in shaping the visual design of the web. Its evolution has contributed to the separation of concerns in web development, making it easier to create responsive, accessible, and visually appealing websites.

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:

web designer vs. web developer

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.

Types of CSS

Inline CSS

Inline CSS involves adding the CSS directly within the HTML elements using the `style` attribute. This approach is useful for applying unique styles to specific elements. However, it's generally not recommended for large-scale styling because it can lead to less maintainable code and reduced separation of concerns.

Example:

```html

<p style="color: blue; font-size: 16px;">This is a blue paragraph.</p>

```

Internal or embedded CSS

Internal or embedded CSS is placed within the `<style>` element within the `<head>` section of an HTML document. It applies styles to specific HTML elements on that page. While it offers more organization than inline CSS, it's still limited to the specific HTML file.

Example:

```html

<head>

<style>

p {

color: red;

font-size: 18px;

}

</style>

</head>

<body>

<p>This is a red paragraph.</p>

</body>

```

External CSS

External CSS involves creating a separate CSS file with all the styles and linking it to the HTML file using the `<link>` element in the `<head>` section. This approach promotes the separation of concerns and allows you to apply the same styles to multiple HTML files.

Example (style.css):

```css

/* style.css */

p {

color: green;

font-size: 20px;

}

```

```html

<head>

</head>

<body>

<p>This is a green paragraph.</p>

</body>

```

Each type of CSS has its own advantages and use cases. Inline CSS is suitable for quick and specific styling, internal CSS is useful for small-scale projects or specific pages, and external CSS is recommended for larger projects and maintaining consistent styles across multiple pages.

The advantages of CSS and why use it

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.

Learn more about how to make a website with Wix.