Adding cascading style sheets—CSS
Cascading style sheets are the way we define the presentation of the HTML pages, from font and colors to the layout of your page. HTML documents may contain style sheet rules directly in them or they may import style sheets.
There are THREE ways of setting style sheets to your webpage:
- External style sheet
- Internal style sheet
- Inline style
External style
An external style sheet is a separate file where you can define all the styles that you want to use on your website. This is ideal when you want the same style on multiple pages. An external style sheet makes it is easier to to change the look of the entire website and reuse your CSS. You can make drastic changes to your web pages with just a few changes in a single CSS file.
For example code in HTML to link to CSS file
<head>
<link rel="stylesheet" type="text/css" href="css/eg-css-file.css">
</head>
In the example below you can see the file paths, the CSS and HTML files open and what the output is.
Internal style sheet
An internal style sheet is a section on a HTML page that contains style definitions. this type of style sheet should be used when a single document has a unique style. They are defined by using the <style></style>
tags between the <head>
area of the document.
For example
Inline style
Inline Style refers to the style sheet information being written inside an element. This is useful when you want to apply a simple style only once. This should be used sparingly.
It does override CSS written externally and internally.
For example
What happens when you add an internal style sheet as well to change h3 elements?
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F