CSS Selectors

The ID Selectors

You can define style rules based on the id attribute of the elements. The ID Selectors denoted by # keyword

Example

#box

{

color: #000000;

}

Grouping Selectors

You can apply a style to many selectors by separate selectors with a comma.

 Example:

h1, h2, h3

{

color: red;

text-transform: lowercase;

font-size:15px;

}

*These properties will be applicable to h1, h2 and h3 element.

 The Attribute Selectors

You can also apply styles to HTML elements with particular attributes.

Example:

input[type=”text”]

{

color: red;

width:300px;

}

The advantage to this method is that the these properties will applied only to the text boxes and not to button or radio button. (Because if we will create a rule of input only then it will cover all elements starts with input tag).

 The Child Selectors

The Child Selectors are very similar to descendants but have different functionality.

Example:

<style>

body > p

{

font-size:18px;

}

</style>

This rule will render the entire paragraphs font in 18px if they are a direct child of the <body> element. Other paragraphs would not have any effect of this rule. 

The Universal Selectors

The Universal Selectors are used to cover all elements within a document so the same is also called as page properties

Example

<style>

* {

color: green;

}

</style>

The above property will apply on the content of every element in our document

One thought on “CSS Selectors

Leave a Reply

Your email address will not be published.

Enjoy the tutorial? Please spread the word :)

Follow by Email
Facebook
Facebook
Google+2k
Google+
http://hirdeshbhardwaj.com/2017/04/17/first-post-wordpress/
YouTube31
YouTube