CSS SELECTORS


Three Ways to Insert CSS

There are three ways of inserting a style sheet:

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

In line styles are defined with in the STYLE attribute of the relevant element. 

Example: 

<! DOCTYPE html> 

<html>
<head>
    <title>Inline css</title>
</head>
<body>

    <h1 style="background-color:red; color:white">This is a heading</h1>
    <p style="color:green">This is a paragraph.</p>

</body>
</html>

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section.

Internal style are defined within the <style> element inside the <head> section of an HTML Page.

Example:

<! DOCTYPE html> 

<html>
<head>
<style>
    body {
      background-color: red;
    }

    h1 {
      color: maroon;
      margin-left: 40px;
    }
</style>
</head>
<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

External styles are defined within the <link>element inside the <head> section of an HTML Page.

Example:

<! DOCTYPE html> 

<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks:

body {

  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:

  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section)
  3. Browser default

So, an inline style has the highest priority, and will override external and internal styles and browser defaults.

CSS SELECTORS 

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

using selector, we specify to which t=content style to be applied.

required for internal and external CSS

We can divide CSS selectors into five categories:

  • Simple selector 
  • Combinator selectors 
  • pseudo-class selectors 
  • pseudo-element selectors
  • Attribute selectors 
1. SIMPLE SELECTORS 

ELEMENT SELECTOR

The element selector selects HTML element 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;
}

ID SELECTOR

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="username"

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

NOTE: An Id Name cannot start with a number.

CLASS SELECTOR

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.

Example:

ALL HTML Elements with class="center" will be red and align center

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

UNIVERSAL SELECTOR

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

Example

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

GROUPING SELECTOR

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

h1, h2, p{
    text-align: center;
    color: red;
}

2.COMBINATOR SELECTOR

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)
PSEUDO ELEMENT

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

  • Style an element when a user mouses over it
  • Style visited and unvisited links differently.
  • Style an element when it gets focus.

Syntax

The syntax of pseudo-Element:

selector::pseudo-element{
    property:value;
}

Commonly used pseudo elements

  • ::first-letter
  • ::first-line
  • ::before 
  • ::after
  • ::selector

PSEUDO CLASS

selector:pseudo-class {
    property:value;
}

Commenly used pseudo-class

  • :hover
  • :link
  • :visited
  • :active
  • :target
  • :focus
  • :required
  • :optional
  • : default 
  • :read-only
  • :read-write
  • :valid
  • :invalid
  • :disabled
  • :empty
  • :not()
  • :first-child
  • :last-child
  • :checked
  • :in-range
  • :out-of-range
  • :nth-child()
  • :nth-last-child()
  • :enabled
  • :optional
  • :nth-last-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :first-of-type
  • :last-of-type

ATTRIBUTE SELECTOR

The attribue selector selects HTML element Elements with class="center", based on the attribute name 

[class]{
    text-align: center;
    color: red;
}