CSS Lesson 2: Selector

0
7

CSS Selector

In this lesson you’ll learn the most important part of CSS. CSS selectors will allow you to define the HTML Elements which you want to style. Selectors are easy to understand. Here we’ll give you a solid understanding of CSS selectors by using different examples.

Elements – Selector

Define the HTML Elements with CSS selector. In fact this is way to target the HTML Element. However, it is quite easy because you only have to write Element name and them write you CSS code. Here is a example how to to style the h1 element in CSS.

It means the Heading 1 will be 24 pt and its color is black.

Group – Selector

If you have Selectors which possess the same styles, you can put them together as a group. Basically, this is a shortcut and it saves your time and effort on writing the same code for multiple different selectors. It is not very complicated though, you only have to write comma (,) after each selector. Let’s checkout in example and you will get better understanding.

Normal Group

Note: it is highly recommended to Group only those Selectors which will be used as a standard for the whole section or webpage. So be careful in defining selectors as a group. Sometimes it can create a mess for you!

Id and class Selector

Id and class selectors are two of the most important and widely used in CSS. Normally, you have bunch of elements, attributes and tags in HTML. Each of them requires different styling depending upon the Website Layout requirement. Id and Class will help you to find the target element, attribute and tags in HTML.

id selector

id selector starts with “#” in CSS. Suppose you have use id=”title” for <h1> tag in HTML.

class selector

Class selector starts with “.” in CSS. Suppose you have use class=”subheading” for <h2> tag in HTML.

Difference between id and class

Both id and class are used for the same purpose. However, there is a slight difference between them:

ID Id is unique. You can’t use the same id name for another element in HTML. Therefore, it should be used for the larger sections, such as navigation bar, content or footer.
Class Class names are not unique. You can use the same class name for multiple Elements of HTML. Therefore, you should use it for smaller sections, like paragraphs and headings.

List of CSS Selectors

For now you have learned the basic understanding of a few CSS Selectors, but these aren’t all of them! There are plenty more. Here is the complete List of CSS Selectors

Summary

  • Selectors are used to style the HTML Elements in CSS
  • You can define a selector as alone or in a group.
  • Use “#” to define Id selector.
  • Use “.” to define class selector.

Next Lesson

You may be wondering where and how to put in the CSS Sheets into an HTML document, right? In the Next lesson you will learn how to Insert a Style Sheet. See you in next lesson!

Leave a Reply