HTML STYLE

HTML Style

HTML style helps add beauty to your webpage by defining your HTML elements in a structured way using style rules. Styling in HTML has to make use of CSS. CSS stands for Cascading Style sheet. CSS helps describes how the elements of an HTML document will appear on your devices, paper or database, in terms of fonts,fonts size, background orientation,color effects CSS works with style rules applied to HTML elements, which determines how such elements should be displayed on the webpage. Style rules consists of two parts: selector and a declaration which are used to explain how an element should be styled We would talk more on this in our CSS.

EXAMPLES

    We have three(3) ways to style our HTML documents:

  • Inline styling.
  • Internal styling.
  • External styling.

Inline Styling.

Here we can style our HTML documents, line by line by applying some style rules. this is used when you want to make changes to a unique element in your HTML document using the < p style="" > attribute.

Example

    •       
<!DOCTYPE html>	 
<html>
<head>
<title>inline styling</title>
</head>
<body>
  <h1 style="color:green;"> This heading is green </h1>        
</body>
</html>

    Internal Styling

    Styling here is done by styling the HTML file internally in the head tag-element, with the tag <"style"> This is done when more than a line is to be styled in a HTML document, considerable a page.

    Example

    •       
<!DOCTYPE html>
<html>
<head>
  <title>internal styling</title>
</head>
<style>
  p{
    color:red;
  }
</style>
<body>
  <p>Using Internal (embeded) styling for the p tags </p>
</body>
</html>

    External styling

    External styling is important when you want to apply your style rule to more than a page of a HTML document, its done in a seperate CSS file saved with an extension of .css but must be linked in the <"head"> section of the various pages in a HTML file.

    Example

    •       
<!DOCTYPE html>
<html>
<head>
  <title>internal styling</title>
  <link rel="stylesheet" href="style.css">  
</head>
<body>
  <p>Using External to style the paragraph</p>
</body>
</html>

    Popular tags

    HTML Forms HTML Table HTML List HTML Video HTML Image

    Dess App

    DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

    View
    1 1