There are three ways to apply CSS to HTML:
- Inline Style- Using the style attribute in HTML elements
- Internal Style- Using the <style> element in the <head> section
- External Style- Using an external CSS file - <link rel="stylesheet" type="text/css" href="mystyle.css" />
1. Inline CSS:
To use inline styles, please use the style attribute in the relevant tag. The style attribute can contain any CSS property. Please see example below.Background Color Inline style:
<!DOCTYPE html>
<html>
<body style="background-color:red; ">
Thanks to visit our site. Please feel free to contact us.
</body>
</html>
Paragraph Inline style:
<!DOCTYPE html>
<html>
<body style="background-color:red; ">
<p style=”font-family:Arial, font-size:12px; color:#ff0000;”>
Thanks to visit our site.
Please feel free to contact us.</p>
</body>
</html>
Font Family, Font Color, Font Size Inline Style:
<!DOCTYPE html> <html> <body style="font-family:Arial; color:#ffffff"; font-size:12px> Thanks to visit our site. Please feel free to contact us. </body> </html>
2. Internal Style Sheet:
The internal style can be used before </head> tag by using <style> tag.<head>
<style type="text/css">
body { background-color:red; font-family:Arial; color:#ffffff"; font-size:12px }
p { color:yellow "; font-size:14px }
</style>
</head>
3. External Style:
External style is the ideal way to applied many pages from a single css file. Before using the external style in your HTML document, first you have to create a .CSS file.Use any text editor to create the file and save it in .css format.
CSS file with relevant properties.
/* CSS Document */
Body { margin:0; padding:0; background-color:red; font-family:Arial, color:#fff}
P { color:#fff; font-size:12px;}
h1 { font-size:18px; color:yellow;}
Let's see how to include the CSS file.
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
No comments:
Post a comment