CSS Syntax – CSS Spells
- Tram Ho
1. CSS Syntax
We divide a CSS code into two parts that are:
selector: selector will point to objects (html) affected by the CSS declaration: CSS properties used to style the selector tag Example: set red background color and blue text for H1 tags
1 2 3 4 5 | <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> blue <span class="token punctuation">}</span> |
In there:
h1 is the selector of the background properties, the color inside the {} brackets is the declaration. Maybe about selector, I will present it in the next post, so I won’t talk much in this post. As for the declaration, you will notice that inside it is a list of properties and the value of that property (key: value), each attribute will be terminated by a semicolon (.
2. Where to write CSS?
The CSS syntax is probably still a bit vague, isn’t it? Then this part will be really interesting because we will do a realistic and intuitive demo.
We have three ways of writing CSS that are:
inline: write directly on the tag through the external style attribute: write a separate tag with the .css extension and then import it with the link tag. internal: written in the current html file and located in the style #inline tag In the HTML tag we create a style=”code css” attribute. #internal We will code inside <style type=”text/css”> code css </style>. #external This is a bit cumbersome because we need to create a style.css file (with the extension .css) and then import it into the HTML file via the link tag. Here is an example for this.
Step 1: Create a style.css file with the following content:
1 2 3 4 5 | <span class="token selector">div</span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Step 2: Create an index.html file at the same level as the style.css file with the following content:
1 2 3 | <span class="token tag"><span class="token punctuation"><</span>link <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span>div<span class="token punctuation">></span></span>HỌC CSS MIỄN PHÍ TẠI ABC.com<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> |
Then run it up, you will see the result is no different from the two examples above.
in the link tag there is an href tag, you will pass the path to your CSS file rel=”stylesheet” telling the browser this is a CSS file