Styles tell your HTML document what to change about its appearance and there are three different ways to implement different styles in your HTML document. The first way is through external CSS. External CSS is made through a seperate document (as the name implies) in a 'stylesheet', which most people tend to name 'style.css'. People using external CSS have to link the CSS document to the HTML document. This is done by using the 'link' tag in the head of your HTML document, displayed as such: <link rel="stylesheet" type="text/css" href="style.css"/>. The 'rel' determines the relation between the tag and the 'href', and the 'type' determines what type of document the document will be typed in. The example below demonstrates changing the text in a 'p' tag to red.
Similar to external CSS, it is typed in the same fashion, however, the code this time is in the HTML document, rather than a CSS document. This is created through the HTML tag: 'style'. The style element is located in the head area of the document and the code within is typed as how it would be typed in an external CSS document. The example below demonstrates changing the text in a 'p' tag to red.
Inline CSS is (for the most part) very differently made as compared to the other two ways of implementing style into an HTML document. Rather than using an external document or the style tag, it rather uses the style attribute, as shown in the example below.
All the styles in a page have an order of priority; Number 1 being more important than Number 2 and Number 2 being more important than Number 3:
So if an external style says that 'p' will be blue, an internal style says that 'p' will be yellow and an inline style says that 'p' will be red, then 'p' will be red, as inline takes priority and will override internal and external styles.
©{{CodeIt}}School 2023
