HTML style refers to the use of CSS (Cascading Style Sheets) to style and format the content on a webpage. CSS allows you to control the layout, colors, fonts, spacing, and other visual aspects of HTML elements.
HTML Style attribute
Inline CSS
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style="color: red; font-size: 50px;">Sakalacode Inline CSS</p> </body> </html>
Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: Green;
font-family: Arial, sans-serif;
}
p {
color: navy;
font-size: 18px;
}
</style>
</head>
<body>
<h1>SakalaCode Heading Tag</h1>
<p>SakalaCode paragraph Tag.</p>
</body>
</html>
External CSS
<!DOCTYPE html> <html> <head> link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>SakalaCode HeadingTag</h1> <p>SakalaCode paragraph Tag.</p> </body> </html>
HTML CSS Properties
Create HTML Web page SakalaCode.html
<!DOCTYPE html> <html> <head> link rel="stylesheet" type="text/css" href="styles.css"> <title>HTML Styled Page</title> </head> <body> <h1>SakalaCode Heding Tag</h1> <p>HTML paragraph Tag</p> <a href="https://sakalacode.com">Click here</a> </body> </html>
styles.css
body {
background-color: #f0f0f0;
font-family: Verdana, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
font-size: 18px;
margin: 24px;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}