DEV Community

Cover image for Introduction to CSS
Madhav Ganesan
Madhav Ganesan

Posted on • Edited on

1

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;
}
Enter fullscreen mode Exit fullscreen mode

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

p::after {
    content: " (Read more)";
    color: gray;
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
ajagbe_jubril_1471f80590c profile image
ajagbe jubril

feels good

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more