Learn Css | a complete guid to learn css
Let's see, how you can learn CSS from basic to advanced (step by step).
First of all, let's understand the basic term.
What is CSS & How it works:
CSS is the language we use to style a Web page. CSS stands for Cascading Style Sheets it describes how HTML elements are to be displayed on the screen, paper, or in other media
Stage 1 : CSS BASICS
1. Adding CSS:There are three ways of inserting a style sheet:
- External CSS
- Internal CSS
- Inline CSS
The only difference between them is that "id" is unique in a page and can only apply to at most one element, while "class" selector can apply to multiple elements.
3. Display Property:
The display CSS property sets whether an
element is treated as a block or inline element
and the layout used for its children.
4. Fonts and other formatting properties:
change the text size, color, style, and more.
Stage 2 : ELEMENTS ARRANGEMENT
1. Float and Clear:
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared element and on which side.
2. Positioning:
The position property specifies the type of
positioning method used fbr an element (static, relative, fixed, absolute or sticky).
3. Box Sizing:
The CSS box-sizing property allows us to include the padding and border in an element's total width and height.
Stage 3 : LAYOUT
1. Flexbox:CSS Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout. It makes our life easier to design and build responsive web pages without having to use tricky hacks and a lot of float and position properties in our CSS code.
2. Grid:
CSS Grid Layout, is a two-dimensional grid-based
layout system with rows and columns, making it easier to design web pages without having to use
floats and positioning. Like tables, grid layout
allows us to align elements into columns and
rows.
Stage 4 : RESPONSIVE
1. Text Effect:within an HTML document. The properties of the text effect help us to make the text attractive
and clear.
page. The viewport varies with the device and
will be smaller on a mobile phone than on a
computer screen.
3. Media Queries:
Media queries are a key part of responsive web
design, as they allow you to create different layouts depending on the size of the viewport.
Stake 5 : ADVANCED
1. Transition and Animation:CSS3 animations allow you to change the appearance and behavior of an element in numerous keyframes. Transitions allow you to go from one state to another. whereas animations allowyou to establish many transition points based on distinct keyframes.
2. Transform:
The transform property applies a 2D or 3D
transformation to an element. This property
allows you to rotate, scale, move, skew, etc., elements.
3. Shadows and Gradient:
CSS gradients let you display smooth transitions between two or more specified colors.
CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas.
IS IT THE END?
No, CSS doesn't stop here. It's a big topic, but
you don't have to know everything about CSS.
You just need to master the bare minimum of
features that all websites require, and these stages will enough.
WHAT'S NEXT?
Everything depends on your Practice. The more
you practice, the more you learn.
Here are some of the free resources that can help
you while learning: