What is CSS?
Why is it important to learn CSS?
- CSS is among the core languages of the open web and is standardized across Web browsers.
- It is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
- With an external stylesheet file, you can change the look of an entire website by changing just one file.
CSS Roadmap
- Selectors
CSS selectors define the pattern to select elements to which a set of CSS rules are then applied. It can be grouped into the following categories based on the type of elements they can select.
READ MORE..
READ MORE..
- Cascading and Inheritance
Cascading and Inheritance control how CSS is applied to HTML and how conflicts between style declarations are resolved.
READ MORE..
READ MORE..
- Box Model
The CSS box model is a container that contains multiple properties including borders, margin, padding, and the content itself.
READ MORE..
READ MORE..
- Position
The Position property sets how an element is positioned in a document. The
READ MORE..
top, right, bottom, and left properties determine the final location of positioned elements.
READ MORE..
- Display
The Display property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
READ MORE..
READ MORE..
- Flexbox
The Flex Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
READ MORE..
READ MORE..
- Grid
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
READ MORE..
READ MORE..
- Pseudo Elements
A pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example,Â
READ MORE..
::first-line can be used to change the font of the first line of a paragraph.
READ MORE..
- Pseudo Classes
A pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-classÂ
READ MORE..
:hover can be used to select a button when a user’s pointer hovers over the button and this selected button can then be styled.
READ MORE..
- Custom Properties
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document.
READ MORE..
READ MORE..
- Media Queries
Media queries allow you to apply CSS styles depending on a device’s general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width.
READ MORE..
READ MORE..
- Animations
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.
READ MORE..
READ MORE..
Above are the items which you should know as a beginner to get started with web development.
If you like this post, Do let me know in the comments.
Below are the resources to learn more about CSS.
Below are the resources to learn more about CSS.
