Defining CSS Selectors
Important Suggestions
When creating CSS selectors make sure that you choose relevant names and appropriately use id's and classes, if you need help with id's and classes and when to use them please refer toHTML Setup.
Lessons
Open up the HTML of the website and make sure that you have planned the layout out.
- Step 1 - Creating reference id's and classes within HTML
In the <div> tags that define your float based layout add a class or id accordingly. Within the class or id give it a relevant name. Do the same for text, images, or other visual media that you want to alter. Remember, just add id="NAME" or class="NAME" to anything that you want to alter.
- Step 2 - Calling the ids or classes from CSS
The reasoning behind giving tags there classes or ids is to be able to manipulate them from an external CSS document, its the only way for CSS to identify them beside their tag names (example: <p>,<h3>). Classes make an object unique from its regular tag. So if you wanted to change ,you could do so by calling p directly, but what if you have two p tags on a page and you wanted to change each of their colors? You would do so by giving each one a unique class, and then call that class in CSS.
- Step 3 - How CSS Selectors Work
The following model describes how the element and the class relate. After the identifier the styles are to be made only in curly brackets. Often times you will see the styles a line below the identifier, much like this website, if you check the source code (if you don't know how to view the source code clickhere and find the according Internet Browser), go to the head and click on main.css. When done, you will see a long list of identifiers and styles.
- Step 4 - Variations of selectors
Selectors are unique identifiers to the HTML. There are various types of selectors and alterations that can be made, such as Pseudo classes which change specified lines. Pseudo classes are most commonly used with links designating:
- Link:Unvisited Link a:link{...}
- Hover:Mouse over Link a:hover{...}
- Focus:A keystroke selects the link, such as tab a:focus{...}
- Visited:Visited Link a:visited{...}
- Active:Selected Link a:active{...}
To gain a better understanding of CSS inheritance take a look at thisCSS Priorities Diagram
In addition to link pseudo classes there are pseudo classes such as the first-letter class that are used like so, p:first-letter{...} there are others but generally are not used. - Conclusion
You Know...- how to create reference ids and classes within HTML
- how to call the ids or classes from an external CSS document
- how to choose an id or class at the right time
- how to create a universal selector
- how to CSS effects the appearance of a HTML page
- how to make a pseudo selector for links and text
Questions or Comments? Hit the "Questions/Help" tab
You need to log into your account to post comments!Sign In
