Learn HTML

"Are you looking to learn HTML from scratch? Look no further! Our HTML course is designed for both beginners and advanced learners who want to master the fundamental concepts of HTML. Our comprehensive course covers everything from the basic concepts of HTML, including tags, attributes, and elements, to the more advanced concepts such as multimedia, responsive design, and accessibility."

HTML CSS Styles

As you may know, HTML provides the structure and content of a web page, but CSS, which stands for Cascading Style Sheets, is responsible for the presentation and visual design.

HTML elements have the style attribute, which allows you to specify how an element should look like on the web page. The style attribute can contain one or more CSS (Cascading Style Sheets) properties that define the color, font, size, position, border, background and other aspects of an element.

HTML styles are used to control the appearance of HTML elements on a web page. You can use inline styles, internal, or external style sheets to apply styles to HTML elements. Here are some examples of how to use styles in HTML in different available ways:

 

Inline Styles

You can use the style attribute to apply styles directly to an HTML element. Here's an example:


<p style="color: red; font-size: 20px;">This is a paragraph with inline styles.</p>


In this example, the style attribute is used to set the color of the text to red and the font size to 20 pixels.

 

Internal Styles

You can also use the <style> element to define styles within the <head> section of an HTML document. Here's an example:


<!DOCTYPE html>
<html>
<head>
 <style>
   p {
     color: red;
     font-size: 20px;
   }
 </style>
</head>
<body>
	<p>This is a paragraph with internal styles.</p>
</body>
</html>


In this example, the <style> element is used to define styles for all <p> elements within the document.

 

External Styles

You can also use an external style sheet to apply styles to HTML elements. To do this, you'll need to create a separate .css file and link to it in your HTML document <head> section. Here's an example:


<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<p>This is a paragraph with external styles.</p>
</body>
</html>


In this example, the <link> element is used to link to an external style sheet named styles.css, which contains the styles for the <p> element.

 

Some points to remember:

  • Overall, styles are an important aspect of HTML for controlling the visual appearance of a web page, and they can be applied in various ways depending on your needs.
  • You can use inline styles, internal styles, or external style sheets to apply styles to HTML elements.
  • You can learn more about CSS styling in our dedicated CSS course series.

 

Watch this chapter video on YouTube: