Lesson 4: CSS Selectors
Selectors determine which HTML tags will be affected by the commands contained in the selector. A selector can be the name of any HTML tag. Properties and their values are commands that tell selectors how HTML tags are to display stuff. For example:
That bit of CSS code told all p tags to display text that is 12 pixels in height (px stands for pixels). Selectors which take on the name of an HTML tag are called tag selectors or sometimes referred to as html selectors.
Another kind of selector is the class selector. With the class selector you can choose which tag will be affected by giving the tag selector a name, any name you like:
The p selector was given the name mytext with a dot between the selector and the name. Now only those p tags which contain the attribute class="mytext" will be affected by the code:
However by making class selector without specifying a tag, that class selector can then affect any kind of HTML tag:
Notice there is a dot preceding the name, now any HTML tag that contains the attribute class="mytext" will be affected by the code:
<h3 class="mytext">Text affected by code too! </h3>
Another type of selector that is similar to class selectors is an id selector. This type of selector has a number sign preceding the name given it instead of a dot:
The id attribute goes into an HTML tag like so:
You can make as many class and id selectors as you like, the difference between the two is that same class selector can be called upon through its attribute an unlimited amount of times on the same webpage, but each id selector should only be used once per webpage.
For example if you have a class called "mytext" and an id called "content", the "mytext" class attribute can be used in more than one HTML tag but the "content" id attribute is to be used only once per webpage.
Now that you know about selectors let's have a closer look at properties.
