21 CSS Selectors – Direct Selectors

Last updated on October 31st, 2020 at 07:51 am.

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

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>


<ul>

<li class="listItem"> Web Design</li>

<li class="listItem  second"> UX </li>

</ul>

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*/

.textcontent{

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>

</ul>

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:

Recommended VPS Providers

Find out the VPS providers I recommend.

Sign up below to download a Free Getresponse PDF Tutorial.

Cheapest dedicated Server provider. View prices.
The most reliable VPS cloud provider - Vultr Cloud

Comment Here