Add style to HTML
The style attribute is used to stylize elements directly in the HTML code. The purpose of the style attribute is to provide an easy way to change the appearance of almost any HTML element.
Note: here we look at the style attribute to form a general view of the use of CSS styles for the design of web pages. More details about CSS features you can read in the CSS tutorial.
The example code will introduce you to a new way of formatting a document:
<body style="background-color:ivory;"> <h1>Look at the colors and styles</h1> <p style="font-family:verdana;color:red;"> This text is written in red with a font Verdana. </p> <p style="font-family:times;color:green;"> This text is written in green using a font Times. </p> <p style="font-size:30px;">This text is 30 pixels in size.</p> </body>Try it »
Look closely at the example, using the
style attribute, we set the CSS style inside the HTML elements, this way of specifying styles is called the inline style. The inline style applies only to the element in which it was defined, and to its child elements (if the CSS properties are inherited).
The background of the element is set using the
background-color property, which can take any available color value (see below for different color values), after the property must be followed by a colon and a value, after the values are necessarily a semicolon, these rules propagate to all properties of the style attribute. If you want to set multiple style properties for a single element, then each subsequent property is written after ";" of the previous property.
The color of the element's text is specified by the
color property. With this property, you can specify any color for text content. As a value, the
color property can accept color names, set the color by a percentage of red, green and blue, or use hexadecimal codes.
Set the color by name
The easiest way to specify a color in CSS is to specify its name. Suppose you want to set a silver color for the text in the element:
So, to specify a color this way, you just need to specify its name as the property value. It does not matter whether you write the names in lowercase or uppercase letters, so you can write
SILVER, and all this will work.
Setting the color through the value specified by the combination of red, green and blue
You can specify a color by specifying a combination of red, green and blue in a specific proportion. Let's say you need to set an orange color that consists of 80% red, 40% green and 0% blue. Here's how you can do it:
color: rgb(80%, 40%, 0%);
You can also set the value of red, green and blue with numbers from 0 to 255. For example, instead of
40% green and
0% blue, you can write
102 green and
Look at how the usual numerical values are used to specify colors:
color: rgb(204, 102, 0);
Setting the color through the hex code
Now go to the hex codes. We'll tell you a little secret: each set of two digits of this code represents a red, green and blue component of the color. So, the first two digits represent a red color, the next two are green and the last two are blue:
Note: all three methods of setting colors in CSS are suitable for all properties that can take colors as values. All available color names can be found in our color table, where you can also choose a color in the rgb or hexadecimal value if you do not like any of the shades shown in the table.
Fonts can significantly affect the design of the pages. In CSS, they are divided into families, in which you can choose which font is best for a particular element on the page.
font-family: Verdana, Geneva, Arial, sans-serif;
The font-family property allows you to specify a list of preferred fonts, which are separated by commas. If the font name consists of several words, then the name should be enclosed in double quotes, for example:
The horizontal alignment of the text in the HTML document is specified by the
text-align property, which allows you to align the text on the right or left-hand side, and also set the text alignment to the width. The text-align property works only with block elements, aligning all the inline elements inside the block:
<body style="background-color: DarkGray; color: white;"> <h1 style="font-family: verdana;">Header</h1> <p style="font-size: 10px;">Very small text size.</p> <p style="text-align: right;">This text will be aligned to the right.</p> </body>Try it »