Website lesson 3: moving to CSS
Welcome back, guys!
Hopefully you've had enough time to get known with HTML tags.
Sum up
- Object = tag (menu -> links -> tag )
- HTML - content you fill the website with
- Blocks (div) - independent rectangles
- Not similar objects - attribute class is needed
- Tags = containers, like variables in programming
If you think that that is the end of our work with HTML, you are wrong. While moving to CSS, you will find out that you need more classes or to change some tags.
You can check my HTML code (for my template)
Moving to CSS
You already have an empty file for CSS, connected with HTML. That is the place to write the same tags as in HTML, but for your style. Now you see only blocks of information that are not structured. Remember, that it is not a problem to look through communities to check the meaning of tags. Our goal is to structure the idea.
Structure
Tag <style> is like tag <body> in HTML. Style - the part where all tags connected to style are written.
Before writing tags for any object, we need to initialize the object. If it is an object (any tag), then we make
any tag { ... }
Example: a { ... } or h6 { ... }.
That means that all tags for style written there are for every tag a or for every tag h6 in your whole code.
But what about classes?
if you want to make a style not for the whole tag, but a specific one, you need a class name instead of a tag name, but with "."
If we have <div class="header"></div>, then for class header we write .header { ... }
Position
You look at your template and you see the main problem - wrong position of objects.
We have tags margin and padding
What's the difference?
If you are a box, then
- Padding - is a part of you. If you put cereal in the box - it is part of you.
- Margin - is not a part of you. If the box is closed and you put cereal, it is still not a part of you, because it is out of the box.
Or with simple words, padding - inside, margin - outside.
So they can be left, right, top and bottom.
Try to imagine which one you need and write for every tag or class. So, that is the time when you can understand that more objects need classes (when you want to move smth without the whole block).
How can I know, how much do you need to move?
For that question, you have your template, where you can see which width and height of objects you have and what is their position.
Width, height and align
The main thing you have to assign for your body - width, height and position. As in my template:
body {
width: 900px;
height: 1500px;
margin: auto;
}
What is margin: auto;? You see the width of my website is not for the full screen, moreover, it is in the centre of your screen. So this way you make it to be in the center.
Float
You can see that your objects are vertically placed in blocks (div). But at the same time, in my template, for example, we have a horizontal header (objects are horizontally placed). How to make horizontal flow around objects?
Float:
- Select object orientation - horizontal or vertical
- Check from which side the objects are flown - on the right or on the left
So the values of float are: right, left, none.
Conclusion
The hardest part is to assign the right position and float. The rest is too easy (color, font and so on).
I give you 4 days to try it by yourself. The next lesson will be dedicated to other tags and especially animation. By the way, I will share my CSS solution.
If you have any questions, write to me anytime!
Good luck with your job!
Written by Yuri Filatov, IT Expert at Andersen