HTML 5 TutorialsUse Of CSS in HTML

Use Of CSS in HTML

CSS (Cascading Style Sheets) is a style sheet language used to style document or webpage written in HTML and XHTML. It can also be applied to XML document. CSS is used to separate the design and other presentation logic in HTML. In our blog today we will use internal CSS to add style to our HTML.

<html>
<head>
 <title>CSS in HTML</title>		//Title of the page is displayed as “CSS in HTML”
 <style type="text/css">                     //Internal method of CSS
* {
	margin-left:0px;
	margin-top:0px;		//Various Margins are defined
	margin-right:0px;
}
p {
	color:blue;
	font-family:Helevetica;   	//Paragraph Formatting
}
.strip1 {
	width:100%;
	height:20px;                           //First Strip Properties
	background:green;
}
.strip2 {
	width:100%;
	height:20px;               	// Second Strip properties
	background:cyan;
	margin-top:10px;
}
//In this part of code above we define properties of two strips that we want to show on our page. Strip1 is of green color and strip2 is of Cyan color. 

</style>                                //closing tags

As the comments in the code suggest we start with our HTML head and define style as text/css. We define various styles for standard elements like p and for other new entities like strip1 and strip2. They have their width and height and background color. Now we will use the elements defined in the CSS in our HTML body.

 </head>

 <body>
<div class="strip1"></div>
<div class="strip2"></div>
<button type="button" style= "Font-size:12 ;font-family: Arial Sans serif ">Click Me!</button>		        //button coding with formatting like font	
//Here we used <button > tag. By using this we designed a button with content “Click ME”. The size and font type is also defined.	

<p>THIS IS WHAT WE WANT DO </p>   //paragragh to be write
<p > tag is used to write a paragraph in the body section.The formatting is lareaady done by defining <style> tag.
</body>
</html>

We have drawn strip 1 and strip 2. We also use the p tag for the paragraph. Output will be the following

internal_css

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,208FollowersFollow
104,000SubscribersSubscribe

More article

- Advertisement -