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 id or class attribute, and then style your code by referring to the id or class selector.

Naming your code using the id attribute

Use the 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.

Using the id attribute, the following code styles the Modern Seinfeld Twitter link the color red with a yellow background:

HTML:

<p><a href="http://twitter.com/SeinfeldToday" id="jerry">Modern Seinfeld</a></p>

CSS:

#jerry {

color: red;

background-color: yellow;

}

Naming your code using the class attribute

Use the 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.

With the class attribute, the following code styles all the Parody Tech Twitter account links the color red with no underline:

HTML:

<ul>

<li>

<a href="<u>http://twitter.com/BoredElonMusk</u>" class="tech">Bored Elon Musk</a>

</li>

<li>

<a href="<span style="text-decoration: underline;">http://twitter.com/VinodColeslaw</span>" class="tech">Vinod Coleslaw</a>

</li>

<li>

<a href="<span style="text-decoration: underline;">http://twitter.com/Horse_ebooks</span>" class="tech">Horse ebooks</a>

</li>

</ul>

CSS:

.tech {

color: red;

text-decoration: none;

}

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.