Style in HTML5

How to add Styles to the HTML page

HTML StyleSheet:

HTMLCSS( Cascading style sheet) is used to add the css styles to the HTML page. We can specify a number of style properties for a given HTML element.

Example program to define the HTML

    <p>This is Techfunda</p>
    <p><font color="pink" size="10">Welcome to TechFunda</font></p>

In the above code snippet we have defined the html using font tag

output

Example program to define the Stylesheet

    <p>This is stylesheet</p>
    <p style="color:green; font-style:italic;">Techfunda</p>

Stylesheet

In the above code snippet we have defined the usage of stylesheet in the html page as we have given the style to the <p> tag a color green and font style as italic which appears the output as in italic format.

output

Styling can be used in three ways they are

Inline styling - It uses <style> attribute in html

It adds the style to a single html element

 <p style="color:green;">Dotnetfunda</p>

Example program to define the inline styling using <style> Element in html

    <p style="color:red; font-size:20px; text-align:center;">TechFunda</p>
    <p style="font-style:italic;">DotnetFunda</p>
    <p style="background-color:pink; color:green;">Itfunda</p>
    <p style="color:green; padding-left:20px;">This is thick and green</p>

Inline Stylesheet

In the above code snippet we have defined the style element in a single line html element, Font-size is used to add the size of the text and font style as italic is used to add the style as italic , Background-color is used to add the background color and the padding-left is used to move the text to left

output

Internal styling - It uses <style> element in html <head> section

<head>
    <style>
        body {
            background-color: pink;
        }
        p {
            color: green;
        }
    </style>
</head>

Example program to define the Internal styling

<head>
    <title>HTML Internal CSS</title>
    <style type="text/css">
        .class1 {
            color: red;
             }
        .class2{
            font-style:italic;
            width:100px;
            border:1px solid green;
            background-color:pink;;
            color:aqua;
        }
    </style>
</head>
<body>
    <p class="class1">TechFunda</p>

    <p class="class2">DotnetFunda</p>
</body>

Internal stylesheet

In the above code snippet we have defined the internal style sheet. we have given the style element in the head section and we have taken two classes as class1 and class 2. In that two clases we have defimned the style sheet properties by giving the color, background color, text and width

output

External styling - It uses a external css(cascading style sheet) file to add the external styling

<head>
    <title>HTML madding CSS external file</title>
    <link rel="stylesheet" href="styles.css">
</head>

Example program to define the external style sheet

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h4>TechFunda is a online tutorial to learn .net step by step manner</h4>
    <p>Dotnetfunda is a online tutorial to learn and share the technologies with each other </p>
</body>
</html>

External stylesheet

In the above code snippet we have given the link of the external file in the head section which is used to add the file in the in the html page and the h4 and p elements in the body section will define the html

output

we can add the style sheet by another way by using selectors as

p
#myid

CSS using selector p

<style>
       p{
          border:5px solid silver;
          color:green;
          font-size:50px;
       }
   </style>
    <p>TechFunda</p>

Selector:p

In the above code snippet we have defined how to use the selector p to the html page we have given p in the style and we declared the value of the p in the body as techfunda

output

selector #myid:

It is used to give the id to the selected element

<style>
       #myid{
         color:green;
         background-color:pink;
       }
   </style>
    <div id="myid">TechFunda</div>

Myid

In the above code snippet we have defined the id. we have taken id in the style and we have given the color as green and background color as pink in the style element and in the body we have taken div as id as myid to the value as TechFunda.

Output