How to Add CSS
| Name | Example | Description |
|---|---|---|
| External | <link rel="stylesheet" href="mystyle.css"> | With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section. |
| Internal |
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
|
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section. |
| Inline |
<h1 style="color:blue;text-align:center;"> This is a heading </h1> <p style="color:red;"> This is a paragraph. </p> |
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. |
Specificity
| Selector | Example | Name | Description |
|---|---|---|---|
| #id | #firstname{} | ID selector | Selects the element with id="firstname"
ID selector can be used one single time. |
| element.class | p.intro{} | Element selector | Selects only <p> elements with class="intro" |
| .class | .intro{} | Class selector | Selects all elements with class="intro"
Class selector can be used multiple times. |
| element,element,... | div, p{} | Element selector | Selects all <div> elements and all <p> elements |
| element | p{} | Element selector | Selects all <p> elements |
| * | *{} | The CSS Universal selector | Selects all HTML elements on the page. |
CSS Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
| Name | Example | Description |
|---|---|---|
| CSS Background Color | background-color:DodgerBlue; | You can set the background color for HTML elements. |
| CSS Text Color | color:Tomato; | You can set the color of text |
| CSS Border Color | border:2px solid Violet; | You can set the color of borders. |
| CSS Color Values
RGB HEX HSL |
color: rgb(255, 99, 71); color: #ff6347; color: hsl(9, 100%, 64%); |
In CSS, colors can also be specified using RGB values, HEX values, HSL values.
Same as color name "Tomato" |
| CSS Color Values with transparency
RGBA HSLA |
color: rgba(255, 99, 71, 0.5) color: hsla(9, 100%, 64%, 0.5) |
In CSS, colors can also be specified using RGBA values, and HSLA values:
Same as color name "Tomato", but 50% transparent. |
CSS Border Style
The border-style property specifies what kind of border to display.
| Name | Example | Description |
|---|---|---|
| dotted | p.dotted {border-style: dotted;} |
Defines a dotted border |
| dashed | p.dashed {border-style: dashed;} |
Defines a dashed border |
| solid | p.solid {border-style: solid;} |
Defines a solid border |
| double | p.double {border-style: double;} |
Defines a double border |
| groove | p.groove {border-style: groove;} |
Defines a 3D grooved border. The effect depends on the border-color value |
| ridge | p.ridge {border-style: ridge;} |
Defines a 3D ridged border. The effect depends on the border-color value |
| inset | p.inset {border-style: inset;} |
Defines a 3D inset border. The effect depends on the border-color value |
| outset | p.outset {border-style: outset;} |
Defines a 3D outset border. The effect depends on the border-color value |
| none | p.none {border-style: none;} |
Defines no border |
| hidden | p.hidden {border-style: hidden;} |