Power in simplicity: CSS Tag Selectors by Y. Airapetian

Topic: CSS Tag Selectors

Author: Y. Airapetian

Estimated Read Time: 9 mins

Contents:

1. Introduction

2. CSS Tag Selectors

3. Practical Use Cases

4. Practice Makes Perfect

5. Preparation Steps

6. The Task

7. Troubleshooting steps

8. Summary

9. Useful Links

Introduction

As you might remember, HTML is a language for creating a layout for a web page. It marks the content on the page as, e.g. a heading or an image which we can view then with the help of broswer. But it's only a layout that doesn't look nice without styling. That's where CSS helps it out.

You probably know already that CSS is used as a styling technology in web dev. Usually, web devs lay out an HTML file, link the CSS file to it, and write the relevant styles in that CSS file.

What would then we do if we decided to apply some nice color to a heading or change the dimensions of an image?

We would need to reach it in our HTML document by referring to it in some way. For this task we use CSS selectors.

In this article we'll go over the simplest of CSS selectors, the tag (or element) selectors.

Note: If you feel confident in this topic and want to move on to the more advanced ones check out the post about class selectors, ID selectors, or responsive web design.

CSS Tag Selectors

The easiest way to target an HTML element is by using a tag selector (also known as an element selector and the type selector).

The tag selector does exactly how it is named: it selects a tag!.

Let's imagine the following piece of code:

<h1>I am a level 1 heading</h1>
<h2>I am also a heading, level 2</h2>
<p>And I'm just a paragraph of text</p>

Now, if we wanted to apply some styling to the above paragraph, for instance, change its color to green, in our styles.css file we would write the following:

p{
  color: green;
}

which would result in:

Figure 1.1: An example of a styled paragraph.

As simple as that!

Here's a tag selector breakdown:

Figure 1.2: A breakdown of a CSS tag selector.

So, back to our code:

p{
  color: green;
}

What does it mean? By this code, we say:

1. Find me all elements that are called <p></p>;
2. If found, apply to the element(s) a new property/update that property color with a value of green

Note 1: If no element is found, no styles will be applied.

Note 2: The element selector is general: if you target a <p> tag, the styles will be applied to ALL tags of this kind.

Let's continue our experiment and change the font of the paragraph:

p{
  color: green;
  font-family: cursive;

}

Figure 1.3: An example of a styled paragraph.

As you can see, now the paragraph font has changed to a cursive one.

Hope you get the point!

You can use the tag selector with any available tag in HTML.

Practical use cases

Where the use of the CSS tag selectors may be handy?

You may utilize them when:

1. You want to apply the same styles to the identical elements on a page.

Practical use case: For example, you have several <h4> headings on your page which may have the same font color of green. It applies if these headings share the same property value. If, however, you need to style some of the <h4> headings with a different color, e.g. blue, you will need to use another selector. Tag selectors are a good choice for general, overlapping styles, like fonts, sizes, or colors.

Figure 1.4: Styling two input tags with a tag selector.

2. You have just one tag of a certain type on a page.

Practical use case: For example, there are a lot <p>, <h4>, <span> or <a> tags on your webpage, but only one <footer> or <nav> tag (which is usually the case). You can then refer to these tags with the element selectors without worrying about styles interfering.

Figure 1.5: Styling an HTML tag.

3. For descending selectors.

We haven't covered that yet but you can target tags that are contained in other tags (parent-to-child relationship) with the help of a descending CSS selector like so:

//HTML file

<p>To find out more, visit the following
  <a href="#" target="_blank">link</a>
</p>

//CSS file

p a{
  color: pink;
}

Note: Descending CSS selectors will be covered in more depth in the upcoming posts.

4. For testing.

Practical use case: When starting a project, you may want to test if the styles apply to the document. You can do this by using some property: value pair with a tag of your choice.

Note: Testing is not a unique feature of the tag selectors, rather they are usually used since:

1. There's no need to change the markup in any way (for example, adding classes or IDs). You can use the element selector just as it is.
2. Writing a tag selector is quicker than adding a class or ID to the markup and then going to the CSS file. There's always some tag, like a <body> tag, when you use a ! + Tab shortcut.

Figure 1.6: Testing CSS styles.

Note 2: If you don't yet know what shortcuts are, we will cover them in the upcoming posts. But briefly speaking, they save time when coding by using keyboard key pairs. For a breif explanation, visit this link.

Figure 1.7: Using a code editor shortcut.

Practice Makes Perfect

Are you ready for a little practice? We're going to apply our knowledge of tag selectors in styling a simple web page.

Preparation Steps

So here's a task for you.

Click on the button below to visit Code Sandbox. It's a coding playground we will use to practice our web dev skills.

You will see 3 windows:

• Explorer

• index.html

• Preview

Figure 1.8: The CodeSandbox workspace.

If you're logged in, you probably already know what to do. But just in case, go to step 6.

If you're not logged in, you won't be able to edit the files. For this, you need to follow these steps:

1. Click on the Sign-in button. You can locate it to the top right of the screen.

Figure 1.12: The CodeSandbox workspace top navigation.

You will be offered a bunch of authorization methods. Click what best suits you but for the purposes of demonstration, we'll stick with the Google authorization method.

2. Click on Sign-in with Google button.

Figure 1.13: The CodeSandbox authorization window.

You'll see a field where you need to write your email address.

Note: Here and afterward the login details have been partially shadowed due to privacy reasons.

3. Fill in your email address.

Figure 1.14: The Google authorization screen.

If successful, you'll see a password input field.

4. Fill in your password details.

Figure 1.15: The Google authorization screen.

If you've done this step, you might be prompted to confirm the login with your smartphone.

5. Click to verify the authorization with your smartphone.

Figure 1.16: The Google authorization verification screen.

Then, click confirm on your smartphone. After, click continue or next in your browser if their's a respective pop-up window.

You should now be successfully authorized.

Note: Sometimes it gets buggy so you might have to refresh the CodeSandbox workspace.

Ready? Then make a copy of the code to your CodeSandbox account.

6. Click on the Fork button. You will find it at the top right of the screen.

Figure 1.18: The CodeSandbox workspace top navigation.

The code will be forked and you can start doing the task.

Note: Just as mentioned before, sometimes it gets buggy so you might need to reload the CodeSandbox workspace.

The Task

We are interested in the central window marked with a green rectangle in the image below.

Figure 1.16: The CodeSandbox workspace.

Here's a simple HTML page that was written for you to focus on the styling part.

Now it has a basic layout with a few tags and looks like this:

Figure 1.17: An unstyled HTML page.

Your task is to style these elements according to the guidelines so that it looked somewhat like this:

Figure 1.18: The final result of the practice.

Step 1: Click on the line called CSS in the Explorer section as in the image below:

Figure 1.19: The CSS section of the CodeSandbox workspace.

You will open the CSS file which contains now only one tag selector with one declaration.

h1 {
  text-decoration: underline;
}

Step 2: Style the <body> tag.

2.1: Set the font-family to Helvetica;

2.2: Set the font-size to 1.1em;

2.3: Set the background-image to:

https://s11.gifyu.com/images/S1GfZ.jpg

2.4: Set the text-align to center;

Step 3: Style the <h1> tag.

3.1: Remove the underline of the <h1> tag.

3.2: Give it a color of rgb(31, 36, 37);

3.3: Change the font-size to 24px

3.4: Center it on the page;

Step 4: Style the <h2> tag.

4.1: Change the font-size to 20px;

Step 5: Style the <ul> tag.

5.1: Set the type of the list-style-type to square;

5.2: Set the line-height to 1.4em;

5.3: Set the text-align to left;

Step 6: Style the <img/> tag.

6.1: Set the <img/> display property to block.

6.2: Set the <img/> margin to 0 auto.

6.3: Set the border-radius for the <img/> tag to 16px.

Hit Ctrl + S (Windows) or Command + S (Mac) after each step's point to see the results live on the right screen of the playground:

Figure 1.20: Saving a file in the CodeSandbox workspace.

Step 7: Check the result.

7.1: Does the web page look like it should? Are the font styles, alignments, and colors applied? If not, head over to the Troubleshooting section.

Note: If you don't know how to complete a certain step, use your Google search skills and research the topic. For example, you may not know what text-align: center does, so you might want to spend some time researching.

Note 2: You don't need to know all the properties and values at once. The task is to get the feel of the topic and practice troubleshooting. Much of the time, developers work on fixing problems by using their troubleshooting skills which may involve, as you might have guessed, googling!.

Note 3: Once again, don't worry about some properties for now, such as display and margin. We will cover them in depth in a future post.

Did you complete all the steps? Congrats! Now our web page is much more pleasing to the eyes!

Troubleshooting steps

If you've tried to complete a certain step or a part of a step, but with no success, here's the basic troubleshooting:

1. Ensure you've written the property right. A proper CSS property is named color, not colour.

2. Ensure you've written the value right. A proper value for a CSS font-size property could be 30px but not 30.

3. Ensure you've saved your work by hitting Crtl + S or Command + S.

4. Ensure you're working in the right file. It should be a file with a .css extension.

Summary

Today we've covered the basics of the tag (element) selectors. We've learned that developers use them to style HTML tags on an HTML page. We've also learned where the tag selectors are usually utilized, applied our knowledge to a practical task, and found out how to troubleshoot our code.

That's all on the basic tag selectors for today.

Till the next time!

Y.A.

Useful Links

What's Next

• ID Selectors

• Class Selectors

• Responsive Web Design

Practice Code

• CodeSandbox Practice Code