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