learning basics of web designing

CSS in action

Hello friends, in the last lesson we learn basic of CSS, now let take it to next level. In this lesson, I will explain how to style HTML. So let’s get started.

CSS Selectors

Selectors help us to style HTML elements easily. Or in other words, selectors are the identity of the HTML elements. We do not need selector in inline style but for other method selectors are compulsory. For example, in the last lesson, we add style in external CSS like below.

h1{
color: red;
background-color:black;
}

In this case, h1 is the selector and { } is an area within we define its style. Here selector (h1) tells the browser to apply the related style to the h1 element. So in short, selectors are the keywords that target the HTML element that we are going to style.

Type of Selectors

There is a lot type of selectors, but we only discuss the most using selectors here. Other selectors are used in some special case. Here we only learn about the general selectors. So let’s get started.

Element

An HTML tag is an element. Simple use tag as the selector.

h2{
color: green;
}

Element element

Suppose you want to color link to green which comes inside the p tag, but not wants to apply style for other links. Then CSS rule will be as below.

p a{
color: green;
}

Element, Element

Suppose you want to apply the same style to more than one element. Then CSS rule will be like.

h1, h2, h3, h4, h5, h6{
color:red;
}

This makes all headings in red color.

.class

The class is an attribute of an HTML element also work as a selector. We can add as many classes we need. Using class is best practice in action. Just add . before the class name. Just look it in action.

<h1 class="green text-center">This is a Heading.</h1>

Here we add two class green and text-center which you can define as follow.

.green{ color:green;}
.text-center{ text-align:center; }

Now the above element has the style of each class, means h1 will be green in color and center aligned.

If style is defined by element and also defined by its class, then class style will applied.

#id

The id attribute plays a role in JavaScript more than CSS. We can also use it for the style. You can use only 1 id in an HTML element. Two same id value is not allowed on the same page. For id add # before id value.

<h1 class="green text-center" id="highlighted">I am a Heading</h1>

Its CSS will be

#highlighted{ background-color: #ccc; }

*

Means style is applied to all elements.

*{ display:block; }

It makes all tag display in the block, means cover the full width of the parent tag.

These are basic in CSS. There are a lot of ways to add CSS. You can find them here. Here we only learn the basics one.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Share the Article

About author
Darshan Saroya

Darshan Saroya

A passionate WordPress Theme Developer. Can build a custom theme for your business.  I love to create clean and modern themes, using the power of WordPress. Here I provide the tutorials related to WordPress Development, Core PHP and HTML.

Free Bootstrap 4 Theme

Mega UI Advanced Material Design Blogging WordPress Theme

Black Friday Deals

Black Friday Deals

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

CSS in action

Time to read: 2 min
0