Modifying an HTML document with JavaScript (Part 1)

CSS syntax

CSS Syntax

CSS syntax consists of style rules that are interpreted by the browser (or any other rendering engine) and applied to the selected elements in the HTML document.

A style rule consist of three parts:

  • Selector − selects the tag or group of tags to be styled.
  • Property – the tag property targeted by the CSS rule.
  • Values – the values are assigned to the targeted properties.

The general CSS rule syntax is like:

Selector { Property : Values ; }

For example, lets say we want to style the border of every table in the document we create the CSS rules as follows:

table { border :5px solid #230387; }

From the example above:

  • table is the Selector because we are styling <table> element.
  • border is the Property because we are styling the border of the <table> element.
  • 5px solid #230387 are the values we are assigning to border of the <table>. Which means our table is going to have a solid border of width 5px and color #230387.

For now, the full example would be something like:

<!DOCTYPE html>
<html>
<head>

<style>
table { border :5px solid #230387; }
</style>

</head>

<body>

<table>
<thead>
<tr><th>Subject</th><th>Mark</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td>Maths</td><td>80%</td><td>A</td></tr>
<tr><td>Physics</td><td>75%</td><td>A</td></tr>
<tr><td>Chemistry</td><td>50%</td><td>C</td></tr>
</tbody>
</table>

</body>
</html>

Output

Css table intro

There are different types of CSS selectors as we shall see.

Tag type Selector

This type of selector selects an element based on it tag type. For example:

To change the color of all <h1> tags to red we use:

h1 {

   color: red ;

}

Universal Selector

This type of selector is used to style everything on the webpage. For example:

* {

   color: #230387;

}

Descendant Selector

This type of selector is used to style the selected descendants of the specified element. For example, the following rule will style the <span> element only if its inside the <ol> element:

ol span {

   color: #000000;

}

For example:

<!DOCTYPE html>
<html>
<head>

<style>

ul span {
	color: red;
	}
	
ol span { 
	color:blue;
	}
	
</style>

</head>

<body>

<ul><li>My <span>name</span> is...</li></ul>

<ol><li>My <span>name</span> is...</li></ol>

</body>
</html>

Output

Css style

Child Selector

Child selector picks the direct descendant of an element unlike the descendant selector which picks the whole generation of descendants of an element. To render blue a paragraph that is a direct descendant of <body>:

body > p {

   color: blue;

}

Class Selector

Selects all elements with the mentioned class as an attribute. For example, the following code sets a blue color to all elements that have class = "linked" attribute.


.linked {
	color: blue;
	}

Full example:

<!DOCTYPE html>
<html>
<head>

<style>

.linked {
	color: blue;
	}
	
.disabled { 
	color:gray;
	}
	
</style>

</head>

<body>

<ul>
<li class = "linked">My name is...</li>
<li class ="disabled">My name is...</li>
<li>My name is...</li>
</ul>

</body>
</html>

Css style output

Take note that the class selector starts with a dot.

The class selector can be made to be more specific. For example:

h1.centered {

   color: #000000;

}

The code above will select an <h1> element only if it has the class “centered”.

ID Selector

The ID selector sets style rules based on the id attribute of an element. For example, to set blue color to an element with id = "blue" we use the following:

#blue {

   color: blue;

}

We can make it a bit more specific. For example:

h1#blue {

   color: blue;

}

This now renders the content blue only for <h1> elements with id = "blue".

Attribute Selector

Applies styles to elements with selected attributes. For example, to render blue any <p> element that has attribute width = "50px":

p[width ="50px"] {
	color: blue;
	}

More ways you can use the attribute selector:

  • div[width] – Selects all <div> elements with a width attribute.
  • div[width=”50%”] – Selects all <div> elements whose width attribute is set to 50%.
  • div[width~=”px”] – Selects all <div> elements whose width attribute value contains “px”.
  • img[src|=”hom”] – Selects all <img> elements whose src attribute values are exactly “hom”, or begin with “hom-“.

Grouped Selectors

Applies the same rules to different selected elements:

h1, h2, h3 {

color: blue;

}