This is the easiest but least recommended way to apply a style to an HTML element.
The styles to be defined for said element are defined inside the element.
It is common sometimes to define styles directly in the HTML elements when we are testing the designs of particular elements of the page and later transfer the created style to external or internal css.
The syntax to define a style to an HTML element is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<meta charset="UTF-8">
</head>
<body>
<h1 style="color:#ff0000;background-color:#ffff00">
This message is red on a yellow background.
</h1>
</body>
</html>
The result in the browser when loading this page is:
By default, every browser has a style defined for each HTML element, what we do with the style property is redefine the default style.
In this problem we define that the h1 element defines red as text color and yellow as background color:
<h1 style="color:#ff0000;background-color:#ffff00">
This message is red on a yellow background.
</h1>
We will see later that there are many properties in CSS.
In this first example we initialize the propertie color (defines the color of the text) and background-color (defines the background color of the text).
Every time we initialize a property we must separate it from the next one by semicolons.
When we define styles directly in the HTML element, we have to take into account that the style is applied only to that element where we initialize the style property.
If we have two h1 elements, we must define the style property for each element:
As we can see, beyond the fact that the two styles are exactly the same, we are obliged to define them for each HTML element.
Task - Exercise 3
Use inline css styles to set the font color of the words "super cool internet" to blue
10Write the code in the first span tag in the row in the editor on the right :
style="color:blue"
Task Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inline styles</title>
</head>
<body>
<p>coding180, <span>cool Internet</span>, free IT
technology learning platform <span>timely and considerate
service</span>, professional content, <span>Fun and easy
to learn</span>. Focus on serving Internet engineers and
quickly become technical masters! </p>
</body>
</html>
