CSS

CSS Selectors 101

This time I want to give a glimpse of CSS (Cascading Style Sheets). Before I jump into CSS, it's better to know what comprises a web page. Basically, any moderate web page is composed of three technologies:

HTML – Content
JavaScript – Behavior
CSS – Presentation

CSS is simply a presentation technology used in web pages to give a really cool look and feel to the HTML elements (content).

CSS is simply a set of rules which will be combined with an HTML page to govern their appearance.

CSS can be written three different ways:

Inline styles – inlined inside a tag with the style attribute. Example:

<div style="color: red;">This is a red text.</div>

This limits to a specific element.

Embedded styles – the styles are written inside an HTML page using the <style> tag. This limits to a specific page.
External styles – the styles are written in a separate file and linked to HTML using the <link> tag in the <head> tag. This is the most preferred way of writing styles.

Following is a sample CSS rule:

body {
    background-color: yellow;
    border: 1px solid black;
}

The above style, when applied to an HTML page, gives its body a yellow background with a solid border.

Every CSS rule comprises two things:

Selector
Declaration

In the above style, body is the selector and the inner statements are called declarations. The selector basically selects a group of HTML elements and declarations are the actual rules that are applied to the selected elements.

So the heart of CSS is its selectors. There are various ways in which we can select HTML elements:

1. Normal Selectors

This is the simplest CSS selector:

p {
    color: blue;
}

2. Selector Groupings

In this selector, we specify more than one element, each separated by a comma, to which the declared styles need to be applied:

h1, h2, h3 {
    color: green;
}

3.a. Descendant Selectors

Descendant selectors are declared similar to selector groupings but separated by a space. This means the declared styles apply to element a only when the a tag appears inside (any child of child…) the h1 tag:

h1 a {
    color: red;
}

3.b. Child Selector

Same as descendant selectors but a should be the child of h1 (this is not the case with descendant selectors):

h1 > a {
    color: red;
}

4.a. Adjacent Selector

Here, the a tag should be the adjacent sibling of the h1 tag:

h1 + a {
    color: red;
}

4.b. General Adjacent Selector

Here, the a tag should be the sibling (need not be adjacent) of the h1 tag:

h1 ~ a {
    color: red;
}

5. ID Selector

This selector selects elements whose id is myaddress:

#myaddress {
    color: red;
}

6. Class Selector

This selector selects elements whose class is myaddress:

.myaddress {
    color: red;
}

7. Attribute Selector

Attribute selectors simply select an element based on their attributes:

a[href] {
    color: red;
}

input[type="submit"] {
    background-color: green;
}

[class~="abc"] {
    color: blue;
}

[hreflang|="en"] {
    color: orange;
}

a[href^="http://"] {
    color: purple;
}

a[href$=".pdf"] {
    color: brown;
}

a[href*=".co.in"] {
    color: pink;
}

9. Pseudo-Class Selector

These selectors are applied only to some set of HTML tags. They are dependent on the behavior of the element. In the example below, when an a tag is visited (clicked), its color will be changed to red. There are some predefined pseudo-classes:

a:link {
    color: blue;
}

a:visited {
    color: red;
}

a:focus {
    color: green;
}

a:hover {
    color: orange;
}

a:active {
    color: purple;
}

9. Pseudo-Element Selector

These selectors are applied to decorate a specified tag. In the example below, a p tag will have its first letter background in blue color. There are some predefined pseudo-elements:

p::first-letter {
    background-color: blue;
}

p::first-line {
    color: red;
}

p::before {
    content: "Prefix - ";
}

p::after {
    content: " - Suffix";
}

10. Universal Selector

This selector applies to all the elements in the document:

* {
    color: black;
}

This is a brief roundup of CSS selectors.

References:

SELF LEARN

LINE FEED AND CARRIAGE RETURN

CSS