21 CSS Selectors – Direct Selectors

This allows for selecting all the html elements on a page.

Last updated on March 11th, 2018 at 01:14 pm

21 CSS Selectors – Direct Selectors


In this post let’s talk about direct selectors. These work by targeting a direct element in html, its identity or its class. We touched on these simple  selectors in the last post.

We will look at the following:

  • Element selectors / Tag selectors
  • Class Selectors
  • ID Selectors


Join the FULL HTML and CSS Tutorial Here >>


Element selectors / Tag selectors

You can select any HTML element and style it. Examples of tags/elements ,   <body>, <div>,<h1>, <h2>,<p>, <img>  etc .


For example, let’s say you have the following HTML:

<h1> Big Heading</h1>
<h2> The Sub-Heading</h2>
<p> I am a paragraph content</p>


Now let’s say you want to style the Headings (h1, h2) and paragraphs (p) to have different sizes and different colors, you would do it as follows:

/*Style the H1*/
h1 {
font-size: 40px;
color : black;
/*Style the H2*/
h2 {
font-size: 28px;
color : blue;
/*Style the p*/
h1 {
font-size: 16px;
color : red;




Class Selectors

When you give your html elements classes, you can use those classes as selectors to style them. The syntax is as follows ( a dot and the class name)


.className {/* CSS Styles */ }


Facts about classes in HTML:

  • The same class can be used on multiple html elements on the same page.
  • One element can have multiple classes. Separate them with a space . Example is below.
  • You can call your classes whatever you wish .


Sample HTML with classes :

<h1 class="mainheading"> Big Heading</h1>
<h2 class="subheading"> The Sub-Heading</h2>
<p class="hometext  textcontent  darktext"> I am a paragraph content</p>
<li class="listItem"> Web Design</li>
<li class="listItem  second"> UX </li>


The Class attribute is used to add a class name as shown above. The class names separated by a  space are different classes.  Eg  class=”listItem  second”  represent two classes affecting the same element.


You may write some CSS for the above classes  as follows :

/*Makes the heading  1 font larger and color black*/
.mainheading {
font-size: 40px;
color : black;
/*Changes font size and color  of h2 */
.subheading {
font-size: 28px;
color : blue;
/*Changes font size and color  of paragraph text*/
font-size: 16px;
color : red;
/*Removes the bulleting in lists*/
.listItem {
list-style: none;
/*Changes font color  of list with this class*/
.second {
color : blue;

ID Selectors

You can give your HTML elements IDs . You may then use the ID to style the element. The syntax for this is as follows

#idName { /*CSS styles*/}


Facts about IDs in HTML:

  • The ID should be unique in each page.
  • You can call your ID whatever you wish .


Some HTML with an ID :

This html plus the CSS that follows will lead to a simple Horizontal Menu .


The HTML :

<ul id="mainNav">
<li><a href="https://bizanosa.com">Home</a></li>
<li><a href="https://bizanosa.com/abc">Coupons</a></li>
<li><a href="https://bizanosa.com/sp">Skillshare</a></li>


The CSS:

#mainNav {
list-style-type: none;
margin: 2px;
padding: 2px;
background-color: #222;
li{display: inline;}
a{color: white;}


The Universal selector  (*)

This allows for selecting all the html elements on a page. On large web pages it is detrimental to performance.


Try it out, by putting the following CSS on any html page with some elements :

* {
border: 2px dotted black;
background: rgba(0,0,0,0.2)


It will select all elements and apply that css.



That’s it for this post, we’ll continue in the next post.


To learn HTML and CSS click the button below:


Join the FULL HTML and CSS Tutorial Here >>

Related Post

Comment Here