Concepts Of CSS

August, 2024

By ALOK KUMAR PANDEY

What is CSS ?

Now , it's time to learn CSS. CSS stands for Cascading Stylesheets which is styling language but it's not the programming language.

It is used to describe the appearance of different html elements giving them aliveness. CSS beautifies the appearance of your web . It's one of the core technologies learn to make your own websites. In lamen language we can say that a complete web structure consists of three things a) HTML - to provide structure of your website b) CSS - for describing apperance of html elements c) JavaScript - making websites interactive, it is similar to human body like Skeleton gives structure as html, human Skin gives beautification as CSS , and the brain making the whole body functional as JavaScript.

How to use CSS ?

In order to use CSS for beautification of your website we can use different methods which are as follows:-

here is simple illustration of syntax to write CSS:-

Selector {
  property: value;
  property: value;
  property: value;
  property: value;

By describing in style attribute

We can use CSS by adding style attribute to starting tags of html ang giving them properties and value . Here is the illustrations of that :-

<button style = "background-color: blue; padding: 30px;"> Click me</button>

In this type of CSS which is also know as inline CSS having the largest priority give by browser.

By describing in style tag

We can use CSS and apply CSS through Style Tag .first we have to add a style tag in the head element of your html document. Before this we have to learn some essential concepts of selectors.

Selectors:- It is a tool or technique which is used to denote particular or family of elements. Without selectors we cannot apply CSS except Inline CSS.
Types of selectors:-
By using element:- we can use element name directly as a selector to apply CSS in your html code to describe appearance e. g :-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Small Example</title>
    <style>
      p {
       color: darkblue;
       font-size: 18px;
      }
      button {
       background-color: teal;
       color: white;
       border: none;
       padding: 8px 12px;
       border-radius: 6px;
       cursor: pointer;
      }
      button:hover {
       background-color: darkcyan;    
      }
    </style>
  </head>
  <body>
    <p>This is a styled paragraph.</p>
    <button>Click Me</button>
  </body>
</html>

By using id selectors:- first of all you have to know you can one id to only one element just as one id is given to student in an institute so be precise while giving id attribute in elements. Now we see in code how it works :-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ID Selector Example</title>
    <style>
      #mypara {
       color: darkgreen;
       font-size: 18px;
      }
      #mybtn {
       background-color: orange;        color: white;
       padding: 6px 10px;
       border: none;
       cursor: pointer;
      }
    </style>
  </head>
  <body>
    <p id="mypara">This is a styled paragraph using ID selector.</p>
    <button id="mybtn">Click Me</button>
  </body>
</html>

By using class attribute:-whenever we have to apply CSS on many elements we go with a class in which we define a class inside elements and give them same value and by which we can apply CSS on those at a time . You can see the illustrations to understand how to use class as selectors .

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Class Selector Example</title>
    <style>
      .text {
        color: purple;
        font-size: 18px;
       }
      .btn {
        background-color: crimson;      color: white;      
        padding: 6px 10px; 
        border: none;
        border-radius: 5px;              cursor: pointer;
       }
      .btn:hover {
        background-color: darkred;    }
    </style>
  </head>
  <body>
    <p class="text">This is a styled paragraph using a class selector.</p>
    <button class="btn">Click Me</button>
  </body>
</html>

By using another separate CSS file

we can use CSS through external separate CSS file. first of all you have to use “Link tag” (use to link files, favicon etc.) in head tag and include “rel” attribute with value “stylsheets” and also include “href” attribute to specify the URL of the CSS File. here is illustration:- ➖

<head>
  <link rel="stylesheet" href="URL of file">
</head>

after writing this , you are able to apply CSS while writing in separate .CSS file . Now you can describe appearance of any element.

Some points to know

whenever you use CSS have you think without applying CSS in your html document how you text color is always black? why your background color is always white? why certain thing appear in a certain w ay . who determines the text color, size of text, font family of text etc. Let me tell you about “User Agent Stylesheet” which is style sheet of the browser that determines basic styling of your html document . Also one point to know that we cannot change this User Agent Stylesheet instead we can override or Cascade this stylesheet means there is only overlapping styles are done by CSS layer by layer but there are one above other e.g suppose we have two rectangles having same dimensions but one with red by default and one with blue, let we put blue one over the red what color we can see , obviously blue same thing applies to CSS only overlapping is done. if we remove styling means uncovering above layer .

How to hack analogy of CSS