CSS in web development

CSS stands for Cascading Style Sheets. It is used to beautify web page or making the web page more attractive.

Types of CSS:

INLINE: Inline css is the style given to a web page in an element itself by using style attribute.

<p style="color:#a52a2a">Lorem ipsum dolor sit amet.</p>

INTERNAL: Internal css is given by using style (<style></style>) tag. This style tag always written in head tag.

<head>
<style>
        .block{
            display: inline;
        }
        .inline{
            display: block;
        }
        .span{
            display: inline-block;
            height: 100px;
            width: 100px;
            color: blue;
            text-align: center;
            display: none;
        }
    </style>
</head>

EXTERNAL: In external css, there is an external css file (eg. style.css by default) that are linking with the html page in the head tag by

<link rel="stylesheet" href="./style.css">

Priority in CSS:

If all three types of CSS are applied in the html code then the priority of Inline CSS is more than two others, after inline CSS priority of internal CSS is high. So we can write:

Inline > Internal > External

Selectors in CSS:

Selectors in CSS are defined as to select certain element, class, id or attribute to apply CSS in that. CSS selectors are used for selecting the HTML elements that we want to style, and they are a fundamental part of working with CSS. CSS selectors can be used to select elements based on their type, class, ID, attributes, or dynamic state or position.

We can divide CSS selectors into five categories:

Simple selectors.

 /* Universal Selector */
 *{
     margin: 0px;
     padding: 0px;
 }

 /* Element Selector */
 p{
     font-size: larger;
     font-style: italic;
     border: 5px solid rgb(226, 24, 24);
 }

 /* Class Selector */
 .heading{
     background-color: black;
     font-size: small;
 }

 /* ID Selector */
 #para{
     color: crimson;
 }

 /* Selector list */
 span,div{
     text-align: center;
     border: 8px solid black;
 }

Attribute selectors.

 /* Attribute Selector */
 [target="_blank"] {
     color: darkgreen;
 }

Combinator.
Pseudo-class selectors.
Pseudo-elements selectors.