21 CSS Selectors – Direct Selectors

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

Last updated on July 1st, 2018 at 11:55 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

 

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>


<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:

 

Join the FULL HTML and CSS Tutorial Here >>

Comment Here