Last updated on December 11th, 2023
What is the basic element in inline CSS?
Inline CSS means that the CSS code can be placed directly in the HTML tags.
The basic element in inline CSS code is the style attribute. This attribute can be used with almost any HTML tag.
The style attribute always has a property and a value.
What is the syntax in inline CSS?
The syntax of the style attribute is as follows:
style=”property:value;”
Together with the HTML tag, the syntax of the style attribute looks like this:
<tag style=”property:value;”> Some content here. </tag>
I.e. property and value are enclosed in quotation marks, with a colon between them. The command line ends with a semicolon.
You can set a few properties and values for one HTML tag like this:
style=”property:value; property:value; property:value;”
For example, to set red color for the text in a text paragraph, the code should be as follows:
<p style="color:red;"> This text is red. </p>
If you want, you can add a space between the property and the value, like this:
<p style="color: red;"> This text is red. </p>
The complete code will look like this:
<!DOCTYPE html> <html> <head> <title> My HTML test page </title> </head> <body> <p style="color: red;"> This text is red. </p> </body> </html>
Copy the code, paste it into Notepad and save the file for example as test.html Then double click on the file icon to see the result.
What are the basic properties of the CSS style attribute?
The basic and most used properties of the CSS style attribute are the following:
color: this property sets the color of the text inside an HTML tag.
background-color: sets the background color of an HTML element.
background-image: sets a background image of an HTML element.
font-family: sets the font of the text inside an HTML tag.
font-size: sets the text size inside an HTML tag.
font-weight: sets the weight of the font inside an HTML tag.
text-align: sets the horizontal alignment of the text inside an HTML tag.
border: sets the width, style, and color of an HTML element’s border.
margin: sets the space between an HTML element and other elements.
padding: sets the space between the HTML element’s content and the HTML element’s border.
width: sets the width of an HTML element.
height: sets the height of an HTML element.
display: sets how to be displayed the content inside an HTML element and whether or not to display the element at all.
Keep in mind that the properties of the style attribute are much more. Listed here are just a few of the most commonly used properties.
What are the basic values of the properties?
Note: For clarity, in all the examples below we will use the same HTML tag, namely: <div>. Note that many other HTML tags can be used in place of <div>, for example: <p>, <body>, <table>, <tr> and so on.
All properties of the style attribute have values. The basic values of the properties listed above are as follows:
1. Value of the color property.
The color in CSS can be set mostly by its name or by hexadecimal value (hex value).
There are hundreds of colors that can be specified in CSS by their names and thousands of color shades that can be specified by hexadecimal value. The primary colors as values of the color property are as follows:
name: black
hex value for black: #000000
name: white
hex value for white: #ffffff
name: red
hex value for red: #ff0000
name: blue
hex value for blue: #0000ff
name: green
hex value for green: #00ff00
name: yellow
hex value for yellow: #ffff00
Example:
<div style=”color: #ff0000;”> Some content here. </div>
(Sets red color of the text inside an HTML tag).
2. Value of the background-color property.
Same value as for the color property.
Example:
<div style=”background-color: #ff0000;”> Some content here. </div>
(Sets red background color of an HTML element).
3. Value of the background-image property.
The value of the background-image property is the URL (location) of the image that is set as the background of the HTML element.
Example:
<div style=”background-image: url(https://example.com/image.jpg);”> Some content here </div>
(Sets an image as the background of an HTML element).
4. Value of the font-family property.
The value of this property are font names. If you wish, you can set only one font. Usually, the web designer sets several fonts that are from the same font family. Fonts from the same family are similar in style. The main generic font families are serif (Times New Roman, Georgia) and sans-serif (Arial, Verdana).
Example:
<div style=”font-family: Arial, Verdana, sans-serif;”> Some content here. </div>
(Sets sans-serif fonts of the text inside an HTML tag).
5. Value of the font-size property.
Value for this property can be set in pixels (px). Typically, web page body text is 14-16 pixels in size and headings are 20-30 pixels in size.
Example:
<div style=”font-size: 14px;”> Some content here. </div>
(Sets the text in an HTML element to be 14 pixels in size).
Note: Do not add space between the value and the unit, in this case – between 14 and px. It should be 14px, not 14 px.
6. Value of the font-weight property.
The base value of the font-weight property is the word “bold”.
Example:
<div style=”font-weight: bold;”> Some content here. </div>
(Makes the text bold in an HTML element).
7. Value of the text-align property.
Basic values for the text-align property are: center, right, left.
Example:
<div style=”text-align: center;”> Some content here. </div>
(Centers the text horizontally inside an HTML tag).
8. Value of the border property.
There are many values of the border property. They set the width, the style and the color of the border of an HTML element.
Border width can be set in pixels.
Border style can be solid, dashed, double, and many more.
Border color can be set as a color name or as a hex value.
All these values can be set at once, in one declaration.
Example:
<div style=”border: 3px solid red;”> Some content here. </div>
(Sets the border of an HTML element to be red, solid and 3 pixels in size).
9. Value of the margin property.
Value for this property can be set in pixels (px). Also, the value can be set as “auto”.
Example:
<div style=”margin: 100px;”> Some content here. </div>
(Sets the space between an HTML element and other elements to be 100 pixels).
Note: the “auto” value is important if you want to center an HTML element.
Example:
<div style=”width: 50%; margin: auto;”> Some content here. </div>
(This is how to center an HTML element using CSS. In this case, the width of the HTML element will be 50% or half of the available space.)
10. Value of the padding property.
Value for this property can be set in pixels (px).
Example:
<div style=”padding: 10px;”> Some content here. </div>
(Sets the space between the HTML element’s content and the HTML element’s border to be 10 pixels).
11. Value of the width property.
Value for this property can be set in pixels (px) or in percentages.
Example:
<div style=”width: 50%;”> Some content here. </div>
(Sets the width of an HTML element to be 50 percent of the width of the screen or of the width of another HTML element in which the first element is placed.)
12. Value of the height property.
Value for this property can be set in pixels (px) or in percentages.
Example:
<div style=”height: 100px;”> Some content here. </div>
(Sets the height of an HTML element to be 100 pixels.)
13. Value of the display property.
Basic values for the display property are: inline, block, none.
Inline property arranges the content in an HTML element horizontally.
Block property arranges the content in an HTML element vertically.
None property not only hides but completely removes the element from the screen.
Example:
<div style=”display: none;”> Some content here. </div>
(Removes the element from the screen.)
Let’s set multiple of these properties to a single <div> tag, for example like this:
<!DOCTYPE html> <html> <head> <title> Inline CSS example </title> </head> <body> <h1 style="text-align: center;"> Inline CSS Example - Centered Title </h1> <div style="color: #ffffff; background-color: #000000; border: 5px solid #ff0000; font-weight: bold; padding: 10px; width: 50%; margin: auto;"> <p>The text is white and bold.</p> <p>The background is black.</p> <p>The border is red.</p> <p>The width of the element is half the screen.</p> <p>The element is centered.</p> </div> </body> </html>
Paste the above code into Notepad, save the page as inline-css.html for example and open it to see the result. If everything is OK, your page should look like this:
