In this post I talked about creating a stylesheet. Now I will talk about the syntax and the selectors commonly used to do basic customisation of a webpage.
When choosing selectors, they are mostly corresponding with their html tags.
For example I will use the <h1></h1> tag. So the CSS selector you would use is h1.
In your style sheet it would look something like this:
h1 {properties in here}
Well that’s how it goes for all tags, until you get to tags with a “class” or “id”.
Id and Class Selectors
In your html coding, you may decide to use an id attribute or class attribute. The selectors for these will be different to selectors without a class or id attribute.
For a “class” selector, all you have to do is add a period (.) before your named “class”.
.exampleclass {properties in here}
You can be a bit more specific if you wish, and put the html selector before the period (.), like this:
div.exampleclass {properties in here}
For an “id” selector you just have to add a hash symbol (#) before your name “id”.
#exampleid {properties in here}
Selectors for elements with no class or id
You may want to keep your coding tidy and not use redundant “class” or “id” attributes. If so, you just have to be specific about your selectors.
Selectors can also work in kind of levels. I will make an example so it is easier to explain.
<ul> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> </ul>
Here I have a list. I wish to customise the <a> elements, but I don’t want to use a “class” attribute on every single <a> element.
So in my stylesheet I would use this selector instead:
ul li a {properties in here}
See? It saves wasting a “class” attribute when you can easily just rearrange your selector to make it work. (Though I do admit it may get confusing if you have too many 
)
