Website lesson 3: moving to CSS
Tags: html, css, tutorial, beginners
Published: 2021-05-25 06:56:12

Welcome back, guys! 
Hopefully you've had enough time to get known with HTML tags.

##Sum up
- Object = tag (menu -> links -> tag `<a>`)
- 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](https://codeshare.io/5XQeqj) (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 structure.

Remember, that it is not a problem to look through [communities](https://way2tutorial.com/css/tutorial.php) 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 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 you whole code.

**But what about classes?**
if you want to make style not for the whole tag, but a specific one, you need class name instead of a tag name, but with "."
If we have `<div class="header"></div>`, then for class _header_ we write `.header { ... }` (or simply 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 the 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, cause 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 places 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 assing the right position and float. The rest part 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.

Check my website for more information 
If you have any questions, write to me anytime!
Good luck with your job!