Comprehensive Css Basics For Beginners:summary 01
1. CSS SYNTAX
p {
// css code goes here
}
From the example above, you can tell that a css syntax contain element being targeted and the rules or the css styles goes inside curly braces {}.
2. Including CSS into HTML file
<link href="style.css" rel="stylesheet" />
As a beginner, normally you place your css file right in the directory that has the html file. Looking at above code example there are two things to take to bank. Number one is href. href is nothing but a way to tell the html file where to file the css file. The second thing is rel ,this basically tells the relationship between html and css file. Do not worry it will always be rel="stylesheet"
3. In-file CSS Styling
Well, sometimes you want to write css inside your HTML file. But how do you achieve that? Like so.
<style>
p {
background:#113;
}
</style>
4. Inline CSS
When you want to write CSS within particular element. Then, this is how we do it
<body class="background-color:green"></body>
5. ELEMENT Selectors
Every element in HTML can be used as a selector. e.g
p {
background:red
}
h1 {
color:red
}
span {
background:blue;
}
//h1, h3, embed, figure, artice, etc
6. Class Selectors
Sometimes you need to reuse styles. In other words you might want to style several elements with a single block of code. That is where the class goes in.
.body-text {
color:blue
}
As with above example, any element with this class will always have its text color blue.
7. ID Selector
When you want to only style specific elements uniquely, then id is the best. It uniquely identifies the element.
#title {
color:blue
}
8. Universal Selector
As the name suggest, it selects everything
* {
color:blue
}
9. Descentant Selector
It scopes style to only work within the confines of the parent.
.body p {
}
In the above example, all p elements inside body class will be the only ones to be styled.
10. Font Family
This is used to set the font.
p {
font-family:Sans-serif
}
11. Font Weight
This is used to set the boldness of text
p {
font-weight:400;
}
12. Border Property
It sets the border for an element,
border: 2px solid red;
Here we are static 2px the width of the border, solid the type of border and finally red the color of the border.
13. width
To set the width of an element you can use width property
p {
width:200px;
}
14. Height
As the name suggest, it sets the height of the element
h1 {
height:400px;
}
15. Padding
This is used to set the place the space between the margin and the contents within the element being applied.
padding:10px;
it applies 10px padding to left, right, bottom and top all at once
16. Margin
p {
margin:20px
}
This one like padding applies space above the element to all sides.
17. Hover
This is a pseudo-class that is used to apply style whenever a mouse hovers on an element.
a:hover {
background:blue;
color:white
}
18. Focus Pseudo class
input::focus {
background:blue
}
This is a psudo-class that applies styles only when an element such as input or any other with tabindex attribute is focused.
19. Transition
Sometimes you want to make elements to slowly change state from one to another within a span of specific time. That is where transition comes in. e.g
button {
width:20px
transition:width 2s
}
button::hover {
width:200px
}
Looking at the example above, we are telling the browser to change the width of the element from 20px to 200px on hover within 2s.
20. Multiple Transitions
To have multiple transitions, this is all you need to do.
button {
transition: width 3s, color 1s
}
21. Position absolute
By default all elements are position relative. If you want to have an element to be position based on the relative parent and even stay on top of other elements, then absolute can be what you need to use
.dropdown {
position:absolute
}
22. Position Fixed
This will position the element only within the viewport height and with of the screen. Even when you scroll the element will still be intact on its position.
header {
position:fixed
}
23. Position Relative
If you want to set an element to be absolute to its parent then, you will have to set the parent as position relative.
.parent {
position:relative;
}
24. CSS SPECIFICITY
- classes takes more precedence over element selector
- id takes more precedence than class selectors
!importantoverrides specificity order