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.

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>


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>


List of few property:value pairs that we generally use but they many more

PropertyUsesValueExample
background-colorWeb Page Back Ground ColorValid Color names, HTML Color Codesbackground-color:#FF0000 or background-color:red or background-color: rbg(255,0,0);
colorWeb Page text ColorValid Color names, HTML Color Codescolor: :#FF0000 or color: red or color: rbg(255,0,0);
font-sizeWeb Page text SizeSize in Number with ‘px’ suffix. px stands for pixelfont-size:20px;
font-familyWeb Page font typeFont name which will be supported by browserfont-family:ubuntu;
text-alignHorizontal Alignment of text center, left and righttext-align: center;
heightAdjust the Vertical height of image or container elementSize in Number with ‘px’ suffix. px stands for pixelheight:20px;
widthAdjust the Horizontal width of image or container elementSize in Number with ‘px’ suffix. px stands for pixelwidth:300px;
marginAdjust the margin of element, image or container elementSize in Number with ‘px’ suffix. px stands for pixel, sometime we use default value as “auto”margin:20px;
PaddingAdjust the padding of element, image or container elementSize 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>


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>



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.



In above example both HTML and CSS files are linked. The link is defined in the <head> section with link element.

<link rel = "stylesheethref = "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



Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

0 comments: