HTML Style Attribute or Inline CSS
In attribute chapter we have had the short introduction of style attribute. Now we know that style attribute is used to specify the styling of HTML elements.In this chapter we will learn how to style the HTML document.
Style attribute is used in the element open tags with property and value pair. Look at the below example.
Example - 1
<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Style Attribute and Element</title>
</head>
<body>
<h1 style = "color:red;">This is Page One.</h1>
<p style = "font-family:ubuntu;">This is paragraph. Below we have created a link to go through next page.</p>
<p style = "font-size:20px;font-weight:bold;">This paragraph font size is 20px and font weight is bold.</p>
<br/>
<a href = "Page2.html" style = "background:lightgreen;padding:10px;font-weight:bold;">Next Page</a>
</body>
</html>
<html>
<head>
<title>HTML5 - Style Attribute and Element</title>
</head>
<body>
<h1 style = "color:red;">This is Page One.</h1>
<p style = "font-family:ubuntu;">This is paragraph. Below we have created a link to go through next page.</p>
<p style = "font-size:20px;font-weight:bold;">This paragraph font size is 20px and font weight is bold.</p>
<br/>
<a href = "Page2.html" style = "background:lightgreen;padding:10px;font-weight:bold;">Next Page</a>
</body>
</html>
Do it: Paste above code into your text editor and try yourself.
Syntax
The HTML style attribute has the following syntax
Example - 2
<tagname style="property:value;">
The property is a CSS property and the value is the CSS value separate by semi colon (:) and ended by a colon (;). We can use multiple CSS property and value under a style attribute. Look at the below example
Example - 3
<p style = "font-size:20px; font-weight:bold; ">This paragraph font size is 20px and font weight is bold.</p>
<a href = "page2.html" style = "background:lightgreen; padding:10px; font-weight:bold;">Next Page</a>
<a href = "page2.html" style = "background:lightgreen; padding:10px; font-weight:bold;">Next Page</a>
List of few property:value pairs that we generally use but they many more
| Property | Uses | Value | Example |
| background-color | Web Page Back Ground Color | Valid Color names, HTML Color Codes | background-color:#FF0000 or background-color:red or background-color: rbg(255,0,0); |
| color | Web Page text Color | Valid Color names, HTML Color Codes | color: :#FF0000 or color: red or color: rbg(255,0,0); |
| font-size | Web Page text Size | Size in Number with ‘px’ suffix. px stands for pixel | font-size:20px; |
| font-family | Web Page font type | Font name which will be supported by browser | font-family:ubuntu; |
| text-align | Horizontal Alignment of text | center, left and right | text-align: center; |
| height | Adjust the Vertical height of image or container element | Size in Number with ‘px’ suffix. px stands for pixel | height:20px; |
| width | Adjust the Horizontal width of image or container element | Size in Number with ‘px’ suffix. px stands for pixel | width:300px; |
| margin | Adjust the margin of element, image or container element | Size in Number with ‘px’ suffix. px stands for pixel, sometime we use default value as “auto” | margin:20px; |
| Padding | Adjust the padding of element, image or container element | Size in Number with ‘px’ suffix. px stands for pixel, sometime we use default value as “auto” | padding: 20px; |
Note: As the Tutorial goes ahead we will learn more about properties and values.
What is CSS?
So far we have learnt style as attribute but HTML styling can be done with CSS also. Actually style attribute property: value pair is part of CSS. CSS stands for Cascading Style Sheet. Styling of HTML document with above mentioned method is called Inline CSS.
Similarly CSS defines the style of the HTML Documents. CSS can save lot of work and time by controlling multiple web pages at a once. CSS is a language separate from HTML but while it is used like HTML attribute it become a part of HTML document.
CSS can be used to HTML in three different methods.
1. Inline – In this method we use style attribute inside the HTML element. We have already learnt this method above.
2. Internal – In this method we use to define the CSS property: value pair inside <style> element within <head> section. We target to select the elements by its name or selector attributes like id and class. We have learnt about the selector attributes in HTML5 Tutorial - HTML Attributes chapter.
3. External – I this method we use external CSS file and create a hyperlink between HTML and CSS documents and target to select the elements by its name or selector attributes like id and class.
HTML Style Element or Internal CSS
So far in this chapter we have learnt style as attribute but style also can be used as element like <style>. <style> element is defined inside the <head> element. Look below example very carefully and try yourself on your text editor.Example - 4
<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Style Attribute and Element</title>
<style>
h1{
color:red;
}
p{
font-family:ubuntu;
}
a{
background:lightgreen;
padding:10px;
font-weight:bold;
}
</style>
</head>
<body>
<h1>This is Page One.</h1>
<p>This is paragraph. Below we have created a link to go through next page.</p>
<a href = "pag2.html">Next Page</a>
</body>
</html>
<html>
<head>
<title>HTML5 - Style Attribute and Element</title>
<style>
h1{
color:red;
}
p{
font-family:ubuntu;
}
a{
background:lightgreen;
padding:10px;
font-weight:bold;
}
</style>
</head>
<body>
<h1>This is Page One.</h1>
<p>This is paragraph. Below we have created a link to go through next page.</p>
<a href = "pag2.html">Next Page</a>
</body>
</html>
As you can see above that CSS property and value parameters are define inside the <style> element. Almost all properties and values are similar like style attribute except Pseudo-elements and classes. We will learn about them in CSS chapter.
In above example elements are targeted by their names but in below example you can see how to target the element by the selector attributes id and class.
Example - 5
<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Style Attribute and Element</title>
<style>
#head{
color:red;
}
.para{
font-family:ubuntu;
}
a{
background:lightgreen;
padding:10px;
font-weight:bold;
}
</style>
</head>
<body>
<h1 id = "head">This is Page One.</h1>
<p class = "para">This is paragraph. Below we have created a link to go through next page.</p>
<a href = "pag2.html">Next Page</a>
</body>
</html>
<html>
<head>
<title>HTML5 - Style Attribute and Element</title>
<style>
#head{
color:red;
}
.para{
font-family:ubuntu;
}
a{
background:lightgreen;
padding:10px;
font-weight:bold;
}
</style>
</head>
<body>
<h1 id = "head">This is Page One.</h1>
<p class = "para">This is paragraph. Below we have created a link to go through next page.</p>
<a href = "pag2.html">Next Page</a>
</body>
</html>
As you can see HTML element <h1> contain id attribute and <p> element contain class attribute. In CSS to select the element with id attribute we use “#” prefix before id value like “#head” and for class we use “.” Prefix before class value like “.para” and define the properties and values parameters inside “{ }”. No need to add any prefix to target element by their tag names.
So far we have learnt Inline and Internal CSS. Both of these methods have a limitation. These methods are very time consuming when we are developing very large website that consists of lot of web pages. To solve this problem we generally use External CSS method which saves lot work and time by styling to multiple pages at once.
External CSS
In this method we create an external style sheet (file with .css extension) and create a hyperlink over HTML document to connect with HTML document. Like below example.
Example - 6
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Style Attribute and Element</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<h1 id = "head">This is Page One.</h1>
<p class = "para">This is paragraph. Below we have created a link to go through next page.</p>
<a href = "pag2.html">Next Page</a>
</body>
</html>
Copy and Paste above code to your text editor and save the file with ".html" extension.
CSS Code
#head{
color:red;
}
.para{
font-family:ubuntu;
}
a{
background:lightgreen;
padding:10px;
font-weight:bold;
}
Copy and Paste above code to your text editor and save the file with ".css" extension in same folder where you saved the above code HTML file. This file contains only CSS selector, property and value parameters. No HTML code allowed. It must be saved with .CSS extension.
Run your HTML file in web browser then watch what happens.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Style Attribute and Element</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<h1 id = "head">This is Page One.</h1>
<p class = "para">This is paragraph. Below we have created a link to go through next page.</p>
<a href = "pag2.html">Next Page</a>
</body>
</html>
Copy and Paste above code to your text editor and save the file with ".html" extension.
CSS Code
#head{
color:red;
}
.para{
font-family:ubuntu;
}
a{
background:lightgreen;
padding:10px;
font-weight:bold;
}
Copy and Paste above code to your text editor and save the file with ".css" extension in same folder where you saved the above code HTML file. This file contains only CSS selector, property and value parameters. No HTML code allowed. It must be saved with .CSS extension.
Run your HTML file in web browser then watch what happens.
In above example both HTML and CSS files are linked. The link is defined in the <head> section with link element.
<link rel = "stylesheet" href = "style.css">
In the link element "rel" is an attribute that defines the file type and href is also an attribute that define the path to create hyperlink of CSS file.
We will learn about more CSS codes in CSS Tutorials.
In next chapter with learn about selector attributes and file path
Post A Comment:
0 comments: