HTML style । Types of Style Sheets

HTML style ।  Types of Style Sheets 


HTML styling attributes

Style attributes can be used to set the style of an HTML element.
Not being a HTML, this property is a CSS property. And value is a CSS value.

HTML style


What is CSS?
(CSS) whose full name is Cascading Style Sheets, a Style Sheet System that has been specifically developed to cater to the needs of web designers and web users, it is necessary to give our web pages a sophisticated look.

Using CSS, you can specify many types of style properties for the HTML element. There is always the name and value of each property in the HTML, which is separated by the colon (:). Each type of property declaration is separated from the semi-colon (;).
CSS allows you to specify how each HTML element is presented to the user.

But the purpose of HTML is not to do such things. This is the work done by CSS.


<tagname style="property:value;">


Types of Style Sheets
There are different ways of implementing a variety of styles in the HTML document. In particular, inline style sheets, internal style sheets and external style sheets are used.


External Style Sheet:
If you want to look and feel a lot of pages, it is necessary to place all types of style sheet rules in a style sheet file, and we also need to include this file in all HTML pages. For how you can include a style sheet file in an HTML sheet file, I have given you an example below.
 Example 



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




Internal Style Sheet:
Internal styles are added between the <head> .. </ head> element inside the HTML document
If you want to add internal styles to a web page, then the styles must be attached between the <style> tag. You can understand it with the help given below.
Example



<!DOCTYPE html>
 <html>    
<head>        
<title>My Example</title>        
<style>          
  body {              
             background-color: darkslategrey;
color: azure;
font-size: 1.1em;
             }
 h1 {
 color: coral;
 }
 #intro
 font-size: 1.3em;
 }
.colorful {
  color: orange;
 }
 </style>
</head>
<body>
<h1>Embedded Styles</h1>
<p id="intro">Allow you to define styles for the whole document.</p>
<p class="colorful">This has a style applied via a class.</p>
</body>
</html>




Inline Style Sheet:
This style is called Inline Style Sheet because we have declared the styles within the HTML start tag.
You can easily apply style sheet rules to any HTML element. You should do this when you want to make any special changes to any HTML element.
You can understand it by the example given below.
Example



<p style="color:red;font-size:24px;">Using Style Sheet Rules</p>


Other Examples

HTML background color
With the background-color property, you define the background color for the HTML element.
Example



<body style="background-color:powderblue;">
 <h1>This is a heading</h1>
<p>This is a paragraph.</p>
 </body>



HTML text color
With the color properties, you define the text color of the HTML element:
Example



<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>



Html fonts
With the help of font-family property, you can change the type of font you use for the HTML element according to you:
Example



<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>



HTML text size
With the font-size property, you can change the text size for the HTML element:
Example



<h1 style="font-size:300%;">This is a heading</h1>
 <p style="font-size:160%;">This is a paragraph.</p>



HTML Text Alignment
With the help of Text-Aline property, you define horizontal text alignment for the HTML element:
Example



<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>


HTML styling attributes Style attributes can be used to set the style of an HTML element. Types of Style Sheets There are different ways of implementing a variety of styles in the HTML document. In particular, inline style sheets, internal style sheets and external style sheets are used

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget