Css - the Complete Guide (Incl Flexbox Grid & Sass) Reviews

CSS — The Consummate Guide 2020 (incl. Flexbox, Grid & Sass)

Chapter 1 — CSS Nuts

In the inspect element, the start style rule shows the inline styles (empty if not applied), followed past the internal and external styles according to their specificity.

Specificity — precedence/priority of css rules

inline > id > class/pseudo-class/[aspect]selectors > tag and pseudo-element selectors

The inherited styles are shown below browser default styles and have really low specificity.

Combinators:

div + p => adjacent sibling (+)

div ~ p => general sibling (~)

div > p => child selector (>)

div p => descendant selector (space)

box-sizing: content-box; // default

box-sizing: border-box; // considers the padding and edge in computing the actual width

display: inline-block; // usually applied to the child and non the container element.

This style makes block-level-elements inline in the sense that it brings them together without taking full width (which block-level elements do), just still keeping all its block level characteristics. This is great for creating navigation. We'll see flexbox later.

inline-block has a behaviour that takes the space between lets say the logo-div and the ul-div in your navbar code (that are both applied the inline-block style) it considers information technology a space and hence that one graphic symbol doesn't allow to fit the whole div into the same line and takes another line. The solution is to remove the spaces, at all. OR y'all can give a few extra pixels to your calc() function like this:

width: calc(100% — 54px)

Pseudo-classes → li:hover (active, disabled, link, etc)

Pseudo-elements → p::start-letter (earlier, later on, commencement-line, etc)

::before and ::later means something to the left and/or right of the element.

You tin grouping equally many rules you desire by separating them with a comma.

NOTE: the inline element's margin top and bottom are applied (if y'all see in the audit element) but yous don't run across it on the folio.

Chapter two — CSS Selectors

a.main-section → targets <a> with grade "main-section"

a#profile → targets <a> elem with the id "profile"

https://caniuse.com/

This is a great site to bank check availability of any features and which browsers back up those functionalities and what versions of those browsers support them. Do cheque information technology out!

box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.v);

color functions:

rgb(0, 0, 255) // red, greenish, blue

rgba(0, 0, 0, 0.5) // concluding one is transparency (opacity)

If you want to cheque the behaviours of elements like hover, focus, agile etc.. you can go into inspect elements and click on :hov choice there to mimic and run into results of the events.

vertical-align: middle;

Notation: We don't employ float belongings that often considering it has to do with the positioning of the chemical element (which messes with other styles). Float is peachy for positioning an image in text and make sure that the text actually flows around the image. It'due south not every bit dandy for positioning block level elements because the text will reply to it, but the other block level elements won't.

And then at present, nosotros have to proceed its infinite reserved and tell the other block level elements that come up afterwards information technology, that they shouldn't respect any previous floatings. Now, in order to do that, we'll add a div just beneath the div containing float property, which volition take this style which simply means that articulate floats on both sides left and right.

clear: both;

We'll have a look at flexbox later, merely just be aware that float exists, so that something similar images and text where you want the content to float around (or to menses around), merely if you lot desire to utilise it for positioning elements on your page layout, endeavour to avert information technology.

Chapter iii — Positioning

Positioning: If you specify goose egg, the "position: static" is applied past default. If nosotros specify "position: stock-still" to a cake/inline element, information technology behaves every bit an inline-cake chemical element and the position of this element only depends on the viewport (browser window size). If you set elevation / bottom / left / right belongings to 0 and margin also to 0 y'all can clearly see what the element position refers/relates to.

z-index: Adding z-index to elements which don't have whatsoever position property practical (other than static i.e the default one), the z-index doesn't take any impact.

z-index: auto; // This is equal to 0

you can employ 100,7,2,one…0…-ane,-3,-100

(+ve means more on the front -ve means more than on the groundwork)

position: accented;

1) if none of the ancestors (the parent elements) has a position property applied, well then the positioning context of the element is simply the <html> element.

2) if we take whatever position ancestors, and so the closest ancestor which has the position property applied is the positioning context for this chemical element. (and then if we have ancestors with the position property practical, and so the absolutely positioned chemical element volition be positioned in relation to the closest ancestor which has position property applied.)

The fixed and accented values are quite comparable. In general, both take the elements out of the document menses if you apply these values to these elements, but for the fixed value, the positioning context always is the viewport, for the absolute value, the positioning context depends.

For the relative value, information technology's different considering the positioning context is the element itself and at the aforementioned fourth dimension the element is besides not taken out of the document flow.

SO for fixed and accented values, the top, left, botton and right properties specify a distance to the parent element (its containing block basically), but for the relative positioning, this just defines how this element should move from the current position.

Sticky is basically a hybrid (a combination) of relative and fixed.

* For stock-still value, the viewport is the positioning context.

* For absolute, another element is the positioning context, which tin can either be the <html> element or the closest ancestor with position property applied.

* For relative, the chemical element itself is the positioning context.

* z-alphabetize is applied just when a position property is defined.

Affiliate four — Background and Images

groundwork-image: url("liberty.jpg);

background-size: cover,contain,%-value

background-repeat: no-echo,echo-x,repeat-y

background-position: left x% lesser twenty%;

background-origin: padding-box; //default… other options are (border-box, content-box)

background-clip: padding-box; //default… other options are (edge-box, content-box)

Shorthand for background properties:

background: url("liberty.jpg) left 10% lesser twenty%/embrace no-echo border-box padding-box fixed;

since position and size can accept similar values (may it be in pixels or pct) and then to avoid disharmonize: the position comes first, size comes second, separated by a slash(/).

Now as for origin and clip, the commencement values would exist origin and second one would be clip, but if y'all but pass one holding then information technology would exist considered the same for both origin and clip.

<img> tag is not controlled past its container element'southward peak/width. (so if yous requite its parent height/width of let's say 10%, withal no change. The image will take its full/default size, irrespective of its parent container's summit/width). Then how do we control it?

Well, the container is an inline element, which is why it doesn't care virtually its container size, and and then we need to requite the container element this manner:

display: inline-block;

Now, the linear and radial gradients is something y'all'll non use much often, just is still practiced to know.

Linear Gradients:

background-epitome: linear-gradient(to bottom, reddish, bluish); // management, color1, color2

direction => (to left meridian) OR (to correct bottom) OR (to top) OR (30deg) OR (180deg).

You can also add every bit many colors every bit you want (color, #hex-codes, rgb, rgba, hsl,.. etc)

Also you lot can define how much infinite should a specific color occupy similar this (carmine 70%). This volition be a perfect red, and hence blueish and the other color will take the remaining infinite on the container that the manner is existence applied to.

background-color: linear-gradient(180deg, red 70%, blueish, rgba(0, 0, 0, 0.5));

Radial Gradients: It doesn't start with one edge and end at some other, instead starts with a shape and and so transitions to all the areas around it. By default, it starts with the middle and the shape is an ellipse. Shape can besides be a circle. Position can too be defined as (circumvolve at top). For eg:

groundwork-image: radial-gradient(circumvolve, cherry, blue);

background-image: radial-gradient(circle at summit, cherry-red, blueish);

groundwork-image: radial-gradient(circle at pinnacle left, red, blue);

groundwork-image: radial-gradient(circle at 20% 50%, ruddy, blueish);

background-epitome: radial-gradient(circle 170px at 20% 50%, red, blue);

Here 170px refers to the size of the circumvolve.

ADDING MULTIPLE BACKGROUNDS:

groundwork-paradigm: linear-slope(to top, rgba(lxxx, 68, 18, 0.half dozen) 10%, transparent),

url("freedom.jpg) left x% lesser 20%/embrace no-echo border-box,

#ff1b68;

FILTER belongings:

filter: grayscale(100%);

filter: blur(8px);

There are many more than functions similar brightness, dissimilarity, capsize, etc.

Chapter v — Sizes and Units

How does the percentage unit piece of work? What does it refer to?

Call up these rules:

The reference point for an element with a percentage unit is called the containing block (let'southward say a parent element with width of 100 pixels). And so if our element (kid) is 10% it would have 10 pixels applied to it.

At present the event is that the containing block depends on the position belongings applied to our element, and in case the position is set to fixed and then the containing block is non an element, information technology'southward the viewport.

The percent unit of our element with the position absolute, refers to its ancestor element (content + padding).

In simple words, the containing cake for an element with the position absolute declaration applied, is the closest ancestor which is not position static (meaning whatever other value for position belongings except for static)

If we have position static or relative, then the containing block is an ancestor (just the content and no padding etc)

How to place the containing block??

Ans: The closest ancestor which is a block level element.

By using the combination of width in percent and max-width or min-width or both with a fixed value (pixels/rem/etc), you lot can make sure to restrict the size of images on actually small and actually big screen sizes.

em and rem are units that are calculated based on the fontsize.

view-width and view-height:

Eg: 80vw and 70vh

80vmin → takes the specified percentage of the smaller viewport (among height and width).

60vmax → vice versa of vmin (takes the larger viewport amidst the two)

Chapter six — Responsive Design

MyDevice.io is a nice website for checking the screen sizes and resolutions for dissimilar devices. Practise check information technology out!

Also recommended to read near "hardware vs. software pixels"

Viewport Meta tag:

These scales refer to the zoom level immune.

Media Queries:

@media (min-width: 40rem) {

// put your css code here

}

Nosotros can have multiple media-queries, for different screen sizes.

@media (min-width: 40rem) and (orientation: portrait) {

// This volition run if both atmospheric condition are true

}

@media (min-width: 40rem),(orientation: portrait) {

// This will run if any one of the conditions are true (information technology works equally logical OR operator but like css selectors)

}

Affiliate 7 — Calculation and Styling Forms

Advanced Attribute Selectors:

1) element with Attribute:

[type] {

colour: red;

}

two) element with Specific Attribute Values:

[type="electronic mail"] {

color: red;

}

iii) element with Specific Attribute Value in List:

[lang~="en-us"] {

color: cherry-red;

}

4) chemical element with Specific Attribute Value/Value-something:

[lang|="email"] {

color: cerise;

}

v) element with Specific Attribute Value Prefix:

[href^="#"] {

color: red;

}

6) element with Specific Attribute Value Suffix:

[href$=".de"] {

color: red;

}

seven) element with At Least Ane Aspect Value:

[src*="cdn"] {

color: red;

}

8) element with Specific Aspect Value Case-Insensitively:

[src*="cdn" i] {

color: ruby-red;

}

Chapter 8 — Text and Fonts

There are 3 ways to use any fonts:

ane) depending on the user's browser's default font.

2) Generic family (really defining which font to select, followed by a fallback font if one is non available)

3) Font Family (user's computer/ Spider web Fonts/ retrieved from server)

There are two ways to add Web Font (in order to not be dependent of the fonts downloaded on user's machine)

Go to google fonts website and there y'all'll find two options:

1) either you tin can add together the <link..> for fonts

2) Or, the recommended one is to import it this style in the css file:

@import url('https://fonts.googleapis.com/......css?family=Roboto')

Font property Shorthand:

font: italic small-scale-caps 700 one.2rem "AnonymousPro", sans-serif;

So, the order hither is: font-style font-variant font-weight font-size font-family unit

Basically nosotros just accept to make certain that the font-mode font-variant and font-weight (in any order) come before the font-size, followed by the font-family (in the terminal).

Chapter 9 — Flexbox

Finally, we've reached to flexbox, which is an advanced way of styling items inside a container without much hussle. And then let's dive into that!

There are two master components of Flexbox: Flex Container and Flex Items

FLEX CONTAINER:

brandish: flex and display: inline-flex: Past applying flex or inline-flex, nosotros automatically apply these two backdrop to the flex container:

flex-direction: row; // other options are row-contrary / column / column-contrary

flex-wrap: wrap; // other options are wrap-reverse, nowrap

Understanding Chief Axis and Cross Axis

The chief axis simply depends on the flex-direction and the cross axis goes anti-flex-direction actually.

flex-flow: row wrap; // This is a SHORTHAND for flex-direction and flex-wrap.

justify-content refers to the main axis

align-items refers to the cross axis

align-content is basically a combination of align-items and justify-content and it allows us to marshal our items forth the cross axis.

FLEX ITEMS:

order: -one,0,ane…whatsoever number

align-cocky: flex-start / flex-cease / center / etc..

flex-grow: 0,1,two..5,half dozen…

flex-shrink: 0,one,ii..5,6…

flex-basis defines the size of an element depending upon the main axis. then flex-footing is non the width or the acme, it can basically be both which is only dependent on the flex-direction. (flex-basis will overwrite the default width/height holding.)

If flex-footing is ready to auto, the fallback volition either be the width if the flex-direction is row or row-reverse (chief axis goes from left to right OR right to left) AND height if the flex-direction is column or column-reverse (main axis goes from acme to bottom OR bottom to top)

Shorthand for flex-abound, flex-shrink and flex-footing:

flex: 0 1 auto;

Chapter x — CSS Grid

Now that nosotros've seen flexbox in a flake detail, let'due south have a look at CSS Grid which is some other great tool which uses a grid-based layout arrangement, with rows and columns to create complex responsive spider web design layouts more hands and consistently.

display: grid;

grid-template-columns: 200px 150% xx%;

grid-template-columns property takes width of multiple columns and volition hence create iii columns for to a higher place lawmaking.

grid-template-columns: 200px 2fr xx% 1fr;

and then here col2 and col4 will distribute the remaining space such that col2 will receive twice as much pace as col4 does.

grid-template-columns: echo(4, 25%);

Instead of writing 25% 25% 25% 25%, do this.

filigree-template-rows: 5rem 2.5rem;

This volition create two rows of defined sizes.

grid-template-rows: 5rem minmax(10x, 200px) 100px;

Positioning Child elements in Grid OR ""grid items"" by using line numbers:

grid-cavalcade-outset: 3;

grid-column-terminate: 5;

grid-row-start: ane;

grid-row-end: 3;

Another way to span 2 columns would exist:

grid-column-outset: 3;

grid-column-stop: span two; // so two cols afterward line 3

To assign a full row to an item:

grid-column-start: one;

filigree-column-end: -one; // to assign consummate row (all cols) to an item, because -ve num means you lot start from the finish (5 or 6 whatev.) and get to -1. You can requite any -ve num though.

Now you could also proper name each grid line-numbers:

grid-template-rows: [row-1-start] 5rem [row-1-end row-ii-start] minmax(10x, 200px) [row-ii-end row-3-start] 100px;

And so this is how you can proper noun each row, you can likewise have multiple names as shown higher up.

And now you can do this to occupy two rows, only using names instead of line numbers (that'southward it!)

grid-row-outset: row-one-kickoff; // 1 (grid line-number)

grid-row-finish: row-two-end; // 3 (grid line-number)

SHORTHAND for column and row (commencement and terminate):

So instead of writing:

grid-column-outset: 1;

filigree-column-end: -ane;

you can write:

filigree-cavalcade: 1 / -ane;

Same goes for row, so instead of:

grid-row-kickoff: row-1-start;

grid-row-finish: span 1;

you can write:

grid-row: row-2-commencement / span i;

More than advanced shorthand ❤ :

grid-area allows you to summarize all 4, so column and row (start and end) into one property.

filigree-surface area: row-ane-start / 2 / row-2-end / span 3;

The social club here is: row showtime / col outset / row end / col end

Now, in that location is a matter chosen as column gap and row gap:

grid-cavalcade-gap: 20px;

filigree-row-gap: 10px;

shorthand for column gap and row gap:

filigree-gap: 10px 20px; // The society is: filigree-row-gap filigree-column-gap

Whenever you get confused if row/column would be the first value I just desire yous to retrieve that: My math teacher at schoolhouse told me this short cool story that there was a drink in my hometown back in those days and it was called "RC Cola", so just call up RC Cola!! 😋 (so row first, column second) and CSS follows this everywhere!

Nevertheless, if merely one value is passed, then the same value will be applied to both.

If you lot are already in dearest with css grid and wish to learn more than most css grid, then definitely check out what grid-area property is and what information technology does for yous! (For the sake of simplicity and non making this article very complex I have omitted that office)

All elements that are positioned non-statically (and then other than default), then this leads to them not being part of the filigree.

Elements which are non part of the document flow, (so fixed and accented elements) are not office of the grid and hence are not considered for the rows. (header, Navigation, modal, …whatever!)

filigree-template-rows: 3.5rem auto fit-content(8rem);

fit-content() function will have the boosted infinite if the content is pocket-sized, and if content is bigger then information technology volition simply receive the space it needs.

justify-items: center/start/end/stretch/etc..

marshal-items: center/offset/stop/stretch/etc..

The default for both backdrop is stretch.

justify-content: center/showtime/cease/stretch/etc..

align-content: middle/first/finish/stretch/etc..

So, here's the blueprint to remember when working with grid, justify at the starting time of the holding means x-axis or within a row, and marshal at the offset means y-axis or along the columns.

If y'all desire to overwrite the positioning for a unmarried element:

justify-cocky: center / start / finish / stretch / etc..

align-cocky: center / start / cease / stretch / etc..

Adding new row/column:

filigree-automobile-rows: minmax(8rem, auto) // auto size

filigree-auto-flow: cavalcade; // by default is row

filigree-auto-columns: 5rem; // If you lot desire to add new items in new columns instead of creating new row

Implicit and Explicit Grid is as well something you should consider reading about.

Auto-make full and Auto-fit:

grid-template-columns: repeat(automobile-fill, 10rem)

auto-fill up volition ensure that it fills the current row with every bit many items every bit possible and and so information technology will wrap and enter a new row.

grid-template-columns: repeat(auto-fit, 10rem)

auto-fit is a prissy culling to auto-fill, just in example where you do not have enough items for an entire row it also centers the items and so that it looks good.

Chapter 11 — CSS Transforms, Transitions and Animations

2D Transformations:

transform: rotateZ(45deg);

transform-origin: left top;

This property tells the transform to rotate effectually the top left corner (then the acme left corner stays in its place). It is set to center by default.

transform: rotateZ(45deg) transformX(3.5rem) transformY(-1rem);

This property allows you to position your element forth the x and y axis.

transform: skew(-20deg, 20deg) calibration(one.4);

You can also apply skewX, skewY and scaleX, scaleY.

Note: Too 2d, there is a completely unlike way to transform your elements in 3D, but that would merely be too much information for this article and you lot don't very ofttimes use that!

Transitions and animations are too one of the few topics that I take left out, so if you lot desire to written report it I'll recommend watching some absurd videos on youtube or perhaps learn from the MDN or w3schools website. Here:
https://developer.mozilla.org/en-U.s.a./docs/Spider web/CSS/transition https://world wide web.w3schools.com/css/css3_transitions.asp https://developer.mozilla.org/en-U.s.a./docs/Web/CSS/animation https://www.w3schools.com/css/css3_animations.asp

Chapter 12 — Hereafter-Proof CSS Code

Search for Auto-prefixing on Google. I personally constitute it very astonishing.

How to apply Online Car-Prefixing tools?

Online auto prefixing tools, paste your css code and get the auto-prefixed version of information technology, which contains css holding values which are supported by older browsers to support all kinds of browsers.

Polyfills: If some older browsers do non natively back up the modernistic functionality you wanna accept, and then definitely Polyfills are something you should consider using. Polyfills are basically just a piece of javascript lawmaking that you lot need to import and so what it does is that it converts your modern code compatible to what those older browsers can understand. So definitely have a look at it.

Alright! Thanks for reading. If you liked this commodity, definitely give information technology likes and please make certain to share it around with your homies.

I am Hamza Murtaza, and this is my outset e'er article well-nigh CSS.

hofereving1984.blogspot.com

Source: https://medium.com/@hamzamurtaza/css-the-complete-guide-2020-incl-flexbox-grid-sass-4256545fc4ff