21 CSS Selectors – Direct Selectors

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

21 css selectors part two

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:

Comment Here

Need WordPress help? Linux Server help? Talk to us.

  • We are your own WordPress customer service.
  • We set up Linux servers and install or migrate WordPress. Learn more here.
  • We support WooCommerce too.
  • Check out our WordPress customer support plans here or contact us below .

If you have any questions regarding WordPress support, Linux server support or any of our services, feel free to reach out or read more on our services page.

Join this free course:

How to host multiple WordPress
websites on a VPS

Close me!