|
31 | 31 |
|
32 | 32 | There are three ways to include (otherwise known as *referencing*) CSS in an HTML page. |
33 | 33 |
|
34 | | -**INLINE** - can be added to any HTML element using the `style` *attribute*. |
| 34 | +###**INLINE** |
| 35 | +Can be added to any HTML element using the `style` *attribute*. |
35 | 36 |
|
36 | 37 | ``` |
37 | 38 | <p style="color: blue;">I'm writing CSS!</p> |
38 | 39 | ``` |
39 | 40 |
|
40 | | -This technique should be avoided but it's good to know how it works in case you encounter it. |
| 41 | +This technique is not as common because it's harder to maintain but it's good to know how it works, just in case. |
41 | 42 |
|
42 | | -**INTERNAL** - uses `<style>` and is included in the `<head>` element. |
| 43 | +###INTERNAL |
| 44 | +Uses `<style>` and is included in the `<head>` element. |
43 | 45 |
|
44 | 46 | ``` |
45 | 47 | <head> |
|
57 | 59 |
|
58 | 60 | This method is preferred over *inline* css, however it is still inefficient because if you had multiple web pages, the style block and any revisions would have to be replicated on every single page. |
59 | 61 |
|
60 | | -The **external** method is most widely used. Refer back to the original presentation [here](../index.html#slide40). |
| 62 | +###EXTERNAL |
| 63 | +CSS is written in a separate stylesheet file. |
| 64 | + |
| 65 | +The **external** method is most widely used. A separate file with a `.css` extension is linked to the HTML file. This method is recommended in most cases because it separates the CSS from the HTML document. The link to the stylesheet is referenced in the `<head>` on any page where these styles need to be included. Only the CSS file needs to be updated rather than the CSS block on every single page. |
| 66 | + |
| 67 | +Referenced in the head element with a `<link>` tag and two **attributes**, `rel` and `href`. Just like creating links, the value of the `href` points to the location of the stylesheet. |
| 68 | + |
| 69 | +Though it is not required, css files are often saved in a css folder for organization, so make sure the file path points to the appropriate directory. |
| 70 | + |
| 71 | +The `rel` attribute describes the relationship. |
| 72 | + |
| 73 | +``` |
| 74 | +<head> |
| 75 | + <title>Page Title</title> |
| 76 | + <meta charset="utf-8"> |
| 77 | + <link rel="stylesheet" href="css/style.css"> |
| 78 | +</head> |
| 79 | +``` |
| 80 | + |
| 81 | +**Pro tip!** Sublime Text shortcut: type "link" + tab key. Ta da! |
61 | 82 | </section> |
62 | 83 | </main><!-- cls main section --> |
63 | 84 |
|
|
0 commit comments