HTML CSS

Introduction

HTML Stands for Hypertext Markup Language. We also call it the backbone of the internet. It is one of the markup languages which is used to create web pages and applications. One of the most essential and powerful features of HTML is its CSS. We can design our HTML page with the help of CSS.

What is CSS?

CSS stands for Cascading Style Sheets. It is used to design the layout of the webpage. CSS helps the developer to save a lot of work. With the help of CSS, we can control the background images or background colors to be used, the spacing between elements, different displays for different devices and screen sizes, color, font, how elements are positioned and laid out, and many more.

Here the word "Cascading" means if we apply some style to the parent element, then a similar style is automatically applied to the child elements.

Using CSS

We can apply the CSS property to our HTML page in 3 ways. These ways are as follows.

Inline CSS.
Internal CSS.
External CSS.

Inline CSS

We can implement the CSS property by writing the CSS code in a particular line. This can be done with the help of inline CSS. In inline CSS, we can use style attributes to implement the CSS property.

Example:

<DOCTYPE html>
<html lang="en">
<head> <!-- Document Header Starts -->
  <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>Document</title>
  
</head> <!-- Document Header Ends -->
<body>
  <h2 style="color:blue;">WELCOME TO JAVATPOINT</h2>
  <p style="color:red;">A red paragraph.</p>

 </body>
 </html>

Output:

Explanation:

The above code is an example of the implementation of inline CSS. In the code, we have implemented some CSS properties inside the tag with the help of the style attribute.

Advantages of Inline CSS

There are some advantages of using inline CSS. These are as follows.

We can insert CSS properties to an HTML page very quickly and easily. So this method is very useful for testing the webpages and performing the quick fix operation to the web pages.
There is no need to upload an extra file for CSS as like external CSS.

Disadvantages of Inline CSS

There are also some disadvantages to using inline CSS. These are as follows.

Implementing the inline CSS to our HTML code makes our HTML structure very messy. If we implement inline CSS in multiple tags, it can take lots of time to load the page and make our web page slow.

Internal CSS

Internal CSS is used to implement the CSS property in a single HTML page. We can write the internal CSS within the head tag of the HTML page. We have to write the code inside the <style> tag.

With the help of the below process, we can implement the internal CSS in HTML code.

Step 1: First, we have to open our HTML page; then, we have to search for the <head> opening tag.

Step 2: We have to write the below code inside the <head> tag.

Step 3: We have to write the required CSS code inside the <style> tag. The example is as below.

body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
}

Step 4: Then we have to close the style tag.

Example 2:

<DOCTYPE html>
<html lang="en">
<head> <!-- Document Header Starts -->
  <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>Document</title>
  <style>
    body {background-color: powderblue;}
    h2 {color: blue;}
    p {color: red;}
    </style>
  
</head> <!-- Document Header Ends -->
<body>
  <h2>WELCOME TO JAVATPOINT</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

Output:

Explanation:

In the above, we implement the CSS property inside the style tag. Inside the style tag, we have defined different styles for different elements by targeting the tag name.

Advantages of Internal CSS

There are some advantages of using internal CSS in our HTML code. These are as follows.

1. We can use the selector like ID selector or CLASS selector in internal CSS. The implementation of CLASS or ID selector is as follows.

.class {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}
 
#id {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

2. In internal CSS, we don't have to upload extra files. Because in internal CSS, we write all the code in a single code.

Disadvantages of Internal CSS

There are some disadvantages to using internal CSS in our HTML code. These are as follows.

If we add the CSS code with our HTML code, then it will increase the page size and loading time of the webpage.

External CSS

With the help of external CSS, we have to write another file where we have to write the CSS code with the help of any text editor, and then we have to link that file to the HTML code with the help of syntax.

This method is a more efficient and reliable method that is followed by all the developers. When we want to change the design of the webpage, then we have to just go to the. CSS file, and then we have to modify that file according to our needs.

With the help of the below steps, we can implement the external CSS in our HTML code.

Step 1: First, we have to create a file and name that file with the help of a .css extension with the help of any text editor. The example is as below.

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

Step 2: Then we have to go to the <head> tag in the HTML file; then, we have to create a reference path to that CSS file after the <title> tag.

Example 3:

HTML code

<DOCTYPE html>
<html lang="en">
<head> <!-- Document Header Starts -->
  <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>Document</title>
  <link rel="stylesheet" href="./style.css">
  
</head> <!-- Document Header Ends -->
<body>
  <h2>WELCOME TO JAVATPOINT</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

CSS code

body {
  background-color: powderblue;
 }
 h2 {
  color: blue;
 }
 p {
  color: red;
 }

Output:

Explanation:

In the above code, we have to create two files. One is for HTML, and another is for CSS. Then we have to link those files with the help of the link attribute inside the <head> tag.

CSS Colors, Fonts, and Sizes

With the help of these attributes, we can give color, font, and font size to our web page. These are widespread properties for all web pages.

Example:

<DOCTYPE html>
<html lang="en">
<head> <!-- Document Header Starts -->
  <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>Document</title>
  <style>
    h2 {
     color: blue;
     font-family: verdana;
     font-size: 300%;
    }
    p {
     color: red;
     font-family: courier;
     font-size: 160%;
    }
    </style>
  
</head> <!-- Document Header Ends -->
<body>
  <h2>WELCOME TO JAVATPOINT</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

Output:

Explanation:

In the above code, we have provided some font families, colors, and font sizes for our webpage.

CSS Border

With the help of this, we can set a border around the HTML element.

Example:

<DOCTYPE html>
<html lang="en">
<head> <!-- Document Header Starts -->
  <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>Document</title>
  <style>
    h2 {
     color: blue;
     font-family: verdana;
     font-size: 300%;
    }
    p {
     color: red;
     font-family: courier;
     font-size: 160%;
     border: 2px solid powderblue;
    }
    
    </style>
  
</head> <!-- Document Header Ends -->
<body>
  <h2>WELCOME TO JAVATPOINT</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

Output:

CSS Padding & Margin

With the help of padding, we can define the space between the text and the border. And with the help of margin, we can define the space outside of the border.

Example:

<DOCTYPE html>
<html lang="en">
<head> <!-- Document Header Starts -->
  <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>Document</title>
  <style>
    h2 {
     color: blue;
     font-family: verdana;
     font-size: 300%;
    }
    p {
     color: red;
     font-family: courier;
     font-size: 160%;
     border: 2px solid powderblue;
     padding: 30px;
     margin: 50px;
    }
    
    </style>
  
</head> <!-- Document Header Ends -->
<body>
  <h2>WELCOME TO JAVATPOINT</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

Output: