HTML Styles

Please Share On:

The HTML style attribute is used to add styles in an element. For example: color, size, font, and more.
The style attribute is used to specify CSS rules within the tag element.

<p style = "font-family: aerial; color: red; font-size: 20px; font-style: italic;"> Some text... </p>

Syntax:

<tagname style="property:value;">

Here, The property is a CSS property and the value is a CSS value.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Style</title>
  </head>
 
  <body>
     <p style = "color:red; font-size:24px;" > Hello, World! </p>
  </body>
</html>

Output:

3 ways of using CSS in html documents:

External Style Sheet: Define style sheet rules in a seperate .css file and then include that file in your HTML document using <link> tag.
Internal Style Sheet: Define style sheet rules in header section of the HTML document using <style> tag.
Inline Style Sheet: Define style sheet rules directly in the HTML elements using style attribute.

1) External Style Sheet:

In external style sheets, CSS defines as a separate file and saved on a .css extension like “filename.css”. This single .css file will change the look of the entire website. Each page of your website must link to external style sheets using the following code which must insert in the head section.

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

External style sheets can be written in any text editor. Here is an example of the external style sheets “filename.css” code.

body {
  background-color: blue;
  margin: 10px;
  padding: 5px;
}

.header-title {
  color: black;
  text-align: center;
  text-decoration: underline;
}

2) Internal Style Sheets

Internal Style Sheets may be used to style each single page. It is defined with <style> element inside <head> section of your html page.

<head>
<style>
body {
  background-color: blue;
  margin: 10px;
  padding: 5px;
}

.header-title {
  color: black;
  text-align: center;
  text-decoration: underline;
}
</style>
</head>

3) Inline style sheets

Inline style sheets are used to style a single element.

Suppose you have an HTML page like home.html.

<!DOCTYPE html>
<html>
<head>
  <title>Home Page</tilte>
</head>
<body>
   <h1>This is a heading</h1>
     <p>This is a paragraph.</p>
</body>
</html>

Now define your element using inline style sheets.

<html>
<head>
  <title>Home Page</tilte>
</head>
<body>
   <h1 style="color:red;margin:10px; text-align:center;">This is a heading</h1>
     <p>This is a paragraph.</p>
</body>
</html>

The above code:

<h1 style="color:red;margin:10px; text-align:center;">This is a heading</h1>

is used for the inline style sheet. “This is a heading” is defined with color: red, margin is equal to 10px and text is in the center. The inline style sheets used only in <h1> will not apply in <p>. The content inside the <p> remains the same without any style sheets.

In this way, we can style our webpage layout in 3 different ways.

You may be interested in the following topics:

Post Views: 535