CSS, or Cascading Styles Sheets, is a way to style HTML.
There are three ways to apply CSS to HTML:
Background Color Inline style:
Paragraph Inline style:
Font Family, Font Color, Font Size Inline Style:
Use any text editor to create the file and save it in .css format.
CSS file with relevant properties.
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
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