Flexbox
The main purpose of flexbox is to manage space, distribute space properly to show in a dynamic way. The flexbox is also known as flex layout. This is also used to align content in a container.
The main part of using flexbox is the best way to proper use of space. Where it will help to respond with devices sizes.
Before using flexbox we must have a clear concept about flexbox and its all properties.
There are two things available in flexbox which are-
- Flex container
- Flex items
To active flex functionality for inside items, we must use display: flex CSS property.
CSS Variable
CSS variable looks like other programming language variables. We can use CSS variables to make our style more dynamic and effective. We can set a color or font size or any other styles using CSS variables that will help us to change anytime with a few clicks. It actually used to set global style. Where one change affects all styles.
Pseudo Elements
Pseudo-elements are used to provide extra functionality or affect to an element. In short, we can say that A CSS pseudo-element is used to style specified parts of an element.
Where we can use these Pseudo Elements:
- To style the first letter of the word, first-line, or a specific word of a paragraph or title.
- To set extra words of text before or after a word or a sentence.
.info-bar::before {
content: url(smiley.gif);
}
Image Sprites
Image Sprites is a collection of images where lots of images are put into a single image.
Why we should use Image Sprites
- To reduce load time in a website.
- To get all images in a single image
#something {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
CSS Box Model
While there is a question about design and layout the Box Model comes up. This is like a wrapper of HTML elements. CSS Box Model consists of Margin, Border, Padding, and Content.
A short explanation of different parts:
- Content: Where text, images, videos appear.
- Padding: It creates some spaces around the content.
- Border: Border takes parts around the padding.
- Margin: It is also like padding. Which takes some spaces outside the border.
< div >
< p >This is something< /p >
< /div >
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Top comments (0)