Coding All-in-One For Dummies
Book image
Explore Book Buy On Amazon
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.

About This Article

This article is from the book:

About the book author:

This All-in-One includes work by expert coders and coding educators, including Chris Minnick and Eva Holland coauthors of Coding with JavaScript For Dummies; Nikhil Abraham, author of Coding For Dummies and Getting a Coding Job For Dummies; John Paul Mueller and Luca Massaron, coauthors of Python for Data Science For Dummies and Machine Learning For Dummies; and Barry Burd, author of Flutter For Dummies.

This article can be found in the category: