CSS Selectors

introduction

• Introduction to CSS
• How and where to write CSS?
• CSS Selectors
• Size and Other Units of Measurement
• CSS colors
• Other uses of colour

Formatting Text

• CSS Fonts
• Text formatting

Box Model

• Borders
• Margins
• Paddings
• Height and width
• The box model
• Outline

Advanced selectors

• Combinators
• Pseudo–classes
• Pseudo Elements

More about CSS

• Linking style sheets to a page
• Applying CSS
• CSS comments
• Background
• Overflow
• Float
• Opacity

CSS selectors are used to find and apply styles (if any) to HTML elements by name, id, class, attribute or more.

Universal selector

Universal selector denote with * . when we write styles by using universal selector, those styles will apply to every element in the HTML.

For example,

*{
   color: #000000;
   text-align: center;
}

Element Selector

The element selector selects HTML elements which we want to apply styles. We can select all “h1” elements at a time by selecting h1 as selector.

For example,

h1{
   color: blue;
   text-align:center;
}

The descendant Selector

If you want to apply style to a particular HTML element that is inside another HTML element, we can take it as a descendant selector. In the below example “a” element lies inside the “p” element.

p a{
   text-decoration:none;
   color: green;
}

The ID Selector

The ID selector is to select particular element in HTML. ID should be unique within a page. When we are using id we must use “#” symbol before the id name. 

For example:

<p id="p1">Hello everyone</p>
<p> Hello good morning!</p>

CSS: 

#p1{
  color: green;
}

Class Selector

We can select more than one HTML elements at time by using class selector. In css we use “.” symbol before the class name.

For example:

<p class=”p1”>Good Morning</p>
<p>Hello everyone</p>
<h4 class=”p1”>Good Evening</h4>

CSS:

.p1{
	color: red;
}

Grouping Selector

 If you have same styles to different HTML elements then we can group those elements by separating them with comma symbol (,).

For example:

h1, h3{
  color: green;
  background-color: yellow;
}

Note: It will be good to group elements for same styles to minimize the code.