How to add CSS
When the browser
reads a style sheet, it will format the document according to three ways
- External
style sheet
An external
style sheet is ideal when the style is applied to many pages. when an external
style sheet you can change the look of the entire website by changing one file.
Each page must link to the style sheet with the <link> tag. The
<link> tag goes inside the head section <head>
<head>
<link rel="stylesheet" href="css/style.css"/>
</head>
An external
style sheet can be written in any text editor. The file should not contain any HTML
tags. Your style sheet should be saved with a .css extension.
Example:
p{
width: fit-content;
min-width: 100%;
background-color: #212121;
width: 100% !important;
overflow-x: scroll !important;
position: relative;
padding: 1rem 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
Do not leave
spaces between the property value and unit (such as margin-bottom: 1px;). Correct way: margin-bottom: 1px;
- Internal style sheet
An internal
style sheet should be used when a single document has a unique style. You
define internal style in the head section of the HTML page, by using the <style>
tag.
<head>
<style type="text/css">
p {
width: fit-content;
min-width: 100%;
background-color: #212121;
width: 100% !important;
overflow-x: scroll !important;
position: relative;
padding: 1rem 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
</style>
</head>
- Inline
style sheet
An inline style
loses many of the advantages of a style sheet by mixing content with presentation.
Use this method in a restricted or infrequent manner. To use inline styles, you
use the style attribute in the relevant tag. The style attribute can contain
any CSS property.
<p style="color:red;
text-align:center" >Hello World!! This is HTML paragraph</p>
Leave a comment
No Cmomments yet