HTML style using CSS
Let's suppose we have created our web page using a simple HTML code, and we want something which can present our page in a correct format, and visibly attractive. So to do this, we can style our web page with CSS (Cascading Stylesheet) properties.
CSS is used to apply the style in the web page which is made up of HTML elements. It describes the look of the webpage.
CSS provides various style properties such as background color, padding, margin, border-color, and many more, to style a webpage.
Each property in CSS has a name-value pair, and each property is separated by a semicolon (;).
🔺In this chapter, we have given a small overview of CSS. You will learn everything in depth about CSS in our CSS tutorial.
Best Example as:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h4 style="color: red;">Welcome to TopBlog Pk. ..</h4>
<p style="color: blue; font-size: 25px; font-style: italic ;">It is a great Blog to Learn HTML and CSS technology. </p>
</body>
</html>
Welcome to, TopBlog Pk !
It is a great blog to Learn HTML and CSS technology.
In the above example, we have used a style attribute to provide some styling format to our code.
Three ways/types to apply CSS
To use CSS with HTML document, there are three ways:
- Inline CSS : Define CSS properties using style attribute in the HTML elements.
- Internal or Embedded CSS : Define CSS using tag in section.
- External CSS : Define all CSS property in a separate .css file, and then include the file with HTML file using tag in section.
Inline CSS :
Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each element.
To apply inline CSS, you need to use style attribute within HTML element. We can use as many properties as we want, but each property should be separated by a semicolon (;).
<!DOCTYPE html>output:
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h3 style="color: red;
font-style: italic;
text-align: center;
font-size: 50px;
padding-top: 25px;">Learning HTML using Inline CSS</h3>
</body>
</html>
Learning HTML using Inline CSS
Internal CSS :
An Internal stylesheets contains the CSS properties for a webpage in <head> section of HTML document. To use Internal CSS, we can use class and id attributes.
We can use internal CSS to apply a style for a single HTML page.
output:<!DOCTYPE html>
<html>
<head>
<style>
/*Internal CSS using element name By TopBlog Pk*/
h4.test{font-style: italic;
font-size: 30px;
color: #f08080;}
/*Internal CSS using class name By TopBlog Pk*/
.blue{color: blue;}
.red{color: red;}
.green{color: green;}
</style>
</head>
<body>
<h4 class="test"> Learning HTML with internal CSS</h4>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
Learning HTML with internal CSS
This is a blue color paragraph
This is a red color paragraph
This is a green color paragraph
External CSS :
An external CSS contains a separate CSS file which only contains style code using the class name, id name, tag name, etc. We can use this CSS file in any HTML file by including it in HTML file using <link> tag.
If we have multiple HTML pages for an application and which use similar CSS, then we can use external CSS.
There are two files need to create to apply external CSS
- First, create the HTML file
- Create a CSS file and save it using the .css extension (This file only will only contain the styling code.)
- Link the CSS file in your HTML file using tag in header section of HTML document.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="external_css.css">
</head><body>
<h2>Learning HTML with External CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
Learning HTML with External CSS
This is a blue color paragraph
This is a red color paragraph
This is a green color paragraph
