CSS selectors are used to "find" (or select) the HTML elements you want to style

The element selector selects HTML elements based on the element name.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color:

 p {
   text-align: center;
   color: red;
 }

Output

• The id selector uses the id attribute of an HTML element to select a specific element.
• The id of an element is unique within a page, so the id selector is used to select one unique element!
• To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example

The CSS rule below will be applied to the HTML element with id="para1":

 #para1 {
   text-align: center;
   color: red;
 }

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

OutPut

The class selector selects HTML elements with a specific class attribute

To select elements with a specific class, write a period (.) character, followed by the class name.

In this example all HTML elements with class="center" will be yellow and left-aligned:

 .center {
    text-align: left;
    color: yellow;
    }

You can also specify that only specific HTML elements should be affected by a class.

In this example only <p> elements with class="center" will be red and center-aligned:

 p.center {
   text-align: center;
   color: red;
   }

HTML elements can also refer to more than one class

In this example the <p> element will be styled according to class="center" and to class="large":

<p class="center large">This paragraph refers to two classes.</p>

• The universal selector (*) selects all HTML elements on the page.

The color CSS data type represents a color in the sRGB color space. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background.

A color can be defined in any of the following ways:

• Using a keyword (such as blue or transparent)
• HTML only recognizes the 16 basic color keywords found in CSS1, using a specific algorithm to convert unrecognized values (often to completely different colors). The other color keywords should only be used in CSS and SVG.
• Unlike HTML, CSS will completely ignore unknown keywords.
• The color keywords all represent plain, solid colors, without transparency.
• Using the RGB cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations)

• The RGB color model defines a given color according to its red, green, and blue components.
• An optional alpha component represents the color's transparency.
• Using the HSL cylindrical-coordinate system (via the hsl() and hsla() functional notations)
• The HSL color model defines a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.
• Many designers find HSL more intuitive than RGB, since it allows hue, saturation, and lightness to each be adjusted independently. HSL can also make it easier to create a set of matching colors (such as when you want multiple shades of a single hue).

Examples

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>

<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Output

The position property can help you manipulate the location of an element

There are six values for the position property:

• static: every element has a static position by default, so the element will stick to the normal page flow. So if there is a left/right/top/bottom/z-index set then there will be no effect on that element.
• relative: an element’s original position remains in the flow of the document, just like the static value. But now left/right/top/bottom/z-index will work. The positional properties “nudge” the element from the original position in that direction.
• absolute: the element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it.

• fixed: the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.
• sticky (experimental): the element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick.
• inherit: the position value doesn’t cascade, so this can be used to specifically force it to, and inherit the positioning value from its parent.

Example:-

 div.static {
   position: static;
   border: 3px solid #73AD21;
 }

Output

Example:-

 div.relative {
   position: relative;
   left: 30px;
   border: 3px solid #73AD21;
 }

Output

The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems.

Start with the font you want, and end with a generic family

The font names should be separated with comma.

Font-size, Font-style etc. can be used for styling your text element.

Examples:-

 .p1 {
   font-family: "Times New Roman", Times, serif;
 }

 .p2 {
   font-family: Arial, Helvetica, sans-serif;
 }

 .p3 {
   font-family: "Lucida Console", "Courier New", monospace;
 }

 <p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
 <p class="p2">This is a paragraph, shown in the Arial font.</p>
 <p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

Output

The text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified.

Example:-

 p.center {
   text-align: center;
   color: red;
   text-align: Center;
   }

The vertical-align property sets the vertical alignment of an element.

 p.center {
   text-align: center;
   color: red;
   text-align: Center;
   vertical-align : Middle;
   }