My notes on CSS

Arun Rajeevan

4 min readMay 17, 2020

Concepts we must know before we start web development

Understand the concept of Specificity(which style to apply if there are multiple CSS matches)

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Display/Positioning/Responsiveness related notes

Note 1. Width and Height

By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element
height + padding + border = actual height of an element

Ex: If there are 2 elements with same width and height, then they can appear in different size because of different padding and border values.

Note 2. CSS Box Sizing

The CSS box-sizing property allows us to include the padding and border in an element's total width and height. Therefore elements with same width will appear in same size.

Note 3. Display property

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
Examples:

<div>
<h1> — <h6>
<p>
<form>
<header>
<footer>
<section>

An inline element does not start on a new line and only takes up as much width as necessary.

<span>
<a>
<img>

Remember: Block-level elements cannot be placed into an inline context.This behavior cannot be changed by setting CSS display property.

Inline — Displays an element as an inline element. Any height and width properties will have no effect.

Inline-block — Displays an element as an inline-level block container. You can set height and width values.

Remember: Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.display: block starts on a new line and takes up the full width available.

Note 4. Difference between Display:none and visibility:hidden

visibility:hidden — doesn’t remove an element from the layout. It just makes the element invisible.It still takes up the space in the displayed view.

diplay:none — Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.

Note 5. Responsive Web Design Concepts

urls: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

Viewport: The viewport is the user’s visible area of a web page.It varies with the device, and will be smaller on a mobile phone than on a computer screen.

We must understand the concept of a Viewport to understand the responsive behaviour. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

Important points:

Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once.

For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.

Problem with above approach:If pages that are optimized for narrow screens using media queries ,then in above example— if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used.

To mitigate this problem, Apple introduced the “viewport meta tag” in Safari iOS to let web developers control the viewport’s size and scale.

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

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

Note 6. CSS positioning — float and clear

Float is a CSS positioning property.
Float property is used for positioning and formatting content. e.g. let an image float left to the text in a container.

view example and then you will understand about float:
https://www.w3schools.com/css/css_float.asp

example for clear: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clear

Very nice article about float and clear: https://css-tricks.com/all-about-floats/

Float’s sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float.

Note:One of the more bewildering things about working with floats is how they can affect the element that contains them (their “parent” element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing.

Note 7. CSS Flexbox (display:flex)

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Link: https://www.w3schools.com/css/css3_flexbox.asp#align-items

The flex container properties are:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

CSS Selectors

https://www.w3schools.com/cssref/css_selectors.asp

CSS Combinator Selectors

Examples:

div p { //CSS properties and values}
Selects all <p> elements inside <div> elements.

div > p { //CSS properties and values}
Selects all <p> elements where the parent is a <div> element

div + p { //CSS properties and values}
Selects all <p> elements that are placed immediately after <div> elements
Note:Both elements must have the same parent, but div has to be immediately followed by p.

p ~ ul { //CSS properties and values}
Selects every <ul> element that are preceded by a <p> element.
Note:Both elements must have the same parent, but p does not have to be immediately followed by p.

Pseudo Classes in CSS

A pseudo-class is used to define a special state of an element.
Examples:
Style an element when a user mouses over it.
Style visited and unvisited links differently.
Style an element when it gets focus.
Link: https://www.webfx.com/blog/web-design/link-pseudo-classes/
List of all pseudo classes: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Pseudo Elements in CSS