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
Top comments (1)
feels good