Youcef Madadi
Web and game development teacher
CSS
BASICS
CSS
Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Objective
- include a css file in html
- Write simple CSS rules
- Styling elements selected
- understanding box model
- Learning query selectors
- Learn the Dev tool of a browser
-
Css extension is simply .css
-
We can include the css file using Link tag
-
css file mainly contain a set of elements called rules
-
the rules contain attributes that describes the element that is meant to be styled.
-
Each attributes comes with key and value.
1. CSS Document
<link rel="stylesheet" href="css/style.css" />tag{
color: red;
}-
using tags
-
A rule affect more than one selector
-
Universal selector
-
Select Classes ( . ) , select Id ( # )
-
Nested elements
-
Pseudo classes
-
Pseudo elements
2. Selectors
div{
color: red;
}li,ul{
padding : 0;
}*{
color: white;
}.className , #IDName{
backgroud: red;
}.parent .son{
backgroud: yellow;
}div:hover{
backgroud: blue;
}div::first-line{
backgroud: purple;
}How does browser represent the tag element ?
2. The Box Model
How does browser represent the tag element ?
3. The Box Model
div{
border: 1px solid red;
}div{
padding: 10px;
}div{
background: green;
margin: 10px;
}
<div>this is an element</div>
How does browser represent the tag element ?
3. The Box Model
margin : 10px ;margin : 10px 0 10px 10px;margin-left: 10px;<div>this is an element</div>All directions
Specific directions
(top , right , bottom left )
Specific one direction
How to perfectly control width and height ?
4. The Box Sizing
.div {
border: 1px solid red;
padding: 10px;
background: green;
width: 100px;
box-sizing: content-box;
}
box-sizing : content-box
How to perfectly control width and height ?
4. The Box Sizing
.div {
border: 1px solid red;
padding: 10px;
background: green;
width: 100px;
box-sizing: border-box;
}
box-sizing : border-box
How to position your elements?
5. CSS Position
-
position : absolute
-
position : relative
-
position : fixed
-
position : sticky
How to Display your elements?
6. CSS Display
display : block
display : none
How to use flex Display ?
6. CSS Flex box
display : Flex
CSS
BASICS
ENDS
2. CSS BASICS
By Youcef Madadi
