Css thats it. In this post your are going to learn css from basic to advance and will create a small website layout and let me tell you one thing that I am to exited and let's complete this.
create an index.html file and paste this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css thats it</title>
<style>
div {
background-color: red;
}
</style>
</head>
<body>
<div>let's learn css</div>
</body>
</html>
open this with open with live server and you will see
congras you just added css in your html file.
Let me explain you in breif as you can see thier is a div and inside div a content with let's learn css and above you can see there is a style tag with writtern background color red this means select all the div tag and add background color property with red value.
This is a example of internal css now create a file name style.css and lets cut the div background color red and paste inside style.css file and add this style inside index.html file
<link rel="stylesheet" href="style.css">
the above code tell that link the style.css file with this and add all the css to this index.html this is called external css.By doing this you can use this file in any other html file also and it's also seprate the css file with html file according to some user this increase thier redibility of code.
Now let's learn basic i want your attention on this
div {
background-color: red;
}
the above div is called selector and below are called declaration.Declaration comes in key-value pair in above example background-color is key and red is a value. if you want to use more than one declaration you have to seprate those with semi-colon ;
div {
background-color: red;
color: #ffffff;
}
as you can see above we written two declaration both are seprated by semi-colon and let's learn some basic or most use property in css like
div {
background-color: red;
color: #ffffff;
height: 200px;
width: 1000px;
}
as u see we set height and width of our div tag by mentioning height and width by 200px and 1000px respectively.
let's suppose i want to center the content then i will use text-align: center
div {
background-color: red;
color: #ffffff;
height: 200px;
width: 1000px;
text-align: center;
}
most importantly i want your focus on this that is called box model every element has a box like structure means every element has margin,border,padding and content let's clearify this simple
margin - it is a space between two element.
border - this is a border of that element.
padding - it is a space between border and content of element.
content - this is a actual content of element like text,image etc
body {
background-color: aqua;
}
div {
background-color: rgb(232, 59, 59);
margin: 10px;
border: 10px solid rgb(80, 249, 80);
padding: 10px;
}
below you can clearly see that i have given body background color aqua and given div margin 10px this means div shifted 10px from left top right and bottom of the body tag
and given 10px border with green color this means border of the div is 10px and padding of div is 10px means space between the content and border is 10px.The div is taking whole space because div are block elements. just type your self and you will get this 100%.
let create a yellow circle. just pause your reading can you create one you just need one declaration.
body {
background-color: aqua;
}
div {
border-radius: 50%;
background-color: rgb(140, 140, 248);
height: 200px;
width: 200px;
}
we just created a circle with the help border radius buy using border radius you can create very unique like style to your div.
now this is going to intresting suppose there are many div or many element in your html file and you want to select only one specific element so how would you do that buy using.
ID selector means just give id to your element and select that element buy usind # symbol like this
<h1 id="heading">Today we are learing css</h1>
#heading {
background-color: violet;
}
and suppose there are buch of element where you want to use one kind of style to all those element but didn't want to repeat the style so for this most use and most useful class selector is use
so we select those with the help of . symbol and use class property like this
<body>
<div>
<p class="para">
we will learn about css
</p>
</div>
<div>
<p class="para">
we will improve ourself
</p>
</div>
<div>
<p class="para">
we are working on ourself
</p>
</div>
<div>
<p class="para">
let's see how far we have come
</p>
</div>
</body>
.para {
background-color: violet;
}
as you can see we selected multiple element with thie help of .symbol and given violet color to all of them.
let's learn most important and my fav part of the css buy using this technique you can create most of the layout can center any content to your div basically you will upgrade your self in css
so let's learn flex box layout.
If you want to use flex you need to select the parent container and give the declaration property as display:flex; and this will make all those children in row as you can see in this example.
<body>
<div class="container">
<div class="item">This is first div</div>
<div class="item">This is second div</div>
<div class="item">This is third div</div>
<div class="item">This is fourth div</div>
</div>
</body>
.container {
display: flex;
}
.item {
background-color: aqua;
margin-left: 10px;
}
Suppose you want to center the item of the container then just add align-item center and justify-content center to your parent element and this will center those items
Similarly you can adjust those item to the right side buy using align-item right this will align those in right side.
now let's create a skeleton of the website with the help of our current knowledge
see this below image and give it a try you can create this easily.
let me guide you
- first create your layout
- second add flex
- give appropiate height and width to your layout
if you yourself have created this then congratulation if not then don't worry we can create this easily
<body>
<header class="header">header</header>
<div class="container">
<aside class="sidebar">Sidebar</aside>
<main class="main">Main</main>
</div>
<footer class="footer">footer</footer>
</body>
as you can see the inside body tag their is header tag, div tag and a footer tag, inside div tag with container as a class we have two tag name aside and main
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
}
.header {
background-color: red;
}
.sidebar {
height: 85vh;
background-color: greenyellow;
}
.footer {
background-color: aquamarine;
}
.main {
background-color: rgb(96, 253, 253);
flex: auto;
}
first of all you are able to see those margin 0 and padding 0 i write those for implementing all the margin to 0 and padding 0 and If you set box-sizing: border-box; on an element, the padding and border are included in the calculation of the width and height
next you can see i have given container flex which means both aside and main in one line i have give aside a height and main flex:auto which means main will take all the available space in the div
That's it we have cover most of the css part now just need some more practise and start creating some awesome project.
Thankyou for reading this long.
I would be very happy if you type what do you think about this post would love to hear all of you
Top comments (0)