Introduction to CSS 3


CSS it stands for Cascading Style Sheet. It is used for representation of HTML or XML documents.
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. 

Using CSS we can style each an every section of the web page, it becomes very easy to target all the elements using CSS in web page.

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate.


There are three types of CSS:-

1. Inline CSS:- Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.

Example:-
<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Inline CSS</title>
</head>
<body>
     <div style="border: solid red; background-color: rgb(253, 255, 152);">
     <h1 align="center">Help For Coders</h1>
     <p align="center">Welcome to help for coders family.</p>
     <p align="center">This is an example of Inline CSS</p>
     </div>
</body>
</html>
Output:-
Introduction to CSS 3



2. Embedded CSS:- This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e. the CSS is embedded within the HTML file. Embedded CSS is defined in the tag called "style" tag. 
Example:-
  <!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
          .border1{
               border: rgb(151, 4, 219) dotted 5px;
               background-color: aquamarine; 
               text-align: center;     
               font-size: large;      
          }

          .border2{
               border: solid red 5px;
               background-color: cadetblue;
               text-align: center;
               font-size: large;
          }

          .border3{
               border: groove rgb(166, 255, 0) 5px;
               text-align: center;
          }
          
     </style>
     <title>Inline CSS</title>
</head>
<body>
     <div class="border3">
     <h1 class="border3">Help For Coders</h1>
     <p class="border1">Welcome to help for coders family.</p>
     <p class="border2">This is an example of Inline CSS</p>
     </div>
</body>
</html>

Output:-
Introduction to CSS 3


3. External CSS:- External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with ".css" extension and should be linked to the HTML document using link tag.
Example:-
  <!-- This the code of introduction.html -->

<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Inline CSS</title>
</head>

<body>
     <!-- Below is the link for stylesheet document named introduction.html-->
     <link rel="stylesheet" href="introduction.css">

     <!-- Here we are using id for div tag   -->
     <div id="border4">
          <h1 class="border3">Help For Coders</h1>
          <p class="border1">Welcome to help for coders family.</p>
          <p class="border2">This is an example of External CSS</p>
     </div>
</body>

</html>
  
  


  /* This is thr code of introduction.css file */
.border1{
    border: rgb(151, 4, 219) dashed 5px;
    background-color: aquamarine; 
    text-align: center;     
    font-size: x-large;     
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
}

.border2{
    border: solid red 5px;
    background-color: cadetblue;
    text-align: center;
    font-size: x-large;
    font-family: Verdana, Geneva, Tahoma, sans-serif; 
}

.border3{
    border: dotted rgb(0, 162, 255) 5px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

#border4{
    border: groove rgb(255, 145, 0) 10px;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-color: rgb(255, 191, 255)

}
Output:-
Introduction to CSS 3



CSS can be applied to the elements or sections of a web page with the help of  a "class" or an "id" to the element or section or tag in HTML file.

Class:- 
->In CSS class is a set of styling for elements or sections in a web page.
-> A particular class can be assigned to any number of elements of tags.
-> Syntax to initialize a class.
Introduction to CSS 3


-> Syntax to call a class to a tag.
Introduction to CSS 3



Id:-
-> Id is a unique identification to a tag or element of a web page.
-> It can be assigned to only one element/tag in the whole HTML document of web page.
-> Syntax to initialize an id.
Introduction to CSS 3

-> Syntax to call an id to a tag.
Introduction to CSS 3


#ENJOYCODING

Tags

Post a Comment

FOR ANY DOUBTS AND ERRORS FEEL FREE TO ASK. YOUR DOUBTS WILL BE ADDRESSED ASAP

Post a Comment

FOR ANY DOUBTS AND ERRORS FEEL FREE TO ASK. YOUR DOUBTS WILL BE ADDRESSED ASAP

Previous Post Next Post