CSS is used to control the style of a web document in a simple and easy way.

CSS is the acronym for Cascading Style Sheet. It is used for describing the presentation of a document written in a markup language such as HTML or XML.

Prerequisites

  • CSS is a client-side markup language, which means it's executed in the user's web browser. That's why you don't need to install anything to start writing CSS - just Chrome, Firefox, Safari, or whatever you usually browse in.
  • I would recommend going to CodePen and creating new pens to practice with. There are other options as well, like JSFiddle.

Where to put code

  • Inline CSS by style attributes (ex. onload, onclick)
  • Inside <style> tag.
  • In external .js file. Include it using href attribute in <link> tag.

<p style="color:red">Inline Css</p>

<style type="text/css" rel="stylesheet">
    color:red;
</style>

<link type="text/css" rel="stylesheet" src="external-style.css">

Comments

  • A comment is a note written in the code source with the purpose of explaining the code.
  • A multi-line comment is written with a slash and asterisk /*, */, as start and finish tags with the comment in between.
  • Comments can also be used to prevent certain code from running, which is known as commenting out the code. This is useful for testing purposes.

/* This is a single-line comment */ p { color: red; } 

p { color: red; /* Set text color to red */ } 

/* This is
a multi-line
comment */ p { color: red; }

Why Use CSS

  • You can write CSS once and reuse the same sheet in multiple HTML pages.
  • Using CSS, you do not need to write HTML tag attributes every time.
  • You can make a global style change
  • CSS has a much wider array of attributes than HTML
  • Style sheets allow content to be optimized for more than one type of device.

<!DOCTYPE html>
<html>
<head>
	<title>Title</title>
	<style>
		body {
		  background-color: lightblue;
		}

		h1 {
		  color: white;
		  text-align: center;
		}

		p {
		  font-family: verdana;
		  font-size: 20px;
		}
	</style>
</head>	
<body>
	<h1>Header</h1>
	<p>Para</p>
</body>	
</html>