Introduction to CSS & its Selectors

CSS

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.

Why use CSS:-

1.Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border and size had to be repeated on every web page. This was a very long process.For example: If you are developing a large website where fonts and color information are added on every single page, it will be become a long and expensive process.

2.Saves a lot of time

CSS style definitions are saved in external CSS files so it is possible to change the entire website by changing just one file.

3.Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of the website.

CSS Syntax

A CSS rule set contains a selector and a declaration block.

CSS syntax

Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc.

Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For the above example, there are two declarations:

  1. color: yellow;

  2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border etc.

Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color property.

  1. Selector{Property1: value1; Property2: value2; ..........;}

CSS Selectors

Selectors are a component of the CSS rule set. The content you want to style is chosen using CSS selectors. CSS selectors choose HTML components based on their id, class, type, attribute, and so forth.

Type of Selectors

There are few selectors which we use :-

1. Universal Selector(*)

To pick every element in an HTML document, we use the universal selector. It also includes other elements which are inside under another element.

*{
margin: 0;
padding: 0;
color: #CAD5E2;
}

2. Individual Selector

To pick an individual or group of individual elements in an HTML document, we use the Individual Selector.

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: #C7C11A;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p> i am betech student </p>

<p id="para1"> i love my country </p>

</body>
</html>

The individual Selector is used in the HTML code above along with the subsequent code.

p {
    background-color: #C7C11A;
}

3. Class Selector

HTML components having a specific class attribute are chosen using the class selector. It is used with a period character (.) and the class name after it.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Hello world!</h1>
<p> this apple is very big </p>

</body>
</html>

The Class Selector is used in the HTML code above along with the subsequent code.

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

4. ID Selector

It selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. It is denoted or started with a hash “ # “

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {  
    text-align: center;  
    color: blue;  
}  
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

<p id="para1">Augue mauris augue neque gravida in fermentum et sollicitudin. Lacus vestibulum sed arcu non odio. At augue eget arcu dictum varius. Amet porttitor eget dolor morbi non arcu risus.</p>

<p>Blandit cursus risus at ultrices. At consectetur lorem donec massa sapien faucibus et molestie ac. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Cursus turpis massa tincidunt dui ut ornare lectus.</p>

</body>
</html>

The ID Selector is used in the HTML code above along with the subsequent code.

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

5. Class Selector

It selects all the elements that have the given class attribute. It is denoted or started with a dot “ . “

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Hello world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>


</body>
</html>

The Class Selector is used in the HTML code above along with the subsequent code.

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

6. Chained Selector (And Selector)

It is a set of phrases and patterns that instruct the browser which HTML elements to pick in order to apply the CSS property values contained in the rule to them.

<!DOCTYPE html>
<html>
<head>
<style>

p.bg-black.text-white{
    background-color: #000;
    color: #ef9323;
} 

</style>
</head>
<body>

<h1>Hello world!</h1>

<p class="bg-black text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

<p id="para1">Augue mauris augue neque gravida in fermentum et sollicitudin. Lacus vestibulum sed arcu non odio. At augue eget arcu dictum varius. Amet porttitor eget dolor morbi non arcu risus.</p>

<p>Blandit cursus risus at ultrices. At consectetur lorem donec massa sapien faucibus et molestie ac. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Cursus turpis massa tincidunt dui ut ornare lectus.</p>

</body>
</html>

The Chained Selector is used in the HTML code above along with the subsequent code.

p.bg-black.text-white{
    background-color: #000;
    color: #ef9323;
}

7. Direct Child Selector

It picks out any HTML element that is the immediate child of any HTML element that is the target of the selector placed before the greater than character (>) and is targeted by the greater than character.

The Direct Child Selector is used in the HTML code above along with the subsequent code.

div > section > li {
    background-color: #7667e4;
}

8. Sibling Selector

The adjacent (immediately following) sibling selector is used to choose an element that exactly follows another particular element. The parent element of each child element must be the same.

The Adjacent Sibling Selector is used in the HTML code above along with the subsequent code.

div + p {
  background-color: #7667e4;
}

8.1 General Sibling Selector (~)

The adjacent (immediately following) sibling selector is used to choose an element that exactly follows another particular element. The parent element of each child element must be the same.

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: #7667e4;
}
</style>
</head>
<body>

<h2>Adjacent Sibling Selector</h2>

<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

</body>
</html>

The Adjacent Sibling Selector is used in the HTML code above along with the subsequent code.

div + p {
  background-color: #7667e4;
}

9. Pseudo-elements Selector

To style certain areas of an element, we use a CSS pseudo-element. it can be put to use for style the element's initial letter or line, Insert content before, or after, the content of an element

Syntax: The syntax is :

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

9.1 The ::before Pseudo-element

To place content before the content of an element, we use the before pseudo-element.

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(https://placeimg.com/30/30/any);
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

<h1>This is a heading</h1>

</body>
</html>

The before Pseudo-element Selector is used in the HTML code above along with the subsequent code.

h1::before {
  content: url(https://placeimg.com/30/30/any);
}

Output:

image.png

9.2 The ::after Pseudo-element

To place content after the content of an element, we use the after pseudo-element.

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: url(https://placeimg.com/40/40/any);
}
</style>
</head>
<body>

<h1>This is a heading </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h1>This is a heading </h1>

</body>
</html>

The after Pseudo-element Selector is used in the HTML code above along with the subsequent code.

h1::after {
  content: url(https://placeimg.com/40/40/any);
}

We have now finished talking about Selectors in CSS. If you have read this far, I sincerely appreciate it. Please share your thoughts.

Thank You...