CSS Bullets A comprehensive reference to all the CSS you need!

144 Pages·2021·10.857 MB·English

by  Ankush Sharma

If you try long and hard enough,
The universe shall bow to you
CSS BULLETS
A comprehensive reference to all the CSS you need!
By
Ankush Sharma
TABLE OF CONTENTS
CSS Bullets
Table of Contents
Preface
Acknowledgements
CSS Bullets
Basic Track
Advanced Track
Expert Track
Basic Track
Useful Resources & Links
Basics of CSS
How to add CSS to HTML
Selectors
Why is CSS cascading?
CSS Inheritance
Combinator
There are 4 different types of combinators
Adjacent Sibling
General Sibling
Child Combinator
Descendant
Selectors, Properties and Values
Value types
Summary
Diving Deeper
Box Model
Margin Collapsing
Shorthand Properties
Height and width Properties
Understanding Box Sizing
Display Property
Visibility Property
Block vs inline elements
Problem statement 1:
Pseudo classes and Pseudo elements
Properties worth remembering (A pictorial representation)
CSS classes vs ID selectors
!important
:not()
Summary
Fun Concepts to know
RGB vs RGBA
Focus selector
Float
CSS Positioning
Positioning
Fixed Navigation Bars with “fixed”
Z-index
Using “absolute” and “relative” Stand Alone and Combined.
Sticky Positioning
The Stacking Context
Summary
Advanced Track
Background and images
Sizes and Units
Which Unit Should I Choose?
Summary
JavaScript and CSS
Responsiveness
Hardware and Software Pixels
Viewport and Media queries for responsiveness.
Viewport Meta tag
Media Queries
Summary
Styling Forms
Summary
Working with Text and Fonts
Generic families and Font Families
Syntax for font in CSS
Font Face
Custom Fonts
Font-properties
Summary
Expert Track
Flexbox
Main Axis vs. Cross Axis
flex-flow
align-items
justify-Content
align-content:
Flexbox and the Z-index
order
align-self
flex-grow and flex-shrink
flex-basis vs width and height
Summary
The CSS Grid
What is the CSS grid?
Positioning elements in a grid
Using element-sizing, repeat and minmax
Advanced positioning
Naming lines
Shorthands
Grid Gaps
Grid Template Areas
Fit-content
Responsiveness in Grid
Grid AutoFlow
Implicit and Explicit Grid
Grid vs Flexbox
Summary
Transformations
Transform
Rotate:
Translate:
Skew:
Scale:
Perspective:
Transform-style
Backface visibility
Summary
Transitions and Animations
Transitions
CSS Animations
Summary
Modern CSS
CSS Variables
Vendor Prefixes
Support Queries
Polyfills
Eliminating Cross-Browser inconsistencies
Do’s and Don’ts of Naming class
“Vanilla CSS” vs CSS Frameworks
Summary
CSS Bullets
About the Author
PREFACE
Learning Web development is no easy affair. From my personal experience, I believe web devlopment has different
stages of learning.
It can start off with something as simple as creating a mockup of the website we want to develop in simple html and
lead to something complex as a fully dynamic e-commerce website.
Choosing the right tools and skillset is always necessary to meet all our endgoals and ensure that we create a
holistic experience for the end user. CSS has always been the bane of many a web designers who take the code first
approach in designing their web pages.
Learning CSS can sometimes be a daunting process due to the sheer volume and individuality of each feature that
CSS provides us. It is thus necessary that we find a path to deep dive into CSS with the ability to jump back and
look at othe aspects of web development.
In the “Bullets” series of books written by me, I try to solve this problem of creating a learning environment where
we don’t feel trapped to stick to a single approach of learning.
The CSS Bullets serves both as a deep diving manual and a quick reference guide, with minimal, necessary and
example driven topics to enhance your learning of CSS. I have also taken care in dividing the entire book into three
sections:
1. The Basic Track
2. The Advanced Track
3. The Expert Track
Readers of this book can choose any track based on their experience level in CSS and proceed forward to learn
exactly what they want.
This further benefits the readers in two ways: one that its not me, the author, but you the readers who are in control
of where they would want to begin or continue their CSS learning Journey.
The book contains illustrations on all the topics and might occasionally point you to explore beyond the confines of
the book!
All-in-all I have tried to create this book as an exprience rather than a monotonous lecture on CSS. The topics help
you to start off with confidence and this just keeps increasing as you go.
I truly recommend you to build a sample project as you keep checking off every topic off the contents list of the
CSS Bullets book, with all the learnings being implemented in the same.
I hope you have as much fun reading CSS Bullets as I had in developing it!
Happy Coding!!!
ACKNOWLEDGEMENTS
Since I wrote my last book on React, suddenly the year that was supposed to be weird and taxing,
starting turning out to be wholesome and rewarding. Writing in itself has been a reward to me
always, but turns out that this time that I followed two of my passions, web development and
writing, I could achieve even better than what I had expected!

I recently have started working as a full-time full-stack developer in one of the most premium and
well thought startups of India. I have had the previlege of working throughout the year with some of
the mammoths of the industry and understand how their business requirements changed with the
continuously changing Indian consumer landscape. I will forever be indebted to my Team at
Clevertap as well as all my colleagues who helped me every point of the way and propelled my
growth into the person that I am today.
I had also been working continuously in building my very own learning ecosystem with the name of
“Codewolf, learn-code-grow”, and am truly thankful to all my friends, teachers and peers who have
not only helped me in the venture but also been a constant pillar of support in its creation.
I would not had been able to do anything without my parents’ support. They like always have been
my best critics and have showered me with unfaultered guidance and motivation.
My mother especially has taken the charge in improving my health and I have been learning a lot
from her in managing my daily routine to get fitter.
It’s now my goal to keep sharing my knowledge going forward in some more exciting series of
books and I hope we can come together as a community to push forward in the exciting world of
web development.
As always,
To all those who think they can’t, trust me, you can!
CSS BULLETS

Basic Track
1. Getting Started
2. The basics
3. Diving Deeper
4. More on Selectors and CSS features
5. Practicing the Basics
6. Positioning
Advanced Track
● Background and Images

● Dimensions. Units and Sizes

● Javascript and CSS

● Responsiveness

● Styling Forms

● Working with Text and Fonts

Expert Track
1. Flexbox
2. CSS Grid
3. Transformations
4. Transitions and Animations
5. Modern CSS
BASIC TRACK
Learning CSS can be challenging for anyone beginning their web development journey.
Every CSS designer’s upskilling period can be differentiated into three different tracks!
1. The basic phase, where we get the first outlook to CSS and how we can effectively use it.

2. The advanced phase, where we start manipulating CSS selectors to accomplish a dynamic, much more

refined, and unified design.
3. The expert phase, where our focus shifts to writing efficient, cleaner CSS code with more emphasis on page

dynamics and page aesthetics.
So let’s start off our journey by understanding the basics of CSS!
Tools to be used
1) VS Code

2) Chrome

Useful Resources & Links
● World Wide Web Consortium (W3C) CSS Working Groups: https://www.w3.org/TR/tr-groups-

all#tr_Cascading_Style_Sheets__CSS__Working_Group
● Download Visual Studio Code: https://code.visualstudio.com/

● Download Google Chrome: https://www.google.com/intl/en/chrome/