Concepts of CSS — Part 1

Image for post
Image for post

📄 Table of contents

  • Box-Model
  • Specificity
  • Positioning
  • top vs margin-top
  • .a.b vs .a .b
  • visibility:hidden vs display:none vs opacity:0
  • positioning
  • flex-box vs grid
  • responsive vs adaptive
  • center align horizontally + vertically span inside parent div
  • Centre Align horizontally + vertically child div inside parent div

◉ CSS is case-INsensitive

All CSS style sheets (CSS properties, values, pseudo class names, pseudo element names, element names) are case-INsensitive, except for parts that are NOT under the control of CSS.

For example, the case-sensitivity of values of the HTML attributes “id” and “class”, of font names, and of URLs lies outside the scope of this specification and hence are case sensitive.

NOTE : in html quirks mode the css is case INsensitive even for ID and class (if you remove doctype declaration)

Example on CodePen : https://codepen.io/swapnilPakolu/pen/MWgvQyB?&editable=true#anon-signup

◉ Top vs margin-top

The top property is a position property. It is used with the position property, such as absolute or relative and its behaviour can differ depending on the type of position, absolute, relative or fixed.

margin-top is an element’s own property. It is for measuring the external distance to the element, in relation to the previous one.

you can try it here:

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

just replace top with margin-top to see the difference.

◉ Precedence in CSS (When Order of CSS Matters)

The Order of CSS Classes in HTML Doesn’t Matter (All the classes in the class attribute are applied equally to the element.), rather it is just reading the CSS in the order that it’s written — the cascade wins in this example.

.a { color: red; }
.b { color: blue; }
<div class=”a b”>Here’s some text</div><div class=”b a”>Here’s some text</div>. # switched the order of the classes

The text is always going to be blue because .b is defined last in the CSS.

◉ .a.b vs .a .b

.a.b is one or more elements with both classes.

<div class="a b"> </div>

.a .b means an element with class “a” is parent and “b” could be its child, grand-child or great grand child.

<div class="a">
<div class="b"> </div>
</div>
OR<div class="a">
<div class="c">
<div class="b"> </div>
</div>
</div>

◉ visibility:hidden vs display:none vs opacity:0

source: https://stackoverflow.com/questions/14731049/visibilityhidden-vs-displaynone-vs-opacity0

They all render the element invisible, yet differ in whether it occupies space and consumes clicks

+--------------------+----------------+-----------------+
| Property | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0 | ✓ | ✓ |
+--------------------+----------------+-----------------+
| visibility: hidden | ✓ | ✗ |
+--------------------+----------------+-----------------+
| display: none | ✗ | ✗ |
+--------------------+----------------+-----------------+
✓: yes
✗: no

And when we say it consumes click, that means it also consumes other pointer events like ondblclick,onmousedown,onmousemove etc.

In essence “visibility: hidden” behaves like a combination of “opacity: 0” and “pointer-events: none”.

display:none removes the element from the flow of the page; meaning it’s still in the DOM to interact with, but no longer has space reserved for it (unlike visibility: hidden or opacity: 0).

source: https://medium.com/launch-school/https-medium-com-dembasiby-understanding-the-css-box-model-b005a82593a6

◉ Box-Model

The box model has five main parts/properties that determine the size of the box. Those properties are the width, the height, the padding, the border, and the margin.

Apart from the width, height, the other properties are optional. Meaning that we can have a box with no padding, no border, and no margin.

The width and height properties include the content, but does NOT include the padding, border, or margin.

For example, .box {width: 350px; border: 10px solid black;} renders a box that is 370px wide.

height is rarely set for elements. It is in general, the height of the content that is used as a default.

padding can never have a negative value.

margin is the external space separating boxes. It is thus, not taken into account when determining the width or hight of an element.

Only left and right margin apply to an inline box. Also, while top and bottom padding can apply to an inline box, they will have no effect on the surrounding boxes but the background color.

🔘 box-sizing Property

box-sizing property was introduced in CSS3.

Though box-sizing has three possible values (content-box, padding-box, and border-box), the most popular value is border-box.

Content-box: is the default.

If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.

Padding-box: The element width include padding, but NOT border. At the time of writing, only supported by Firefox. It is thus not recommended to use it.

When you set the width/height of an element, the element often appears bigger than you have set (because the element’s border and padding are added to the element’s specified width/height).

Note: The padding-box value was deprecated.

border-box:

If you set box-sizing: border-box; on an element, padding and border are included in the width and height, and NOT margin.

Note that padding and border will be inside of the box. For example, .box {width: 350px; border: 10px solid black;} renders a box that is 350px wide, with the area for content being 330px wide.

If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

Applying this to all elements is safe and wise:

{ box-sizing: border-box; }

Box Dimension Specificities for Block Level Elements

  • If we don’t specify a width for our content, it will take as much width as it will be allowed. Block elements nested in another block element like a div, will take 100% of its parent’s width if we don’t set a with for it.

overflow

overflow property has four values: visible, scroll, hidden, and auto. It is set to visible, by default.

overflow: auto

This value is almost similar to scroll, but with a slight difference. It gives a scrollbar only if it is needed.

◉ Positioning elements with pure CSS

source:https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/

There are different ways/methods for positioning elements with pure CSS. Using CSS float, display and position properties are the most common methods.

🔘 CSS Position & Helper Properties

So there are 5 main values of the Position Property:

position: static (by-default) | relative | absolute | fixed | sticky

and additional properties for setting the coordinates of an element (I call them “helper properties”):

top | right | bottom | left AND the z-index

Z-index doesn’t work with position: static or without a declared position.

1. Static

defining position: static or not doesn’t make any difference. The boxes are positioned according to the normal document flow.

2. Relative

position: relative: An element’s new position relative to its normal position.

NOTE: Using position: relative for an element, doesn’t affect other elements’ positions.

3. Absolute

An absolutely positioned element is relative to its parent.

However, in position: relatIve, the element is positioned relative to its normal position.

An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element. If it doesn’t have any parent elements, then the initial document <html> will be its parent.

Since position: absolute removes the element from the document flow, other elements are affected and behave as the element is removed completely from the webpage.

4. Fixed

Like position: absolute, fixed positioned elements are also removed from the normal document flow. The differences are:

  • They are only relative to the <html> document, not any other parents.
  • They are not affected by scrolling.

source: https://stackoverflow.com/questions/26979386/css-parents-position-is-absolute-and-childs-position-is-relative-and-vice-ve

position: absolute will position that element to it's nearest parent with a position other than static.

Static is the default for everything.

Static doesn’t mean much; it just means that the element will flow into the page as it normally would.

position: relative is a little weird because it really affects that element's children, not it's own position. It's just saying to it's child elements, "position yourself relative to me if you have position: absolute." A position of fixed or absolute does the same thing (meaning its positioned children will position themselves relative to its boundaries), but these styles also affect their own position on the page. An element with position: relative won't look any different, but it's children might.

What “relative” really means is “relative to itself”. If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will have no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static. But if you do give it some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be.

consider a situation like this:

<div class="parent">
<div class="child">
<div class="grandchild"></div>
</div>
</div>

If grandchild has position: absolute, it will position itself relative to the browser window because there is no parent with a position other than the default of static.

If parent also has position of relative, absolute, or fixed,grandchild will position itself relative to the boundaries of parent.

However, if child also has a position of relative, absolute, or fixed, the grandchild will position itself relative to child's boundaries, because it is the nearest parent with a position other than static.

In summary, relative affects an element's children, while absolute and fixed affect the element itself as well as its children.

And remember that position: fixed bypasses all relative and absolute parents and always positions itself relative to the browser window.

This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left, bottom. and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relative to the page itself.

The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.

◉ CSS Grid Layout Module

.grid-container 
{
display: grid;
display: inline-grid;
grid-template-columns: 80px 200px auto 40px;
grid-template-rows: 80px 200px auto 40px;
grid-column-gap
grid-row-gap
grid-gap
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
justify-content: space-evenly;
align-content: end;
}

◉ Bootstrap 3 Grid System (from Twitter)

Image for post
Image for post

is <h1>, <span> valid inside <ul> ?

li is the only element allowed as child elements of UL.

All immediate children of an <ul> or an <ol> must be <li>s. Likewise, the immediate parent of all <li>s must be an <ul> or an <ol>.

◉ normalisation over reset

To avoid cross-browser style inconsistency, you can create a fresh clean slate by getting rid of the built-in browser styling.

This is where CSS Reset and Normalize.css come into play.

  1. Normalize.css preserves useful defaults rather than “UNstyling” everything.
  2. Normalize.css corrects some common bugs that are out of scope for reset.css. It has a wider scope than reset.css,

◉ Responsive over Adaptive

A viewport is defined by the size of the rectangle filled by a web page on your screen. It is the size of the browser window, minus the scrollbars and toolbars.

<meta name=”viewport” content=”width=device-width, initial-scale=1">

Where responsive design relies on changing the design pattern to fit the real estate available to it, adaptive design has multiple fixed layout sizes.

When the site detects the available space, it selects the layout most appropriate for the screen. So, when you open a browser on the desktop, the site chooses the best layout for that desktop screen; Resizing the browser has no impact on the design.

SEO is another big argument for using a responsive design.In adaptive design, it’s normal to develop six designs for the six most common screen widths; 320, 480, 760, 960, 1200, and 1600 pixels.

Image for post
Image for post
Responsive on top, Adaptive on bottom

◉ PWA vs AMP (accelerated Mobile pages)

AMP reduces the first page load time (PLT) whereas, PWA contains Service Worker, Web App Manifest, App Shell etc.

If you choose AMP over PWA, you can start fast with a reduced PLT because it facilitates to trigger the page-load in the first request. However, in the latter part, AMP does not give any assurance of a seamless experience. On the other hand, PWA starts slowly but retains the users with a seamless performance of your web pages.

When the web page has PWA, the first page can take some time to load.It is because the service workers come into action only after the second request in PWA approach.

◉ transition vs animation

A transition is an animation, just one that is performed between two distinct states — i.e. a start state and an end state. Like a drawer menu, the start state could be open and the end state could be closed, or vice versa.

If you want to perform something that does not specifically involve a start state and an end state, or you need more fine grain control over the keyframes in a transition, then you’ve got to use an animation.

A shorter answer, straight on point:

Transition:

  1. Needs a triggering element (:hover, :focus etc.)
  2. Only 2 animation states (start and end)
  3. Used for simpler animations (buttons, dropdown menus and so on)
  4. Easier to create but not so many animation/effect possibilities

Animation @keyframes:

  1. It can be used for endless animations
  2. Can set more than 2 states
  3. No boundaries

◉ flex-box vs grid layout

The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension — either a row or a column. Grid was designed for two-dimensional layout — rows, and columns at the same time.

  • Grid can do things Flexbox can’t do, Flexbox can do things Grid can’t do.
  • They can work together: a grid item can be a flexbox container. A flex item can be a grid container.

◉ Critical Rendering Path (CRP)

The critical rendering path is the minimum steps that the browser has to take from the moment it receives the first byte of HTML to the moment that it renders pixels on the screen for the first time.

HTML to be one of our “render-blocking”, critical resources — we can’t render any content if we haven’t parsed it yet!

Turning CSS into the CSSOM is considered to be a “render-blocking” stage just like building the DOM out of our HTML.

Any CSS that is not necessary for the first load can be considered “non-critical” and can be lazy-loaded after users have gotten that first paint (this is especially important if you have a single page app, it’s a big performance hit to send CSS for pages that aren’t even visible yet!)

The render tree

The browser uses the constructed CSSOM and DOM to create a “render tree”.

◉ Below CSS tips aren’t mind blowing, but they are good to know!

  • Makes the container 100% of the viewport height (vh) and 100% of the viewport width (vw). Can be handy when creating containers you want to take up the full height of the window.
.container {
width: 100vw;
height: 100vh;
}
  • Centers everything in the container both vertically and horizontally.
.container {
display: flex;
justify-content: center;
align-items: center;
}
  • Gives every row inside of the container a bottom border, except for the last one. This helps keep the bottom of the container from having two borders, one from the last row and the one from the container.
.container { 
border: 1px solid gray;
}
.container .row:not(:last-child) {
border-bottom: 1px solid gray;
}

Hovering a row will give it a gray background, unless it has the .active-class. This is great if you gave .active-class to one of the row and want to show that you can click on the others, but can’t on the one that’s “active”.

.row:hover:not(.active-class) {
background: gray;
}
  • Will capitalize only the first letter of the <p> tag.
p::first-letter {
text-transform: capitalize;
}
  • Reverses the arrow horizontally, so if you have just one left arrow image and need a right arrow image, you can just use the left arrow image and use transform rotateY to flip it around.
.right-arrow {
transform: rotateY(180deg);
}

Centre Align horizontally + vertically child <span> inside parent <div>

Although CSS2 doesn’t supports Vertical aligning . But we can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.

The example below centers a paragraph inside a block that has a certain given height. A separate example shows a paragraph that is centered vertically in the browser window, because it is inside a block that is absolutely positioned and as tall as the window.

DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}

A more versatile approach:-

This is another way to align text vertically. This solution will work for a single line and multiple lines of text, but it still requires a fixed height container:

div {
height: 100vh;
line-height: 100vh;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}

Centre Align horizontally + vertically child <div> inside parent <div>

Bootstrap 4 → an HTML, CSS, and JavaScript framework designed to simplify the process of making web projects responsive and mobile ready.

Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.

The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.

In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).

Bootstrap 4 also requires a containing element to wrap site contents.

Image for post
Image for post
fixed width container vs full width container
Image for post
Image for post
width (max-width) will change on different screen sizes:

Many of Bootstrap’s components require JQuery and Popper.js, along with Bootstrap’s own custom plugins, so this command will ensure that you have the libraries you need.

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store