12
Nov
2020

Types of CSS and how to use CSS types in webpages styling

Types of CSS and how to use these in webpages styling. What are different cascading style sheet types and how we can use these types in different webpages according to our requirements. There are three type of css like inline css, internal css and external css. In this video all these types are explained in details with practical explanation.

All details and description of the cascading style sheet are given below.

Types of CSS and how to use these in webpages styling
Types of CSS

Lecture No 08

Topic: Types of Cascading Style Sheet

  1. Inline CSS
  2. Internal CSS
  3. External CSS

1. Inline CSS

Inline styles are defined within the “style” attribute of the relevant element. We may say that this types of css is defined in the tag of HTML element like Heading tag, paragraph tag etc. example is given below.

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Inline CSS Example</h1>
<p style="color:blue; background-color: yellow; ">
	
AIOU Jobs 2020 Apply Online till 25 November. Allama Iqbal Open university has announced number of
jobs in their latest advertisement. Intended candidates have to apply online by creating a user via
registration option. All details and description for AIOU Jobs 2020 are given below.
</p>

</body>
</html>

2. Internal CSS

Internal styles are defined within the “style” element, inside the “head” section of an HTML page: details example is given below.

<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: maroon; color: yellow; margin-left: 40px; margin-right: 40px;}
h1 { background-color: yellow; color: blue;}
</style>

</head>

<body>
<h1>Internal CSS Example</h1>

<p>
AIOU Jobs 2020 Apply Online till 25 November. Allama Iqbal Open university has announced number of
jobs in their latest advertisement. Intended candidates have to apply online by creating a user via
registration option. All details and description for AIOU Jobs 2020 are given below.

</p>

</body>
</html>

3. External CSS

External styles are defined within the “link” element, inside the “head” section of an HTML page. We will make a separate css file for all coding of css. example of complete program is given below.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="external css example.css">
</head>
<body>

<h1>External CSS Example</h1>

<p>
	
AIOU Jobs 2020 Apply Online till 25 November. Allama Iqbal Open university has announced number of
jobs in their latest advertisement. Intended candidates have to apply online by creating a user via
registration option. All details and description for AIOU Jobs 2020 are given below.

</p>

</body>
</html>

External CSS “Link” File Coding

body {
  background-color: lightblue;
  color: yellow;
  margin-left: 40px;
  margin-right: 40px;
}

h1 {
  color: navy;
  margin-left: 20px;
  margin-right:  20px;
}

Complete Video Tutorial of Lecture 08

Leave a Reply

Your email address will not be published. Required fields are marked *