HTML CSS

Introduction

Hypertext Markup Language, commonly known as HTML, serves as the fundamental structure of the internet. It is a markup language utilized for crafting web pages and applications. CSS, an integral and robust aspect of HTML, empowers us to style and design our HTML pages effectively.

What is CSS?

Cascading Style Sheets, commonly known as CSS, plays a crucial role in webpage design by allowing developers to efficiently manage various design aspects. CSS enables the customization of background images and colors, spacing between elements, responsive designs for different devices and screen sizes, as well as control over elements' color, font, positioning, and layout. This powerful tool significantly reduces the workload for developers.

In this context, "Cascading" refers to the concept where styling applied to a parent element is inherited by its child elements automatically.

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

One way to apply a CSS property is by inserting CSS code directly into a specific line. This can be achieved through inline CSS. Inline CSS involves using style attributes to enforce the desired CSS property.

Example:

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 C# Tutorial</h2>
  <p style="color:red;">A red paragraph.</p>

 </body>
 </html>

Output:

Explanation:

The code snippet above demonstrates the usage of inline CSS. Within this code, CSS properties are incorporated directly within the HTML tag using the style attribute.

Advantages of Inline CSS

There are several benefits to utilizing inline CSS in web development. These include:

✅ Rapid and effortless addition of CSS properties directly into an HTML document, facilitating swift testing and immediate adjustments to web pages.
✅ Elimination of the necessity to upload a separate CSS file, as is the case with external CSS.

Disadvantages of Inline CSS

There are drawbacks associated with the utilization of inline CSS. These include the following:

✅ Introduction of inline CSS into our HTML document can result in a cluttered HTML structure.
✅ Incorporating inline CSS across various tags may lead to prolonged page loading times, consequently slowing down our website.

Internal CSS

Internal CSS is employed to apply CSS styles within a specific HTML page. It is feasible to define internal CSS within the head section of an HTML page. The CSS code should be enclosed within the <style> element.

By following the steps outlined below, we can integrate internal CSS into HTML code.

Step 1: Initially, we need to access our HTML document and then locate the beginning tag of <head>.

Step 2: The following code needs to be inserted within the <head> tag.

Example


<style type= "text/css">

Step 3: The necessary CSS code must be authored within the designated <style> element. An illustration is provided below.

Example


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

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

Example


</style>

Example 2:

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>
    body {background-color: powderblue;}
    h2 {color: blue;}
    p {color: red;}
    </style>
  
</head> <!-- Document Header Ends -->
<body>
  <h2>WELCOME TO C# Tutorial</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

Output:

Explanation:

In the example provided, we apply the CSS attribute within the style element. Within this element, we specify various styles for distinct elements by selecting the tag name.

Advantages of Internal CSS

Utilizing internal CSS in our HTML code offers several benefits. Here are a few of them:

✅ Internal CSS allows the utilization of selectors such as ID selector or CLASS selector.
✅ The syntax for implementing CLASS or ID selector within internal CSS is as demonstrated below.

Example


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

Internal CSS eliminates the need for additional file uploads by allowing all styling code to be contained within a single document.

Disadvantages of Internal CSS

There are drawbacks associated with the utilization of internal CSS within our HTML documents. These are outlined below:

✅ When incorporating CSS within the HTML markup, it can result in an increase in the size of the webpage and consequently extend the loading time of the site.

External CSS

To utilize external CSS, it is necessary to create a separate file for the CSS code using any text editing tool. Subsequently, this file should be linked to the HTML code using appropriate syntax.

This approach is widely adopted by developers for its efficiency and dependability. When there is a need to alter the webpage layout, developers simply access the CSS file and make the necessary modifications to align with their requirements.

By following the steps outlined below, we can integrate external CSS into our HTML document.

Step 1: To start, the initial step is to generate a file and designate it with a .css extension using a text editor of your choice. An illustration of this process is provided below.

Example


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

Next, proceed to locate the <head> tag within the HTML document. Following this, establish a reference path to the CSS file subsequent to the <title> tag.

Example


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

Example 3:

HTML code

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>
  <link rel="stylesheet" href="./style.css">
  
</head> <!-- Document Header Ends -->
<body>
  <h2>WELCOME TO C# Tutorial</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

CSS code

Example


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

Output:

Explanation:

Within the provided code snippet, it is necessary to generate a pair of files. One file should be dedicated to HTML content, while the other file should be designated for CSS styling. Subsequently, these files must be interconnected using the link attribute enclosed within the <head> tag.

CSS Colors, Fonts, and Sizes

By utilizing these characteristics, we have the ability to apply color, font styles, and text sizes to our webpage. These attributes are commonly used across various web pages.

Example:

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 C# Tutorial</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

Output:

Explanation:

Within the code snippet displayed above, various font families, colors, and font sizes have been specified for the webpage.

CSS Border

By utilizing this feature, we are able to establish a boundary surrounding the HTML element.

Example:

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 C# Tutorial</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

Output:

CSS Padding & Margin

Padding enables us to specify the distance between the text and the border, while margin allows us to determine the space surrounding the border.

Example:

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 C# Tutorial</h2>
  <p>A red paragraph.</p>

 </body>
 </html>

Output:

Introduction

What is CSS?

Using CSS

Inline CSS

Internal CSS

External CSS

CSS Colors, Fonts, and Sizes

CSS Border

CSS Padding & Margin

Input Required