CSS — Part-1

CSS stands for Cascading Style Sheets

CSS Syntax

CSS Selectors

• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

Simple Selectors

The CSS element Selector

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

The CSS id Selector

// css
#para1 {
  text-align: center;
  color: red;
}
// html
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

The CSS class Selector

.center {
  text-align: center;
  color: red;
}
//html
<p class="center">Red and center-aligned paragraph.

More specific, elements with a class will be affected

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

The CSS Universal Selector

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

* {
  text-align: center…