freeCodeCamp/guide/english/css/index.md

3.8 KiB

title
Cascading Style Sheets (CSS)

CSS Logo

Cascading Style Sheets (CSS)

CSS stands for Cascading Style Sheets. It is a language used for describing the style of a document written in HTML. It was designed to enable the separation of presentation and content, which greatly improved content accessibility and gave more flexibility and control in the specification of presentation, and reduced complexity and repetition in the structural content. It was first invented in 1996, and is now a standard feature of all major web browsers. The newest version of CSS is CSS3, which builds upon CSS2.1 and adds more visual functionalities, ready for the modern world.

We can describe CSS in three ways:

  1. Internal CSS
  2. External CSS
  3. Inline CSS

External CSS files save with extension of .css.

CSS specifications are maintained by the World Wide Web Consortium (W3C).

You can build some pretty amazing things in CSS alone, such as this pure-CSS Minesweeper game (which uses no JavaScript). Minesweeper clone in CSS

Syntax

body { background-color: yellow; } this is the Syntax of a CSS property.
In here, body is the selector and says what HTML element we want to style. background-color is the property we want to style.
and yellow is the style we want to give it.

Sample Code:

<!DOCTYPE html>
<html>
  <head>
	  <style>
  		body { background-color: Yellow; }
      p { font-size: 18px; } 
	  </style>
  </head>
  
  <body>
	  <p>Welcome to the world of CSS</p>
  </body>
</html>

We use the <style> and </style> tags to define the CSS in the HTML file.

Frameworks exist to make the more complex parts of css easier and more efficient for developers to build out websites. They also allow the developer to have more flexibility as well as additional features to produce amazing results. Some of the most popular CSS Frameworks are:

Suggested Reading: