CSS Syntax Method

The three components of CSS syntax are selector, property, and value.
It’s not too difficult to understand, once we go through some explanation, practice, and exercises.

Let’s look into an example of CSS styling an HTML element, in this case, an HTML element <span>.

CSS Syntax (Minify format):

span { color: red }

The first part ‘span’ of the above example represents the selector, the second part ‘color’ is the property, and the last part ‘red’ is the value of the ‘color’ property.

This is what the (Minify format) syntax rules look like.

selector { property: value }

Let’s look at another example HTML element <h2>.

CSS Syntax normal format:

h2 { 
	font-size: 15px 
}

You might have seen this format a lot. Syntax rules for the above example may look like this.

selector { 
	property: value 
}

The selector in syntax targets/points to an HTML element, e.g. in the above examples the first target ‘span’ and the second syntax target ‘h2’ elements.

The declaration part property and value of syntax go inside curly brackets.

Tips:

Syntax minify format is good for production mod & normal format is good for maintenance mod.

At this point, it is best to look at a practical example.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        font-size: 15px
      }
      span { color: red }			
    </style>
  </head>
  <body>
    <h2>Change the font size of the HTML element in the style declared above in the head section.</h2>
    <p>Styling span element color red, using the <span>span tag</span> declared in the head section.</p>
  </body>
</html>

Example Output

Try Online

Hints:

Syntax minify format reduces the CSS file size, hence helping reduce page loading time.

Multiple selectors can be grouped together separated by comma (,), if they share the same style.

h1, h2 { text-decoration: underline }

Similarly, in the declaration section, multiple properties and values can be grouped together, and each set of instructions is separated by a semicolon (;).

div { width: 100%; display: block; border: 1px solid blue }

Let’s use the above methods as an example.

<!DOCTYPE html>
<html>
	<head>
		<style>
			h1, h2 {text-decoration: underline}
			div{ width: 100%; display: block; border: 1px solid blue }			
		</style>
	</head>
	<body>
		<h1>Heading h1 of the HTML document</h1>
		<p>Heading h1 and h2 styled in the head section grouped together sharing the same style.</p>
		<h2>An h2 element using style declared in the head section.</h2>
		<div>The style for this element is changed to 100% width, block display, and blue border.</div>
	</body>
</html>

Example Output