(left-sidebar)
HTML Design or Style

To apply styles to an element, such as
color, font, size, and more, use the HTML style attribute.


Example:

<!DOCTYPE html>
<html>
<head>
	<meta charset=“utf-8”>
	<meta name=“viewport” content=“width=device-width, initial-scale=1”>
	<title>HTML Design or Style</title>
</head>
<body>
	<p>I am typical.</p>
	<p style=“color:red;”>I’m red.</p>
	<p style=“color:blue;”>I’m bluish.</p>
	<p style=“font-size:50px;”>I’m large.</p>
</body>
</html>



The CSS attribute in HTML

The style attribute is used to specify the style of an HTML element.

The syntax for the HTML style attribute is as follows:


Example:

<html_tagname style=“property:value;”>

In the above example, a CSS property is a property and a CSS value
is a value.

Materials Download (download)





Background Color Property in HTML

An HTML element’s background color is specified through the CSS
background-color
attribute.


Example 1:

<!DOCTYPE html>
<html>
<head>
	<meta charset=“utf-8”>
	<meta name=“viewport” content=“width=device-width, initial-scale=1”>
	<title>HTML Design or Style</title>
</head>
<body style=“background-color:blue;”>
	<h1>It’s a heading.</h1>
    <p>There is a paragraph here.</p>
</body>
</html>

Set two separate elements’ backgrounds to different colors:


Example 2:

<!DOCTYPE html>
<html>
<head>
	<meta charset=“utf-8”>
	<meta name=“viewport” content=“width=device-width, initial-scale=1”>
	<title>HTML Design or Style</title>
</head>
<body>
	<h1 style=“background-color:blue;”>It’s a heading.</h1>
    <p style=“background-color:yellow;”>There is a paragraph here.</p>
</body>
</html>



Text Color in HTML 

The text color for an HTML element is determined by the CSS
color property:


Example:

<!DOCTYPE html>
<html>
<head>
	<meta charset=“utf-8”>
	<meta name=“viewport” content=“width=device-width, initial-scale=1”>
	<title>Text Color in HTML</title>
</head>
<body>
	<h1 style=“color:red;”>it’s a heading</h1>
    <p style=“color: yellow;”>There is a paragraph here.</p>
</body>
</html>

Effect Download (download)

Fonts in HTML 

The font to be used for an HTML element is specified through the CSS
font-family property:


Example:

<!DOCTYPE html>
<html>
<head>
	<meta charset=“utf-8”>
	<meta name=“viewport” content=“width=device-width, initial-scale=1”>
	<title>Fonts in HTML</title>
</head>
<body>
	<h1 style=“font-family:verdana;”>it’s a heading.</h1>
    <p style=“font-family:courier;”>There is a paragraph here.</p>
</body>
</html>



Text Size in HTML

The text size for an HTML element is determined by the CSS
font-size property:


Example:

<!DOCTYPE html>
<html>
<head>
	<meta charset=“utf-8”>
	<meta name=“viewport” content=“width=device-width, initial-scale=1”>
	<title>Text Size in HTML</title>
</head>
<body>
	<h1 style=“font-size:150%;”>it’s a heading.</h1>
    <p style=“font-size:110%;”>There is a paragraph here.</p>
</body>
</html>



Text Alignment in HTML

The horizontal text alignment for an HTML element is defined by the CSS
text-align property:


Example:

<!DOCTYPE html>
<html>
<head>
	<meta charset=“utf-8”>
	<meta name=“viewport” content=“width=device-width, initial-scale=1”>
	<title>Text Alignment in HTML</title>
</head>
<body>
    <h1 style=“text-align: center;”>it’s a heading.</h1>
    <p style=“text-align: left;”>There is a paragraph here.</p>
</body>
</html>



Chapter Overview

  • To style HTML elements, use the style attribute.
  • When using a backdrop color, use background-color.
  • For text colors, use color
  • When using text fonts, use font-family.
  • Utilize font-size to adjust text size
  • For text alignment, use text-align.


Project Download (download)


Rate this post

Categorized in: