CSS Introduction, what is CSS & Types of CSS

Published by StudyMuch on January 21, 2022January 21, 2022

CSS Introduction, what is CSS & Types of CSS

What is CSS?

CSS stands for Cascading Stylesheet; CSS is a stylesheet language used to describe and design the presentation of an HTML (Hyper Text Markup Language) documents.

CSS is designed to enable the separation of presentation and content of HTML document, like including layout, stylish text font and color, the separation can improve the content accessibility, In CSS we give attractive design to HTML document such as all font colors, background styles, elements alignments, border, size etc. We learn all the styling in CSS next tutorial of CSS.

Why Use CSS

We learn CSS because we can define and styles our web pages in websites, including design, layout, and variation in display across devices and screen sizes.

In CSS you can do al lots of work and an external stylesheet of CSS file you save .css can be used to style multiple web pages all at once.

Example of CSS

Here we see a simple example of CSS after we learn types of CSS.

<!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>Example CSS</title>
    <style type="text/css">
     h5{
         color: blue;
         font-family: Georgia, 'Times New Roman',
          Times, serif;
         font-size: 20px;
     }
     p{
         background-color: rgb(4, 18, 148);
         color: rgb(247, 242, 242);
     }
    </style>
</head>
<body>
   <h5>Hello User</h5>
   <p>Welcome back in StudyMuch.in</p>
</body>
</html>

Output of above Programming Example

Types of CSS

There are three simple ways to insert CSS Style into HTML document.

Inline Styling
Internal Style Sheet
External Style Sheet

1. Inline Styling

Inline stye is useful for design a single HTML document, it is done by using style attribute its value contain CSS declaration.

Example of Inline Styling

<!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>Internal Style Sheet</title>    
</head>
<body>
   <h5
 style="color: darkgreen; text-align:
 center;">I love Coding</h5>
   <p
style="text-align: center; background-color:
 chartreuse;">Learning Web Design is Best.</p>
</body>
</html>

Output of above Example

2. Internal Style Sheet

An Internal Style Sheet is useful when a single HTML document has its unique style, simple it is used to single HTML document.

With this, CSS rules should be included inside the <head> tag in HTML document. The <style> element should be only enclosed inside the <head>, otherwise if you write CSS code in <body> tag it is not working.

The text/css value indicate that the content in CSS. <style type=”text/css”>

Example of Internal Style Sheet

<!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>Internal Style Sheet</title>
    <style type="text/css">
     h5{
         color: rgb(255, 72, 0);
         font-family: Georgia, 'Times New Roman',
         Times, serif;
         font-size: 20px;
         text-decoration: underline;
     }
    </style>
</head>
<body>
   <h5>Hello User Of StdyMuch</h5>
</body>
</html>

Output of above Example

Above Internal Style Sheet Example coding you can see; we write CSS Style script inside the <head> tag.

3. External Style Sheet

An External Style Sheet is very useful when multiple HTML pages have same styles, this can be achieved by having an external style sheet file.

An external style sheet must be saved file with .css extension.

We need to use the <link> element to inside the file in our HTML documents.

Example of External Style Sheet (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>Internal Style Sheet</title>
    <link rel="stylesheet"
href="examplestyle.css">
</head>
<body>
   <h5>Hello User Of StdyMuch</h5>
   <p>In this HTML page we link css file 
    (examplestyle.scc), You can see above HTML 
    Example.</p>
</body>
</html>

Example of External Style Sheet (CSS)

h5{
    color: rgb(255, 72, 0);
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
    text-decoration: underline;
}
p{
    color: blueviolet;
}

Output of above both programming example HTML and CSS

Above you can see the programming example of External Style Sheet we use External file for styling HTML page; thus, CSS file name is examplestyle.css. you see the HTML example of External style sheet we use <link rel=”stylesheet” href=”examplestyle.css”>
this link for styling.

In this tutorial we learned What is CSS, and Types of CSS. This is the first tutorial of CSS, in next tutorial we will learn a new topic of CSS.

Read Also-