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:
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
color property defines the text color for an HTML element:
Let’s use the
style attribute to color the elements’ text.
<h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>
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..
<h1 style="font-family: arial;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p>
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.
<!DOCTYPE html> <html> <body style="background-color:lightblue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
font-size property defines the text size for an HTML element.
Like how big or small the font should be/look.
<h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p>
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.
<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
styleattribute 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.