3 Minutes: Chapter 2 CSS
_04 What is CSS?
A style sheet is a language that describes how a document written in HTML is actually displayed. Imagine you have drawn a puppy using HTML.
The language that allows you to describe how long its tail is, how small its head is, or what its body size is—that is CSS .
In other words, if you draw a skeleton and put clothes on it, HTML is the skeleton, and CSS is what adds properties to those clothes, such as their size or color.
Let's summarize. The roles of HTML and CSS are as follows:
HTML
- Puts clothes on the skeleton.
CSS
- Tells us what the clothes look like.
Now that you know what CSS does, let's learn the basics of CSS.
How to use CSS
- Write a css file and reference it in an HTML file.
- Insert css directly into an HTML file.
- Apply styles using Javascript .
Of course, there may be other methods. However, these are the most commonly used ways. With these methods, you can make your HTML look however you want.
Let's look at an example.
Consider the following HTML code:
<
html
>
<
head
>
</
head
>
<
body
>
<
p
>
Hello
</
p
>
</
body
>
</
html
>
In the HTML source above, what if you want the text 'Hello' to appear in red? How would you express that?
If you include the following style code, you will see a red 'Hello'.
<
html
>
<
head
>
<
style
>
.red_hello
{
color
:
red
;
}
</
style
>
</
head
>
<
body
>
<
p
class
=
"red_hello"
>
Hello
</
p
>
</
body
>
</
html
>
Explaining CSS in detail would take more than 3 minutes. Therefore, instead of giving a long-winded explanation, I will summarize it for you.
Using CSS in HTML code
- Create a class and apply it to an HTML tag.
- Insert the style directly into an HTML tag.
There are two ways.
The first is the method I used above. Then, what is the method for inserting it directly? I will show you how to insert a style directly through the following example.
... middle section omitted ...
<
p
style
=
"color:red;"
>
Hello
</
p
>
... middle section omitted ...
By using it this way, you can apply styles directly to the tag without needing a class.
So, why use classes? If you want certain words to be red, and you write it directly every time, you have to insert the style into the tag one by one. However, by using the method I used first, you have the advantage of being able to apply a style once to tags that 'have the corresponding class or id'.
Also, if you organize styles into 'classes', you can later create tags that combine multiple classes.
CSS Nesting
- Create a btn class with a font size of 20pt.
- .btn { font-size:20pt; }
- Create a btn-danger class with a text color of red.
- .btn-danger { color:red; }
If you create and store multiple classes like above, and add the classes you want to use into the tag, they will be applied in a nested fashion. If there are identical properties in the classes, the properties of the class applied later will overwrite the previous ones.
Below is an application example.
<
div
class
=
"btn"
>
Big Button
<
div
>
<
div
class
=
"btn-danger"
>
Red Button
<
div
>
<
div
class
=
"btn btn-danger"
>
Big Red Button
<
div
>
As such, you can use styles to represent HTML tags however you want.
Summary
- Styles define how to represent HTML.
- Styles are applied in a nested manner through classes. However, if properties are the same, the property of the last class is applied.
- Styles can also be applied directly to tags.
3-Minute Spoilers
- Okay, we've put colored clothes on it now. How would we go about making this thing move?