Today we will be discussing selector tags. As the name implies it is used to selector specific areas of the web page for special treatment. We have addressed selectors in the first introduction post and they are h, p, img, ul, and li. The ones we will cover today class and ID selectors are much more powerful and can be used in conjunction and further modify the prior selectors.
There are differences between the class and ID selectors, but for the most part are subtle except for the fact that the class selector can be reused as many times as needed on a web page but the ID selector can only be used once per page. They both can impart the same appearance effects.
Before proceeding, I’ve made some changes to the example web page that we are using. I’ve moved the style and script from the web page to external files. This is in accordance with the cascading style sheet rules of external, internal and inline styling. As we know, inline takes precedence over internal and internal takes precedence over external styles. We are going to demonstrate that in this post. Similar to style sheets, scripting can be internal or external. And as with style sheets, the closet to the web page takes precedence. The external files are just simple text files, nothing fancy and no formatting.
The external style sheet is put in a separate directory called css and the script in a directory called js. We will talk more about the directory structure in future posts.
In this post I will be focusing on class and ID selectors as they apply to style sheets.
The class and ID selectors are combined with other selectors to provide additional styling as shown below.
<p>….</p> becomes <p class=”name1″>….</p>
<h1>….</h1> becomes <h1 id=”name2″>….</h1>
etc.
Once located in the web page, we now can add styling. For this I want to revisit the syntax, which is very important because if the syntax is incorrect the web page will not function properly. Below is that syntax. There are many formats that work, but this is the one most universally used by web designers.
selector here{
property1 here: value1 here;
property2 here: value2 here;
etc.
}
The class selector name is preceded by a period (.name1) and the ID selector by a pound sign (#name2).
Now, we’re ready to get to work. I’ve made following changes to the web page and you can see the results below.
The changes made are:
Second header – change font size, type,and color
Last paragraph – change font size, style, and color
List – change font size, font weight, and color
A couple of things to notice, first the cascading effect of the internal commands overriding those from the external sheet, and that only those tags selected with class or ID selectors are affected by the new styling.
Click here to see the original web page,
click here to view the modified web page,
click here to view the original web page code
click here to view the modified web page code
click here to view the external style sheet
click here for the external script file
What people are saying