21 CSS Selectors – Direct Selectors

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

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="http://bizanosa.com">Home</a></li>
<li><a href="http://bizanosa.com/abc">Coupons</a></li>
<li><a href="http://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 >>
The following two tabs change content below.
Just a geek who loves Trance . Be yourself everywhere you go. And Be yourself in everything you do. Cheers !

Comment Here