Tips for Naming Your HTML Elements to Style Specific Elements with CSS
One way of styling specific elements in CSS is to name your HTML elements. You name your code by using either the
class attribute, and then style your code by referring to the
Naming your code using the id attribute
id attribute to style one specific element on your web page. The
id attribute can name any HTML element, and is always placed in the opening HTML tag. Additionally, each element can have only one
id attribute value, and the attribute value must appear only once within the HTML file. After you define the attribute in the HTML file, you refer to the HTML element in your CSS by writing a hashtag (
#) followed by the attribute value.
id attribute, the following code styles the Modern Seinfeld Twitter link the color red with a yellow background:
<p><a href="http://twitter.com/SeinfeldToday" id="jerry">Modern Seinfeld</a></p>
Naming your code using the class attribute
class attribute to style multiple elements on your web page. The
class attribute can name any HTML element and is always placed in the opening HTML tag. The attribute value need not be unique within the HTML file. After you define the attribute in the HTML file, you refer to the HTML element by writing a period (.) followed by the attribute value.
class attribute, the following code styles all the Parody Tech Twitter account links the color red with no underline:
<a href="http://twitter.com/BoredElonMusk" class="tech">Bored Elon Musk</a>
<a href="http://twitter.com/VinodColeslaw" class="tech">Vinod Coleslaw</a>
<a href="http://twitter.com/Horse_ebooks" class="tech">Horse ebooks</a>
Proactively use a search engine, such as Google, to search for additional CSS effects. For example, if you want to increase the spacing between each list item, open your browser and search for list item line spacing css. Links appearing in the top ten results should include:
- W3Schools: A beginner tutorial site
- Stack Overflow: A discussion board for experienced developers
- Mozilla: A reference guide initially created by the foundation that maintains the Firefox browser and now maintained by a community of developers
Each of these sites is a good place to start; be sure to look for answers that include example code.