Introduction to CSS

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