The CSS selector property value syntax is fundamental to learning and using CSS in web design.

Lets start with a basic html webpage that has ‘style’ tags in the head of the document and ‘script’ tags in the body of the document.

On line 4 is a ‘meta charset’ tag that specifies the character encoding for a HTML5 document.

First of all inside the ‘body’ tags on line 9 a ‘h1’ element with a Heading is added.

CSS Selector Property Value. Heading.
A ‘h1’ element with the text ‘Heading’ added between the opening <h1> tag and closing </h1> tag.

Black text on a white background can be a little dull at times. CSS styles can remedy this. Add CSS styles in-between the ‘style’ tags to change the appearance of a HTML5 document.

On line 7 the css style is added to the html5 document.

CSS Selector Property Value. A Heading with red text.
Above on line 7 the css style rule changes the colour of the ‘h1’ text.

The CSS syntax is as follows:

CSS Selector Property Value.

h1 { color: red; }

  1. ‘h1’ is the selector
  2. ‘color’ is the property
  3. ‘red’ is the value

In addition to changing the colour of the text CSS can also change the colour of the ‘background’.

On line 8 another CSS style rule is added to change the background colour.

CSS Selector Property Value.
On line 8 the CSS style rule changes the background of the body property to cyan.

body { background: cyan; }

  1. ‘body’ is the selector
  2. ‘background’ is the property
  3. ‘cyan’ is the value

And finally do not forget the semicolon at the end of a CSS Rule.


CSS3 logo. CSS Selector Property Value

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *