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: