CSS - Basics

November 09, 2023

CSS

Universal Selector

Matches any element type’s name

* {
	color: blue;
}

Ruleset

Used for identification of selectors, which can be attached with other selectors

Declaration Block - Contains one or more semicolon separated declarations
Selector - Indicates the HTML element needed to be styled

Elements of CSS Box Model

Defines layout and design of CSS elements.

Elements are content, padding, border, margin.

Difference between `id` and `class`

Class (.) - Way of using HTML elements for style.
- Re-usability
- Modularity
- Multiple Elements
- Example - Button
ID (#) - Single element
- Uniqueness
- High Specificity
- Example - Page Header

If an element has both class and id, id will take precedence

Intermediate

z-index

Specify stack order of elements that overlap each other.

Default value is zero. It can take both negative and positive values.
A higher z-index value is stacked above lower index element

Target `h3` and `h2` with same styling

Target by separating with a comma

h2, h3 { color: red; }

Control Image Repetition

h3 {
	background-repeat: none;
}

Image Scroll Continuation

Fixed background image example

body {
	background-image: url(`url_of_image`);
}

Font Related CSS attributes

style
variant
weight
family
size

Position

Fixed
- Normal flow
Static (Default)
- Normal flow
Absolute
- Positioned relative to closest ancestor
Relative
- Positioned relative to normal position. Use top, left, right and bottom properties to offset them.
Sticky
- Initially positioned like relative, but become fixed when a specific scroll position is reached

Float

I prefer direction, justifyContent, alignItems provided by Grid in MUI

Flex-box

Grid is an example by MUI.

flex-direction
justify-content
align-items
flex-grow

Untitled

Advanced

Styled Components

Button

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #2980b9;
  }
`;

MUI Button

import Button from '@mui/material/Button';
import styled from 'styled-components';

const StyledMuiButton = styled(Button)`
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #2980b9;
  }
`;

CSS