5 Useful CSS Tricks For Beginners That You Should Know (2023)
5 Easy CSS Tricks for Beginners #css #webdesign #webdevelopment
In this video, I will show you some of the best CSS tricks for beginners, These 5 tricks and tips are very essential for beginners, so let's get started.
1. Centering an element vertically and horizontally :
There are many ways to center an element or a div in CSS, but the easiest way has to be using the flexbox property. Now it doesn't matter whether you know how to use flexbox or not, just follow along, let's say I want to center a div, So what I will do is add a div inside another div. So i have added some basic CSS to the inner div.Now let's add the flexbox to the parent div,
display: flex;
justify-content: center; This will center the div or element horizontally
align-items: center; This will center the div or element Vertically, But you have to provide a height to make it work.
height:600px;
You have successfully centered the div (horizontally and vertically), one thing to remember is that you need to add the flexbox to the parent or outer div in order to center the child. With flexbox, you can center almost anything in CSS.
2. Resetting some default values :
Some browsers come with predefined margin and padding for each element, Therefore I would recommend you set the margin and the padding property to 0 as shown. You can also set max-width: 100%, and overflow-x: hidden. This will help you avoid many layout problems. In case you don't know, The asterisk (*) is the universal selector for CSS and it allows you to select all HTML elements.
3. Single-line property declarations or Shorthand CSS :
Single-line property declarations allow us to do more with less code, It also helps you to write cleaner code, Let's take an example :
if you want to add a background image, one way to do it is this -
background-image: url('demo.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
But the easier and more efficient way to do this is by using the background property which is a single-line property declaration or shorthand property for all of the properties given above.
background: url('image.jpg') no-repeat fixed center, We have many shorthand properties in CSS. Make sure to check them out.
4. Overriding all styles using !important :
The ! important property lets you override all styling rules for any specific element.
Let us see an example :
So here i have a div, and i have set the background to blue, Now let's override the background styling using the !important Property. I will be changing the div background to let's say black, But the catch is that i have set the background of the div three times (including green, black and blue). Now, the background color will not become black unless we use the !important property, so let's add !important.
Note: Remember one thing "Please don't overuse the !important property." And i know this is a vague example but you get the point.
5. Child Elements (nth-child) :
You can apply styling to specific child elements by using the nth-child() Selector, It is fairly to use once you get a hold of it. The nth-child selector can act as a lifesaver when you have too many child elements. At least it's better than you giving weird names for classes and IDs.
Let's see an example,
here i have five divs and let's say i want to select and style the third div, so rather than giving it a class or an id, i will use the nth-child selector to select the third div, and to do that
div:nth-child(3){
background:blue;
border:1px solid #000;
}
Here, the number inside the parentheses represents the child.
I tried to keep the explanation to a minimum as it will take very long for me to explain all of them in one video.And if you want to learn more about them,then feel free to check the official docs (https://developer.mozilla.org/en-US/d...) or W3schools.
Chapters :
0:00 A brief intro
0:09 Trick 1
1:19 Trick 2
1:52 Trick 2
2:45 Trick 2
3:40 Trick 2
4:46 Outro