Introduction to CSS

#webdev #javascript #beginners #css

CSS Properties

background-color

.box {
  background-color: black;
}

border-radius

.box {
  border-radius: 10px; /* Rounded corners */
}

flex-direction

column – Items are arranged vertically (top to bottom).
row – Items are arranged horizontally (left to right).
row-reverse – Items are arranged horizontally but in reverse order (right to left).

.container {
  display: flex;
  flex-direction: column;
}

overflow

visible – Content overflows and remains visible.
auto – Scrollbars appear only when necessary.
hidden – Extra content is clipped and not accessible.

.box {
  width: 200px;
  height: 100px;
  overflow: auto;
}

CSS Variables

It allows you to define reusable values that can be dynamically updated, making stylesheets more flexible and maintainable.

:root {
  --primary-color: blue;
  --secondary-color: gray;
  --button-padding: 10px;
  --button-radius: 5px;
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: var(--button-padding);
  border: none;
  border-radius: var(--button-radius);
}

Different Ways to Color in CSS

Hex Code: #ff0000
RGB: rgb(255, 0, 0)
RGBA: rgba(255, 0, 0, 0.5)
HSL: hsl(0, 100%, 50%)
Named Colors: red

Pseudo Element

They are used to style specific parts of an element or to create additional styling without adding extra HTML markup

::before:
Inserts content before the content of the selected element

p::before {
    content: "Note: ";
    font-weight: bold;
}

::after:
Inserts content after the content of the selected element.

p::after {
    content: " (Read more)";
    color: gray;
}

Layout Systems

Flexbox
Designed for one-dimensional layouts (either rows or columns).

Grid
Designed for two-dimensional layouts (rows and columns).

Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

Mouse over the element below to see a CSS transition effect:
To create a transition effect, you must specify two things:

-> the CSS property you want to add an effect to
-> the duration of the effect

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

Media Query

/* Base styles for all devices */
body {
    font-size: 16px;
    background-color: white;
}

/* Styles for devices with a max width of 600px (mobile devices) */
@media (max-width: 600px) {
    body {
        font-size: 14px;
        background-color: lightgray;
    }
}

/* Styles for devices with a min width of 601px and max width of 1024px (tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
    body {
        font-size: 18px;
        background-color: lightblue;
    }
}

/* Styles for devices with a min width of 1025px (desktops) */
@media (min-width: 1025px) {
    body {
        font-size: 20px;
        background-color: white;
    }
}

Selectors in CSS

Element: p { color: red; }
Class: .class { color: blue; }
ID: #id { color: green; }
Attribute: [type="text"] { color: yellow; }

Ways to Write CSS

Inline CSS: style="color: red;"
Internal CSS: p { color: blue; }
External CSS:

<link rel="stylesheet" href="styles.css">

Naming Conventions

Camel Case: myVariableName
Pascal Case: MyVariableName
Snake Case: my_variable_name
Kebab Case: my-variable-name
Pseudo-class: :hover { color: purple; }
Pseudo-element: ::after { content: ""; }

Stay Connected!
If you enjoyed this post, don’t forget to follow me on social media for more updates and insights:

Twitter: madhavganesan
Instagram: madhavganesan
LinkedIn: madhavganesan