The ABCs of CSS 3: A Beginner’s Journey through Basic Properties

Photo by Nick Karvounis on Unsplash

This is the third blog for learning ABCs of CSS. Earlier, we discussed topics which acts as core for learning basic CSS. Today, we will be discussing similar core concepts of CSS.

CSS Overflow

It defines how the content is displayed when the size of the content exceeds the dimensions of the element. It is usually used when the content exceeds the height or width of the element. Types of CSS Overflow are:

1. visible : It allows the content to overflow and be visible in the web page even if it overlaps on the other elements
2. hidden : It hides the overflowing content and makes it invisible when content exceeds the given dimensions.
3. scroll : It adds scrollbar to the element and make the exceeding content scrollable. If content doesn’t exceed the dimensions, scrollbar will not be disabled but if it does, viewing is possible with scroll.
4. auto : It is similar to the scroll but scrollbar doesn’t show up when there is no exceeding of the content.

CSS Positioning

This property of CSS allows you to define and determine the layout and position of the element in the webpage. It can have several values, like:

1. static : This is the default position value of the element and goes with the normal flow of positioning.
2. relative : When this value is used, the elements are positioned relative to their actual position. Values like top, right, left and bottom can be used to position the element.
3. absolute : This positions the element relative to the closest positioned ancestor, but if there is no such ancestor, it positions the element respective to the viewport. Values like top, right, left and bottom can be used to position the element.
4. fixed : This value positions the element in a fixed position relative to the viewport and remains at the same position even if the webpage is scrolled.

CSS Flexbox

Flexbox in CSS provide us with flexible and easy way to manage and align the contents in desired layout. It is mostly used for responsiveness on the website.

1. flex : As discussed in the display section in the earlier blog, display of the element must be flex to use flexbox.
2. flex-direction : It defines the direction of the main axis of the flex body and defines how the content is laid out, either in row or column.
3. justify-content : It defines how content along the main axis is aligned and controls the distribution of space between the content.
4. align-items : It defines how content is aligned and spaced along the cross-axis(perpendicular to the main axis).
5. flex-grow : It defines how the flex items grow to cover up the available space.
6. flex-shrink : It defines how the flex items shrink to cover up the available space.
7. flex-basis : It defines how the size of flex items along the main axis.
8. flex-wrap : It defines how the flex items are wrapped in major or cross axis when it exceeds the container’s width or height.

This ends the third blog of the basics of learning CSS for Beginners.