CSS Bullets A comprehensive reference to all the CSS you need (Ankush Sharma)（Z-Library）

Page 1

(This page has no text content)

Page 2

If you try long and hard enough, The universe shall bow to you

Page 3

CSS BULLETS A comprehensive reference to all the CSS you need! By Ankush Sharma

Page 4

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

Page 5

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

Page 6

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

Page 7

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!!!

Page 8

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!

Page 9

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

Page 10

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/

Page 11

BASICS OF CSS a) How to add css to HTML b) Setting up of CSS Rules c) Selectors, properties and values d) Manage conflicting styles a) How to add CSS to HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css"/> <title>Document</title> </head> <body> </body> </html> We add CSS using the 3 ways 1) Inline CSS using the inline Style tag. 2) In page CSS using Style rule and selector 3) External CSS using <link rel=”stylesheet” href =”path_to_Css_file”

Page 12

SELECTORS Selectors are ways to get HTML elements

Page 13

WHY IS CSS CASCADING? CSS is cascading because a same element can have multiple rules and multiple classes attached to it which work in a cascading fashion. The specificity of these cascading rules help in resolving conflicts that may arise from multiple rules ● “*” has the lowest priority ● <Tag> and ::Pseudo elements have the second lowest priority ● Class, :pseudo class and [attribute] selectors have the third lowest priority ● Next in line are the #ID selector ● Finally the inline styles will have highest priority

Page 14

CSS INHERITANCE The Child element inherits some styles from the parent element Inheritance in CSS has very low specificity and even load at the bottom in the web css. This represents that even though the body tag is added with css, it will not override the child style here

Page 15

COMBINATOR A combinator allows us to be more precise in the way we use our selectors This can be done to narrow down selectors when we don’t want to use multiple classes E.g. select only the h1 tag which is under the id #preview Ans. <div id=”preview”> <h1> Hello </h1> </div> Generally a combinator has a higher specificity. This simply means that more specific rules have greater specificity and thus greater priority. This is not the same as inheritance as the combinators are not passed down automatically. There are 4 different types of combinators 1) Adjacent Sibling + 2) General Sibling ~ 3) Child Sibling > 4) Descendant

Page 16

1) ADJACENT SIBLING The Adjacent sibling combinator helps in specifying a CSS style to the selector immediately after the specified parent. This is very specific and will only work on the immediate next element to parent

Page 17

2) GENERAL SIBLING The General sibling is a bit flexible as the second element can come anywhere after the specified parent.

Page 18

3) CHILD COMBINATOR Any selector who is a direct child of the parent should get the style

Page 19

4) DESCENDANT The descendant is the most used combinator as they allow us to style all the descendants whether or not they are directly child of the parent. Generally combinators have poorer performance than the traditional selectors as they help in applying styles using a search rule of cascading selectors, but depending on how we use it they can be very useful

Page 20

SELECTORS, PROPERTIES AND VALUES Some sample Selectors, properties and values are as below: We use a these to apply CSS to our html files Resource Link here