Inline css
In this aticle we are going to learn about inline style sheets, how we can add styles on each html element to style it without affecting other elements and webpages and can only affect a specific element.
We learnt about css in general, fonts, colors, background colors, borders, margin, padding, float, width, minimum width, maximum width, height, minimum height, maximum height and scroll so, we will be focusing on inline style sheet.
Inline css
Inline css is a way of adding style sheets in webpages that cannot affect other pages by adding the style in each element of webpage. The style is directly coded in html element to be styled.
Let us create html file with inline style sheet, copy and paste below code.
<!DOCTYPE html>
<head>
</head>
<body>
<div style="background: yellow; color: red;">This is a div element with inline css applied.</div>
</body>
</html>
So, we should have the following results.
The style sheet is coded directly in the html div element, and the style can only take effect on one element of one webpage.
Let us create another html file with inline style sheet, copy and paste below code.
<!DOCTYPE html>
<head>
</head>
<body>
<div style="background: red; color: yellow;">This is a div element with inline css applied.</div>
</body>
</html>
So, we should have the following results.
We can add any Cascading Style Sheets properties to style each html element by using inline css.