codingthoughts
Notes: CSS Essentials

Notes: CSS Essentials

Henna Singh's photo
Henna Singh
·

4 min read

Semantic HTML

Allows to be more descriptive. Better for accessibility. Makes our code more readable. Better for SEO. <div> tag is used when there is no specific tag.

<header> // Site Title, logo and nav
<section> // A stand-alone section
<footer> // Copyright, Ts & Cs, etc
<main> // The page's unique content

Margins: Strange Behavior

When an element touches its parent, its top and bottom margins will merge with the margins of the parent element.

<header>
<h1> </h1> <!-- margin of h1 will merge with margin of header -->
</header>

The solution is to add padding to the parent element. This is not an issue when you are using Flexbox and grid.

a:hover { /** pseduo selector */
    color:lightpink;
    text-decoration:overline;
}
a:active {
    color: #222;
    font-weight: bold;
}
a:focus { /** for accessibility */
    text-decoration:underline dotted;
}

CSS Specificity

what makes one CSS property override another?

element = 1 point
class = 10 points
id = 100 points
/** id overrides class overrides element selectors */
General Styles: element selector
everything else - class selector

Compound Selectors

When targetted elements are inside other elements

.link-container a { /**anchor inside an element with class ...*/
    color: dodgerblue;
    text-decoration:none;
}

Compound Selectors and Specificity

In a larger code base when mix of classes, id and elements are used to specify the properties. The points for each element get added up.

section .ad-container #req-list ul li { /**calculates to 113*/
    color: green;
}

body section .ad-container div .general-list li{ /** calculates to 24*/
    color: red;
}

Spacing between lines

In the larger code base, use dev tools to find out properties taking higher specificity.

p {
    line-height: 23px;
}

  • Buttons for actions that affect the website's front-end or back-end.

  • Links for navigation to somewhere on the same page, within the site, or elsewhere on the internet

button{ /** what happens if you change selector to an anchor tag*/
    padding: 10px 19px;
    border-radius: 4px;
    background-color: #fff200;
    background-color: gold;
    font-size: 14px;
    cursor: pointer;
    color: #1d1e22;
    border: none;
    margin-top: 20px
}

Block, Inline, Inline-Block

Inline elements sit side by side whereas block elements stack on top of each other. span and a are examples of inline elements. We can't set height and margin top and bottom to inline elements.

Inline-block elements side by side. button and input are examples of inline-block elements. Set height and margin top and bottom. Set display to inline-block for link elements that work as buttons.

Rounded Images

Sometimes images appear oval rather than rounded. In such a scenario, set both the width and height of the image and give a 50% radius to it.

img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
}

margin: auto and align-self on flex children

when a container has a flex display, the children can be displayed in either direction using margin: auto to the top/bottom/right/left margins. align-self is another property that can be used on flex children to align in any direction. The default value is stretch.

ul  {
    list-style-type: none;
    align-items: center;
    margin:0;
    padding: 25px;
    display: flex;
    gap: 10px;
}
.align-right { 
    margin-left:auto
}

A list has three elements and a hamburger sign is displayed on the right with the margin-left set to auto.

Position: relative & absolute

When we want to set elements on top of the other, knowing how to position them is important. For eg, A container element has 3 child elements. If you want to display 3rd child on top of the first 2 children, then set the below properties:

parent {
    position: relative
}
child {
    position: absolute;
    top:0;
    left:0;
}

For the below image, the properties are set as follows:

.map-container {
    position: relative;
}

.sun-icon {
    position: absolute;
    top: 10px;
    left: 120px;
}

.temperature {
    position: absolute;
    top: 20px;
    left:165px
}

The parent container position should be relative to the position of the element. If no container, with relative position is found, the element positions itself relative the the window.

White Space below Images

In-line elements are given a white space at the bottom so they don't overlap with parts of letters 'p' or 'y'. This happens on images because Images are inline elements by default. To remove white space, use display:block or vertical-align:bottom

position: fixed V/S absolute

Use position: absolute to position an element relative to a containing element. The element scrolls with the content.

Use position: fixed to lock an element in a position relative to the window. It maintains that position even when scrolling. To align an element on top of a window just like when you are asked for cookie consent, use the following code:

element {
    position:fixed;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
}

Built Oldagram , using all the CSS concepts.

CSSHTML5