CSS - Cascading Style Sheets

Overview

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

CSS is among the core languages of the open web and is standardized across Web browsers according to W3C specifications. Previously, the development of various parts of CSS specification was done synchronously, which allowed the versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, or even CSS3. There will never be a CSS3 or a CSS4; rather, everything is now CSS without a version number.

CSS - Reading Topics

Adding CSS to HTML

Sr No.	Topics	Reference
1	What is CSS?	https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS https://skillcrush.com/blog/css/ https://www.hostinger.in/tutorials/difference-between-inline-external-and-internal-css
2	What are different methods to apply CSS?
3	Which one is best practice to use?

Selectors

Sr No.	Topics	Reference
1	What are selector and its types?	https://css-tricks.com/almanac/selectors/ https://www.freecodecamp.org/news/css-selectors-cheat-sheet/ https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

CSS Box Model

Sr No.	Topics	Reference
1	What is Box model?	https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model https://css-tricks.com/the-css-box-model/ https://www.youtube.com/watch?v=rIO5326FgPE https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
2	List all properties of box model
3	What is margin collapsing?

Positioning

Sr No.	Topics	Reference
1	Static	https://css-tricks.com/almanac/properties/p/position/ https://developer.mozilla.org/en-US/docs/Web/CSS/position https://learnlayout.com/position.html
2	Relative
3	Absolute
4	Fixed
5	Sticky

Float

Sr No.	Topics	Reference
1	What Is A CSS Float Property?	https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/ https://developer.mozilla.org/en-US/docs/Web/CSS/float https://css-tricks.com/all-about-floats/
2	SPECIFICS ON FLOATED ELEMENTS
3	Clearing Floats

Box-sizing

Sr No.	Topics	Reference
1	Box Model History	https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing https://www.bitdegree.org/learn/css-box-sizing https://css-tricks.com/box-sizing/
2	Present-Day box-sizing

Display

Sr No.	Topics	Reference
1	Inline	https://css-tricks.com/almanac/properties/d/display/
2	Block
3	Inline-Block
4	Flex

Animation

Sr No.	Topics	Reference
1	Animation properties	https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations https://thoughtbot.com/blog/css-animation-for-beginners https://webkit.org/blog/324/css-animation-2/
2	Transitions and transform

Understanding CSS inheritance

Sr No.	Topics	Reference
1	How is CSS Inheritance Useful?	https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance https://www.sitepoint.com/css-inheritance-introduction/
2	Forcing Inheritance

Introduction to CSS sprite and Web Safe Fonts

Sr No.	Topics	Reference
1	What are CSS Sprites?	https://css-tricks.com/css-sprites/ https://www.smashingmagazine.com/2009/04/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
2	Why use CSS Sprites?
3	How do you use CSS Sprites?
4	Web Safe fonts	https://www.cssfontstack.com/

Responsiveness

Sr No.	Topics	Reference
1	Types of layouts	https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design https://learn.shayhowe.com/advanced-html-css/responsive-web-design/ https://marksheet.io/css-responsiveness.html https://css-tricks.com/nine-basic-principles-responsive-web-design/
2	Creating fluid layouts
3	Media queries
4	Hamburger icon
5	Responsive navigation menu
6	Video and background image responsive