The structure of a CSS file is simple and consists of two parts:

  1. The ruleset: A ruleset is a set of rules that define the styles for a specific element or group of elements. It consists of a selector and a declaration block. The selector specifies the element or group of elements to be styled, and the declaration block contains one or more declarations that define the styles for the selector. Each declaration consists of a property and a value, separated by a colon.
selector {
  property: value;
  property: value;
  ...
}

  1. The comment: A comment is a piece of text that is ignored by the browser and is used to add notes or explanations to the code. In CSS, a comment starts with /* and ends with */.
/* This is a comment */


/* This is a comment */

body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}

h1 {
font-size: 24px;
color: #f00;
}

p {
margin: 20px 0;
}

In this example, the first ruleset defines the styles for the body element, the second ruleset defines the styles for the h1 element, and the third ruleset defines the styles for the p element.

There are three types of CSS:

  1. Inline CSS: Inline CSS is defined within the HTML element, using the style attribute. It is used to style a specific element and has the highest priority.
<p style="font-family: Arial, sans-serif; font-size: 16px; color: #333;">This is a paragraph.</p>


  1. Internal CSS: Internal CSS is defined in a <style> element in the <head> section of an HTML document. It applies to the whole document, and it has higher precedence than inline CSS.
<head>
<style>
p {
color: blue;
font-size: 14px;
}
</style>
</head>

External CSS: External CSS is defined in a separate file with the .css extension, and it is linked to the HTML document using the <link> element in the <head> section. It applies to the whole document, and it has the highest precedence among the three types of CSS.

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

/* style.css */
p {
color: blue;
font-size: 14px;
}