HTML styles

HTML styles


In this tutorial, you will learn how to apply style rules to HTML elements.


HTML is quite limited when it comes to the appearance of a webpage. This is not so good if you’re trying to give a website a unique look and feel. İn other words HTML wasn’t created to present beautiful content. It was originally designed as a simple way of presenting the information.
When HTML was created, İts main job was to put content on the web pages. But later on, some programmers wanted to make the content pretty.
That’s when they created the ” style attribute ” for HTML tags to make them fancy. But it’s not the purpose of HTML to do such things. That’s the job of CSS.
Then why do we have it?
Well, back then it was the first way of adding CSS to HTML elements. Anyhow, let’s see it in action.


The HTML Style Attribute

There are 3 ways of adding CSS to HTML. But in this tutorial, we will only cover one of them with the style attribute.
When you add CSS to HTML with the style attribute it’s called “inline styling “. The HTML style attribute has the following syntax:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

 Note: Use the style attribute in the HTML start tag.

Tip: CSS stands for ‘ Cascading Style Sheet ‘
You will learn more about CSS later in this tutorial.

Link to our HTML Attributte Tutorial:

HTML Attribute

Text Color

The CSS color property defines the text color for an HTML element:
Let’s use the style attribute to color the elements’ text.

Example Code:

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

Fonts

The CSS font-family property defines the font to be used for an HTML element:
A font-family is the way a text looks. For example cursive, or robotic, etc..

Example Code:

<h1 style="font-family: arial;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>

Background Color

The CSS background-color property defines the background color for an HTML element.
İn this example we’re setting the background color for a page to light blue.

Example Code:

<!DOCTYPE html>
<html>
<body style="background-color:lightblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


Text Size

The CSS font-size property defines the text size for an HTML element.
Like how big or small the font should be/look.

Example Code:



<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>



Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element.
By default text is in the left side. But you can change that with CSS.

Example Code:

<h1 style="text-align:left;">Left aligned  Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>

<p style="text-align:right;">Right aligned paragraph.</p>

Adding Styles to HTML Elements

Style information can either be attached as a separate document or embedded in the HTML document itself. These are 3 methods of implementing styling information to an HTML document.

  • Inline styles — Using the style attribute in the HTML start tag. Like we did in this tutorial.
  • Embedded style — Using the  <style>   element in the head section of the HTML document.
  • External style sheet — Using the <link>   element, pointing to an external CSS files.

You will learn these in our CSS Tutorial.

Comments are closed.