#css
There are three ways to apply CSS to HTML. Each method has its strengths and weaknesses, so choose the one that works best for your situation.
- Inline Style Sheet
How to put CSS code in the style property of an HTML tag. - Internal Style Sheet
How to put CSS code inside <style> and </ style> in an HTML document. - Linking Style Sheet
How to create a separate CSS file and associate it with an HTML document.
Inline Style Sheet
Inline Style Sheet is a method to put CSS code in the style property of HTML tag and apply it. Here's a simple example:
<p style="color: blue">Lorem ipsum dolor.</p>That tag (p in the code above) becomes the selector, and the CSS code contains only attributes and values. Therefore, it has the disadvantage that it has limited decoration and cannot be reused.
Internal Style Sheet
An Internal Style Sheet is a way to put a style code inside an HTML document. Put the CSS code inside <style> and </ style>. For example, if you put the following code in an HTML document, all h1 elements in the document will be blue.
<style>
h1 {
color: blue;
}
</style>The <style> tag is usually placed between <head> and </ head>, but it can be placed anywhere in the HTML document.
This method has the advantage that you can decorate multiple elements in an HTML document at once, but it has the disadvantage that it cannot be applied to another HTML document.
Linking Style Sheet
Link stylesheets are a way to create separate CSS files and associate them with HTML documents. For example, if you want all h1 elements to be red, create a style.css file with the following content: (The extension of the CSS file is css.)
h1 {
color: red;
}Add the following code to the HTML document you want to apply.
<link rel="stylesheet" href="style.css">The above code is based on the assumption that the HTML and CSS files are in the same folder, and the path needs to be changed appropriately. For example, if you have a css folder in a folder with HTML documents and you have a style.css file in it, do the following:
<link rel="stylesheet" href="css/style.css">The advantage of this method is that it can be used for multiple HTML documents. Just link to the document you want to apply style.css with the <link> tag.
'CSS' 카테고리의 다른 글
| [CSS] CSS / Basics /! Important (0) | 2022.07.28 |
|---|---|
| [CSS] CSS / Basics / Grammar (0) | 2022.07.27 |
| [CSS] table-layout / fixed table size (0) | 2022.07.27 |
| [CSS] Switching transition properties such as transition animation (0) | 2022.07.25 |
| [CSS] animation effect (@keyframes) (0) | 2022.07.25 |