Gray VS grey? Is there a right choice between these two? It is well known that both gray and grey in CSS are considered equivalent with no impact on functionality. We can use either of them without any issues. In the context of web development and CSS, they are both recognized and accepted. CSS specifications and web browsers accommodate both equally.
Why 🤔 do web designers and programmers use both gray and grey in CSS?
Because they wanted to add a little color to the spelling debate!
Below we can see an example of two elements. We set gray for the first element while the second element has grey:
/* Using "gray" (American English) */.first-element {color: gray;}/* Using "grey" (British English) */.second-element {color: grey;}
CSS
Both examples are correct, and your CSS should be functional, .first-element and .second-element classes will share the same color, as CSS treats gray and grey interchangeably.
It turns out that the choice between gray and grey in CSS is primarily a matter of personal preference and doesn’t affect how web browsers interpret your code. You are free to use either.
Similarly, there are other color names with variations in spelling that are recognized by most modern browsers, for example, “lightgray” and “lightgrey” or “darkgray” and “darkgrey” are all valid. 😃
Imagine infusing your web typography (fonts) with the vibrant hues of a dazzling 🌈✨ rainbow! Cascading Style Sheets (CSS) empower designers and developers to bring this captivating vision to life. A colorful font like the CSS rainbow effect is more than just a spectrum of colors; it’s a creative and dynamic way to enhance your website’s visual appeal and make a lasting impression on your visitors.
Today, with this post, 😃 we’ll dive into the exciting world of creating a rainbow effect, unlocking the magic of colors and typography to elevate your web design. Enjoy! 💻
Prepare basic HTML and CSS structure
We begin with our HTML and CSS structure. We create an HTML <div> element that has a class called rainbow-effect. Then, we set some rules in CSS that are applied to our HTML element. So, let’s move forward and analyze our CSS code snippet.
body {background-color: #050c20; /* deep blue */}.rainbow-effect {text-align: center;color: white;font-size: 180px;font-weight: bold;font-family: 'Roboto', sans-serif;}
CSS
First of all, we set the background color of our body to be a deep blue. Then, we proceed with our text. We create a center aligned, white180px text with bold and highly legible fonts, as we specifically seek a font with excellent readability.
Once set, we can then proceed with our tweaks in order to infuse the text with the enchanting hues of a rainbow. The following image shows what is rendered on the screen for the time being. 😃
background-image: linear-gradient The first thing we need to know is that by using the background-image CSS property we are able to create a background with more than one color.
We do so by setting the linear-gradient value, and we are free to choose any color and any direction we want for our text. In our case, we use the to right direction and the gradient starts with the color red on the left and smoothly transitions through orange, yellow, green, blue, indigo, and violet as it moves from left to right. So, it gives a colorful, horizontal stripe-like background.
You are always free to choose any direction of the linear-gradient you like! 👍
background-clip: text We continue our work with the background-clip property which is used to define how the background should be clipped or masked. In our case, it’s set to text, which tells the browser to apply the background gradient only to the text inside our div.
What? Nothing happened yet? Why? Using this property, the colorful background is applied to the text, but the effect is not visible yet because it is necessary to proceed to our next step 🧐 ⬇ in order to achieve the final and desired results. So, let’s move on!
color: transparent Finally, adding the color property to transparent renders the text itself invisible, allowing the colorful background to show through the text. And there it is! 🥳
So, in summary, putting it all together, when you use this code, you’ll have a text with a colorful gradient background (rainbow colors) that appears within the text. The text itself is invisible, creating a striking and colorful text effect. 🎉
Our life consists of large and small boxes! By saying that, I mean all those things we have to deal with daily, and we usually put them into categories as we do in programming with boxes by using the amazing CSS box model property. Are these boxes a mystery 🧐 puzzle 🧩 or could they end up being really helpful when we truly understand how they work? Let’s continue and get a clearer understanding of it! 😀
What is a CSS box model?
By saying CSS box 🎁 model we mean the space which contains an HTML element. A CSS box consists of:
1) Content: This is the space that the HTML element occupies. By content, we mean text, images, lists, avatars, videos, icons, shapes …
2) Border: It’s the line we surround something. We could define it as a frame that encloses HTML elements. Border doesn’t include content, it’s an independent property. Border property can take only one value (border) or many values (some we use more are border-width, border-style, border-color, border-radius, border-image but there are many others too). You can also set different values for each side of the border with border-top, border-bottom, border-left, border-right CSS properties.
3) Paddings: It’s the distance between content and border. We can set the same value for all four sides (padding) or we can set different values for each side (padding-top, padding-bottom, padding-left & padding-right).
4) Margins: It’s the external distance between HTML elements. By setting margin in one value it works the same for all four sides of the element, otherwise, you can set dissimilar values with margin-top, margin-bottom, margin-left & margin-right CSS properties.
We can COMBINE all these properties in a CSS box but we can also use them separately. Below, we have an image that shows a CSS box model diagram.
Paddings and margins are both transparent. Paddings use the same background as the one used by the main content, while margins inherit their background from the parent element to which they belong.
CSS Box model example
We can now take a break ☕ and continue… Let’s analyze a little bit more our CSS box model with an example. First, we have to write down our HTML & CSS code withoutpadding, border & margin. The image, that follows our code snippet, shows what was rendered through our code.
<body><divclass="title"> Hello there! How are you today?</div></body>
HTML
html,body {height: 100%;}body {/* we use display property to center our HTML element to the body */display: flex;align-items: center;justify-content: center;background-color: grey;}.title {text-align: center; /* to center our text */color: blue;background-color: purple;font-size: 40px;width: 300px;height: 100px;}
CSS
For the time being, we are able to observe the content displayed on the screen.
Below, we can see the same example after addingpadding, border & margin.
.title { .../* if you have different values, instead of padding-left padding-top, padding-right, padding-bottom you can write all padding values together like above. */padding: 50px150px100px150px; /* top, right, bottom, left *//* instead of border-width, border-style & border-color you can write just border and set all these values together like above */border: 20pxsolidblack;/* if margin-top & margin-bottom have the same value, margin-left & margin-right the same too you can write all margin values together like above */margin: 50px100px; /* (top & bottom 50px) then (left & right 100px) */}
It would be helpful to understand the calculation process for determining “Total Width” & “Total Height” and make the concepts clearer. At this point, it would be really helpful to know that the CSS box model has, by default, box-sizing: content-box which means that borders and paddings take extra place around the object we want to add them.
Margins are NOT included, as they are outside the CSS box model.
🕵️♀️ There is a method to include borders and paddings within the box’s dimensions. If you’re interested in learning more about the box-sizing CSS property to achieve this, I recommend checking out our guide for detailed insights on this topic. You will find detailed instructions and explanations.
When we want to SEPARATE HTML ELEMENTS we must use margin instead of padding. Most times, we work without borders, so we can’t see the elements’ boundaries. Because of that, we think that we can use both paddings or margins to create space between elements, BUT we should NOT. I’ve included an example with two images below, to show you the wrong usage of separating elements using padding instead of margin. As you see, when we use padding, even though we create space, we do it the wrong way.
We should not separate HTML elements using their INNER SPACE (padding).
Welcome to a world where ⚫ black and ⚪ white aren’t just colors. In this post, 😃 we’ll explore the exciting world of creating black and white CSS stripes. It is a really cool effect to level up your text by adding stripes, making it even more fascinating and appealing.
We will be learning about this effect by using an example to make it crystal clear. Let’s check it out! 👩💻
Create basic HTML and CSS structure
We will begin with our HTML and CSS structure. Our HTML code includes a <div> element that has a class named .stripes-effect for identification and styling purposes. Following that, we add some CSS rules to apply specific styles to our HTML element with this class.
<body><divclass="stripes-effect">black & white text with shadow</div></body
HTML
body {background-color: black;}.stripes-effect {font-family: 'Bungee', sans-serif;text-align: center;color: white;}
CSS
By doing so, our heading is ready for applying our CSS stripes effect and should now look like this
Adding black and white vertical stripes
Now that we have added our basic structure, we’ll create our stripe effect gradually, step by step, until it’s perfected. Let’s add the following styling
.stripes-effect { ...background-image: linear-gradient(to right, white, black, ...);/* clips the background pattern */background-clip: text;/* makes text invisible */color: transparent;}
CSS
In our already existing .stripes-effect class, we have the following rules:
background-image: linear-gradient(to right, white, black, ...) ➡ We begin by setting this CSS property that creates a background pattern using a gradient of alternating black and white stripes from left to right. The default direction is from top to bottom.
Don’t worry if our black-and-white text is hard to read; 🕯 😂 it is a temporary phase just to serve our purpose for now. We will move forward and see! So let’s proceed immediately! ⏳
background-clip: text ➡ By adding this property, it clips the background pattern to the shape of the text, making the text appear as if it’s filled with black and white stripes. If we just add this property and leave our CSS settings without any other change, our effect will not show properly.
If we want this to see our effect it is necessary to proceed with the following step (color: transparent ⬇).
color: transparent ➡ It’s time to make the text transparent, enabling the background pattern we created in the previous step to be visible!
The Zebra effect is not limited to vertical stripes (linear-gradient) for your texts; you can explore more options and create any effect you want. Below, you will find some variations to give you the inspiration you need.
Hello everyone! 😃 Today, we will learn how to create a cool CSS reflection effect. Through step-by-step instructions, we will understand how to manipulate linear-gradient and opacity CSS properties to create a stunning mirror-like effect. Below, I’ll include’ll give you all the information you need. Let’s get started.
HTML structure
Our HTML structure starts with an empty div element, with the class .reflection where our effect will take place.
<divclass="reflection"></div>
HTML
CSS foundation
Let’s continue with the CSS basic structure. We will start by setting the background-color to orange.
body {background-color: orange;}
CSS
Creating the element
In the following step, we will define the element. I opt for a color black rectangle with 300 pixels width and 200 pixels height.We will also be adding the flex method to the body to center our element.
body { ...display: flex;align-items: center;justify-content: center;}.reflection {width: 300px;height: 200px;background-color: black;}
CSS
This is what is rendered on the screen for now. A perfectly centered black rectangle!
Adding the CSS structure for the reflection effect
A CSS reflection effect can be accomplished using pseudoelements like before and after.First, we need to add position: relative in our .reflection class to get prepared for our pseudoelement’s positioning.
.reflection { ...position: relative;}
CSS
Then we are ready to create our reflection utilizing the before pseudoelement.
We initiate by setting the the position as absolute. Setting the content to an empty string (“”) and then its width and height to 100%, will make our pseudoelement appear and inherit its parent’s dimensions (width 300px and height 200px).
Next, we add a background: linear-gradient that goes downwards, by specifying its direction, from top to bottom. This way, we create black gradients that are more intense at the top and gradually fade toward the bottom to achieve our desired effect.
So far, we have created the CSS reflection effect below our original rectangle. However, we need to take one more step for our effect to be visible. We add the top CSS property and set it to 205 pixels. This will move our reflection 5 pixels down from the origin rectangle.
.reflection:before { ...top: 205px;opacity: 0.5;}
CSS
Additionally, we set the opacity to achieve a smoother and more natural-looking effect. You might be thinking that the same result could be accomplished by adjusting the linear-gradient property and you are right. It’s just that using the opacity this way requires much less effort and produces similar results.
🔖 Feel free to use any color you prefer, but it’s important to create a linear-gradient that gives the perspective shades. Here are examples of white and yellow reflections. I am keeping the orange background to facilitate easier comparison.
Choosing the perfect colors with their appropriate shades can truly transform your work. Be bold in your choices and let your creativity shine. Remember, there are endless possibilities and your creativity knows no bounds. 🎉 ✨
Greetings! 😃 Utilizing CSS radial gradient techniques is a remarkable approach for vibrant, colorful combinations. Gradients give us the liberty to choose any desired direction, defined by a clear starting and ending point. Using a minimum of two colors is essential, but we are free to blend even more based on our needs. This lets us achieve progressions or variations based on our specific requirements.
In today’s post, we will analyze the captivating world of CSS radial gradient techniques. 🌈✨ Imagine colors coming out from a central point, spreading outwards in a circular fashion—an effect 🌀 that can truly elevate your design.
Radial gradients offer a versatile approach to blending colors, creating central points or smooth transitions. By mastering radial gradients, you unlock the potential to infuse depth and excitement into your web design.
Excited to learn more about this captivating technique? Let’s dive 🤿 right in! 💻
Definition of a radial gradient
A radial gradient is a visual effect in which colors blend outward from a central point, creating a smooth transition from one color to another in a circular or elliptical pattern. Circular ones spread colors outward from the center, evenly, making a symmetrical look. Elliptical ones also start from the center but stretch the colors toward the edges, creating an oval appearance.
A radial gradient is a visual effect in which colors blend outward from a central point, creating a smooth transition from one color to another in a circular or elliptical pattern
The default CSS radial gradient
We’ll start by exploring the default orientation for the radial gradient which starts in the center of our elements and spreads outward. To better understand, look at the following piece of code and the pictures that go with it.
The first picture shows a circle, while the second one depicts an ellipse.
We can change the center of our element by setting circle at left , circle at top , circle at bottom and circle at right. To understand this better we’ve prepared an example. As before, the left picture relates to the circle, whereas the second one refers to the ellipse.
.radial-at-side {background-image: radial-gradient(circle at top, red, green, blue);}/* circle default */.box-square {width: 240px;height: 240px;}/* elliptical default */.box-rectangle {width: 340px;height: 240px;}
CSS
Center at corners
Also, the diagonal direction of our circle can change if we combine any corner with its adjacent sides.
.radial-at-corner {background-image: radial-gradient(circle at topright, red, green, blue);}/* circle default */.box-square {width: 240px;height: 240px;}/* elliptical default */.box-rectangle {width: 340px;height: 240px;}
We are also up to play with the blend we want to create. In the following example, the gradient blends between various colors in a circular pattern, it begins with red at the center, transitioning to green, then blue, purple, and finally orange at the outer edge.
🕵️♂️ In this example, I’ve divided the space into 3 sections. I left a 10% blend in each space in order to create a smooth small transition. The percentages between the color stops, determine how smoothly the transition between colors happens.
Red (0%-20%): The gradient starts at the center (0%) with the red color.
Red to Green (20%-30%): Within this radial range, there is a subtle transition from red to green, creating a visually appealing blend.
Green (30%-50%): the gradient takes a solid green color.
Green to Blue (50%-60%): Between this radial distance, there’s a gentle transition from green to blue.
Blue (60%-100%): Finally, the gradient concludes with a blue hue, providing a vibrant and visually striking finish.
Without blend
We also have the option to make non-blend gradients. As you can see below, the gradient consists of multiple color stops, transitioning from red to orange in a radial pattern, like colorful rings. Each color is assigned to specific percentage intervals, creating a visually appealing gradient effect.
🕵️♂️ In this example, I’ve divided the space into 3 sections. There is no blending among them. We can see a shape like a target, 🎯 that creates clear bands of sharp colors.
Hey there! Today, I’m gonna teach you how to use CSS transform scale on hover by using the transform: scale property. I’ve already created an avatar in order to make our animation more understandable and fun! 😄 If you’re curious about how I made the avatar, you will find the complete avatar code at the end of my post. You are encouraged to incorporate it into your animation as well 😉 The choice is yours!
Meanwhile, let’s just dive 🤿 into creating these amazing scale animations!
Meanwhile, let’s just dive into creating these amazing scale animations!
HTML structure
In order to create the scale transformations, first of all, it is necessary to make a container, which I named scale-content. This is the ‘place’ where we will do our CSS manipulations. After that, we move forward with a second container, the avatar-container. I named it that way as I intend to position the avatar inside it. As a matter of choice, 😊 you are able to add the avatar, too. Otherwise, you can continue only with the box. Once we prepare those two containers we are ready to move on.
<divclass="scale-content"><divclass="avatar-container"> ... Here goes my avatar</div><!-- end of avatar-container --></div><!-- end of scale-content -->
HTML
CSS basic styling
Next, we do the appropriate settings in order to center our container to the body, using the display: flex CSS property. We have also added the colors, setting body-color and container-color.
We begin with position: relative CSS property to the parent container and position: absolute to the child container in order to achieve the desired positioning of elements. Next, we specify the width and height of both containers according to our desired dimensions. We also use the CSS properties we want in order to create our avatar-container with the willing characteristics.
.scale-content {position: relative;width: 320px;height: 320px;.avatar-container {position: absolute;width: 100%;height: 100%;background-color: $container-color;border: 2pxsolidblack;box-shadow: 0010px;border-radius: 50%;overflow: hidden; } /* end of avatar-container */} /* end of scale-content */
SCSS
Great! Now, take a break and look at the container we made using our earlier code. Feel free to go with it, or you may come up with your own! 😊
Our containers are ready!! We can continue by doing our manipulations and creating scale transformations.
We apply the transition: transform CSS property to the parent element, which enables us to achieve smooth changes in property values within a specified duration. As you can see below, I set 4s, and as a result, our transition lasts 4 seconds.
Next, we set the CSS transform: scale(X, Y) property on the child element in order to resize, increase, or decrease the size of an element in the axes. We have the capability to simultaneously resize both axes with the same or different values or selectively resize either the X-axis or the Y-axis.
💡 Below there are some examples of scale transformations as a way to understand it better 😃
transform: scale(X, Y) with the same value on both axes
Resizes (increases) with the same value, the size of an element in both axes.
.scale-content { ...transition: transform 4s; &:hover { cursor: pointer;transform: scale(1.2); }.avatar-container { ... } /* end of avatar-container */} /* end of scale-content */
CSS
Resizes (decreases) with the same value, the size of an element in both axes.
.scale-content { ...transition: transform 4s; &:hover { cursor: pointer;transform: scale(0.5); }.avatar-container { ... } /* end of avatar-container */} /* end of scale-content */
CSS
transform: scale(X, Y) with different values on both axes
Resizes (increase the width and decrease the height), with different values, the size of an element in both axes.
.scale-content { ...transition: transform 4s; &:hover { cursor: pointer;transform: scale(1.4, 0.4); }.avatar-container { ... } /* end of avatar-container */} /* end of scale-content */
CSS
Resizes (decrease the width and increase the height), with different values, the size of an element in both axes.
.scale-content { ...transition: transform 4s; &:hover { cursor: pointer;transform: scale(0.4, 1.4); }.avatar-container { ... } /* end of avatar-container */} /* end of scale-content */
CSS
transform: scale(X) increase or decrease width
Resizes (increases) the width of an element (X-axis).
.scale-content { ...transition: transform 4s; &:hover { cursor: pointer;transform: scaleX(2); }.avatar-container { ... } /* end of avatar-container */} /* end of scale-content */
CSS
Resizes (decreases) the width of an element (X-axis).
.scale-content { ...transition: transform 4s; &:hover { cursor: pointer;transform: scaleX(0.2); }.avatar-container { ... } /* end of avatar-container */} /* end of scale-content */
CSS
transform: scale(Y) increase or decrease height
Resizes (increases) the height of an element (Y-axis).
.scale-content { ...transition: transform 4s; &:hover { cursor: pointer;transform: scaleY(2); }.avatar-container { ... } /* end of avatar-container */} /* end of scale-content */
CSS
Resizes (decreases) the height of an element (Y-axis).
.scale-content { ...transition: transform 4s; &:hover { cursor: pointer;transform: scaleY(0.5); }.avatar-container { ... } /* end of avatar-container */} /* end of scale-content */
Hello, everybody 😃 Get ready to add a vibrant twist to your web designs with my latest post on fonts. In this post, we’ll explore the fascinating world of typography, sharing clever ways to add a burst of colors, outlines, shadows, and CSS colorful text. Whether we are looking to level up designs or experiment with CSS, this post provides the inspiration and know-how to make texts truly stand out on your screen. Stay tuned for an amazing journey into the art of CSS typography! 🌈✨
We already know the color CSS property. When setting the text color, we’re setting the color of the text itself. In contrast, setting the background-color sets the background color behind the text. But what if we want a more challenging font? Can we do that? Absolutely!
Below, I prepared an example as a way to make it more understandable. Enjoy! 💻
Preparing our HTML and CSS structure
The following code creates a colorful text with gradient, outline, and shadow. We will start with our HTML structure. Our body has background-color: black. Inside, we make an HTML div element that serves as a container for our text and has a class attribute named font-effects.
<body><divclass="font-effects"> colorful text with gradient, outline & shadow is so impressive</div></body>
HTML
Next, let’s proceed with our CSS structure. The font-effects class contains the rules applied to the HTML element mentioned earlier. We’ll provide a thorough examination of these rules as we progress through this post. For now, it’s important to note that our text has color white, our body has background-color black, and we’ve also integrated (@import url(...)) a font-family of Google Fonts.
Ensure this statement is placed at the beginning of your CSS code snippet, just like I did (check line 2).
/* insert google fonts */@importurl('https://fonts.googleapis.com/css2?family=Stick No Bills');body {background-color: black;}.font-combinations {width: 1100px;font-size: 150px;color: white;font-family: 'Stick No Bills', sans-serif;text-align: center;}
CSS
The following image shows what is rendered on the screen now.
Inside the .font-effects style rules, we include the following instructions to create these amazing fonts:
.font-combinations { .../* adding colors */background-image: linear-gradient( to rightbottom, red0, green15%, orange25%, pink25%,transparent27%, indigo27%, orange50%, black50%,transparent52%, green52%, indigo73%,transparent73%, pink75%, orange75%, green90%,red100% );/* Makes the text shape match the background */-webkit-background-clip: text;color: transparent;/* adding outline to text */-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: pink;/* adding shadow to text */filter: drop-shadow(-2px2px2pxrgba(250, 190, 210, 0.8));}
CSS
Adding the linear gradient effect
background-image: linear-gradient(...) ➡ This CSS rule creates a background gradient using the linear-gradient function. The gradient begins with red, transitions to green, and then shifts to orange. It then transitions to pink, becomes transparent, then indigo, returns orange becomes transparent once more, shifts to green, then indigo, then transparent again, returns to pink, then orange for the third time, then green, and finally returns red again.
Remember that this gradient will be used as the background for our text. Isn’t this awesome? 😎
-webkit-background-clip: text ➡ We continue with this CSS rule that tells the browser to clip the background gradient to the shape of the text. We are not ready yet to see the colorful background as text. 😕 We just prepared the space (fonts). Don’t worry we will proceed with our work and see the amazing result! 😉
color: transparent ➡ This CSS rule makes the actual text content transparent. This allows the colorful gradient to show through the text 🥳, and there it 🥁 is!
Adding the outline effect
-webkit-text-stroke: 2px red ➡ Then we add a pink outline or stroke with a width of 2 pixels. This makes the text more visible against the background gradient.
🔖 We are free to write it more analytically setting the following two CSS properties -webkit-text-stroke-width and -webkit-text-stroke-color. It’s up to you!
Applying the shadow effect
filter: drop-shadow(-2px 2px 2px rgb(250, 190, 210, 0.8)) ➡ To finalize our work we add a shadow to the entire section, with an offset of -2 pixels to the left, 2 pixels down, a blur radius of 2 pixels, and a subtle pink shadow rgba(10, 10, 10, 0.8). This deep shadow adds a subtle but noticeable darkening effect to our text.
To infuse our text with a touch of fantasy and vibrance 🎉 ✨, we can use a brighter color for the outline and change the shadow to match. For example, we could create a vivid or dark background as a way to create contrast and then swap out the pink outline and shadow for a more vibrant magenta. In the picture below, you can see how these small changes make a big difference, giving a more colorful and bright result.
Hello, there 😃 Let’s step into a digital world where CSS brings forth the captivating CSS text outline effect. It’s a simple yet powerful technique that adds structure and clarity to texts and elements.
Let’s dive into how CSS outlines 🖋 can make a significant difference in the visual appeal of your website. 💻 🫧
Create basic HTML and CSS structure
As a first step, we need some basic HTML structure to apply our CSS stylings.
Let’s see what we have done so far. I have chosen a vibrant purple color for our background while keeping the text in the default black color. Our text is set to 180px, perfectly aligned to the center.
To give a playful and lively vibe to our design, I’ve chosen the “Emily Candy” font-family which adds a delightful touch. If you also intend to use this font family, importing it into your CSS file is essential. Ensure the @import statement is placed at the beginning of your CSS code snippet, just like I did (check above lines 2-4).
In the image below, you can see the current rendering on the screen up to this point.
Apply the CSS text outline effect
.outline-effect { ... text-stroke: 2px#8695e9; // medium blue shadecolor: transparent;}
CSS
The first thing we have to do is set the text-stoke property which represents a specific style line. Here, in our example, the text should have a light to medium blue color (#8695e9) outline with 2 pixels wide. Remember that as we increase the pixels, the outline becomes wider.
🔖 It’s useful to know that we can split the text-stroke property in two: text-stroke-width and text-stroke-color.
Hello everybody! 😀 In this post, we’ll work with the amazing CSS border property, which is basically the line that surrounds our objects. Borders are an independent property and do not affect the content within. You can think of borders as beautiful frames that enclose HTML elements. ✨ 🖼 Let’ dive into the details of CSS border styles.
When working with borders in CSS, we have four key properties to consider:
border-width
border-style
border-color
border-radius
Furthermore, we have the option to handle each side individually by using properties like border-top, border-right, border-bottom and border-left. We can either modify all four sides at once or selectively apply changes to different sides.
Below, there are some basic examples of borders so that you can have a quick glimpse of the possibilities offered by this CSS property. Afterward, we will go deeper and explore every case more analytically.
CSS border style – The playful property
We can now move forward and focus on the first thing we need to know about borders is the border-style CSS property. There are many styles available, but for today, we will concentrate on the most common ones.
The first and most usual is the solid type which is just a simple line. Then we have the double which is as you’d expect a double line border. Another style is the dashed one in which, the line is made up of dashes. It’s nice to have clear and descriptive names right? Finally, the dotted style is the one in which the border line consists of dots.
Below, you will find examples showcasing the styles we’ve just mentioned alongside their respective CSS code:
Now that you’ve seen the basic border stylings, it’s time to check out the border’s width property. By default, borders have 1px width. To change that, we must modify the border-width property according to our needs.
Before we continue, it’s important to give you some insights on an important property that directly affects border behaviors and is called box-sizing. Box sizing’s value is set, by default, to content-box . Because of that borders occupy additional space around the objectsthey surround.
In simple words, if I have a box with 300px width and 200px height and I want to add a 20px border to all sides, then I will end up having a bordered box with 340px width and 240px height. Let’s see how I came up with this result:
🕵️♀️ By exploring the box-sizing CSS property, we can include borders within the box’s dimensions. If you’re interested in learning more about it check out my post. You will find detailed instructions and explanations on each box sizing method.
CSS border color – For vivid results
The next step is to understand how border color works. By default, borders are always rendered in black. This means that if we don’t specify a color our borders will automatically display in black.
By default, borders are always rendered in black
However, if we want a different color we have the freedom to choose any color we desire and simply assign it to the border-color property. Let’s see that in action:
border-color: blue;
CSS
Border colors can be described using various different value types. For instance, you can specify the color blue by using :
There is a cool method for writing all the above border properties that prove to be highly useful. By choosing this approach, you can set multiple values simultaneously. This technique is a super efficient way to define all border properties in a quick and easy manner. It’s a total time and space saver! 😃
Instead of listing each property separately, you just add each property side by side in a single line:
border: 10px dashed blue;
CSS
Cool right? 😎 ✨ Keep in mind that the order of the property doesn’t matter! We usually start with pixels and then add style and color, but it’s up to you the final decision!
CSS Border Styles for unique results
Additionally, we have the flexibility to selectively choose specific sides when defining our border styles. This allows us to create borders combined with different styling. In the following example, you can check out some of these combinations. But still, you are free to make your own! 😀
🔖 Keep in mind when working with the CSS border property that it is considered a good practice to set equal border widths for all sides. Being consistent helps by bringing a sense of balance and distraction-free results. Furthermore, try to avoid mismatched styles and colors. Matching styles and colors lead to a smooth and cohesive look that’s easy on the eyes. Not to mention, it keeps your code cleaner 🎉 and easier to manage. 😀
Last but not least we have the border-radius CSS property, which enables us to give our elements rounded corners. We can opt for uniform rounding or we can apply different degrees of rounding to each corner. In addition to that, it’s useful to know that when we are working with different radius per corner, we can also combine px with %.
When we are setting different border-radius per corner, we are free to combine px with %.
Hi to everyone 😃 Today, we will analyze the CSS text decoration property, which is a valuable tool for improving the presentation of text on your website. It allows us to add visual enhancements such as underlines for hyperlinks, strikethroughs for completed tasks, or the removal of decoration for a clean and professional appearance.
With minor code adjustments to our CSS code, we can enhance the visual appeal of our text content. Consider integrating it to elevate the aesthetics of our website. Below, I’ve prepared a detailed guide.
Wishing you bug-free reading 👩💻, I mean coding! 💻 ✨
Text-decoration line
First of all, we define the position of the line we desire by setting text-decoration-line. Those are: underline, overline, and line-through.
text-decoration-line: overline;
CSS
text-decoration-line: underline;
CSS
/* text-decoration: line-through is also a way to write it */text-decoration-line: through;
CSS
/* we are also able to make line combinations */text-decoration-line: overline through underline;
CSS
Text-decoration style
Next, we proceed by configuring text-decoration-style to specify the desired line style, such as solid, dashed, dotted, double, or wavy.
🔖 Each example set a different position (text-decoration-line) for the lines as an opportunity to see more combinations. 😎
Using colors is a timeless strategy for enhancing aesthetics. Embracing the use of colors is equally effective in our case, accomplished through the addition of text-decoration-color.
/* default color value */text-decoration-color: black;/* or */text-decoration-color: initial;
CSS
text-decoration-color: orange;
CSS
.text-color {color: green;}/* inherits text's color */text-decoration-color: current-color;/* or */text-decoration-color: inherit;
Lastly, adjusting the text-decoration-thickness allows us to precisely manage the thickness and also offers us the flexibility to choose between pixels (px) or percentages (%) based on our preferences.
/* the browser pick the thickness of the text decoration line */text-decoration-thickness: auto;
CSS
/* means "use the default thickness for underlines as determined * by the browser". */text-decoration-thickness: initial;
CSS
/* The percentage value is relative to the font size of the text * to which the decoration is applied. * Example: * In our case the font size is set to 40 pixels, * so the underline will be 6 pixels thick, * which is 15% of its font size (15% of 40 pixels) */text-decoration-thickness: 15%;
CSS
/* override the applied default thickness */text-decoration-thickness: 10px;
CSS
<divclass="parent"> hello, I'm the parent<divclass="child">hi, I'm the child</div></div>
HTML
/* Thickness for the parent element */.parent {text-decoration: underline;text-decoration-style: solid;text-decoration-thickness: 20px;}/* Inherits thickness from the parent */.child {text-decoration-thickness: inherit;}
CSS
Be distinctive by mixing text-decoration
We can always create mixings and make our texts more strong and more stylish. Below I prepared two examples for you in order to make it clearer. 😃
Underline mixings
We combined the following HTML and CSS code snippets to create a styled text element. The HTML part consists of a <div> element with the class underline-mixings containing the text hello and a nested <span> element with the class extra-underline, also containing the text hello.
The CSS styles are applied to these elements using their respective class selectors. The underline-mixingsins class applies an underline with a double style and green color to the text within the <div>.
On the other hand, the extra-underline class applies a red dashed underline to the text within the <span>, along with a 12-pixel thickness for the underline.
When combined, this code creates a styled text element where the text inside the <div> is underlined with a green double line, while the text inside the <span> has a red dashed underline with increased thickness. We can use it if we want to emphasize a specific part of a text.
Strike through mixings
Within the HTML code, there is a <div> element with the class strike-through-mixings, encompassing the text hello and containing a nested <span> element with the class extra-underline, which also contains the text hello.
The CSS styles are assigned to these elements through their corresponding class selectors. The strike-through-mixings class gives the text within the <div> an underline with a solid style and a green color. Meanwhile, the extra-underline class applies a red double line-through decoration to the text inside the <span>, with an 8-pixel thickness.
When we put together this code, generates a styled text element where the text within the <div> has a green solid underline, and the text within the <span> is displayed with a red double line-through decoration of increased thickness. It is really useful if we want to erase a part of a text.
Text-decoration shorthand
The CSS text-decoration shorthand property lets you apply decorations like underline, overline, and line-through in a single statement. It simplifies things by merging multiple properties into one. Settling the shorthand makes your code shorter and easier to understand. You can set all of these properties at once, making it more efficient or you can pick some of them based on your requirements.
The CSS text-decoration shorthand property lets you apply decorations like underline, overline, and line-through in a single statement
🔖 Note that the order of these values doesn’t matter; you can change the order and still achieve the same results. However, it is essential to specify the type of the line, as setting the text-decoration-line is a necessary step for your code to work properly.
Hello there! 😃 In this post, we’ll explore the unique CSS box sizing property, which is a part of the box model. We’ll explore how this property affects the size of an element on a webpage and take a closer look at the details of the content-box and border-box CSS properties.
So, let’s move forward and delve into 🕵️♀️ the powerful box-sizing CSS property!
First of all, we have to create a simple box with specific dimensions for its width and height. Also, assigning a color for our box would be essential, hence, we also need to set a background-color. I like the idea of giving our box a vibrant and cheerful yellow 🟨 as it is super appealing! 😃
Since our box is now prepared, 🥁 we can proceed further by adding padding, border and margin and observe the changes in the dimensions surrounding our box.
Paddings & margins are both transparent. Paddings use the same background as the one used by the main content, while margins inherit their background from the parent element to which they belong.
🔖 For today, and only in order to make our example more explicit and easily understandable, we have chosen to apply a purple 🟪 color to the padding. In the image below we can see what is rendered to our screen based on the code snippet.
.box { ...padding: 20px; /* to all 4 sides */border: 5pxsolidblack; /* to all 4 sides */margin: 50px; /* to all 4 sides */}
CSS
Understanding CSS content-box
First and foremost, we need to know that all elements have, by default, box-sizing: content-box. That means when we add border and padding to an element, it automatically grows bigger and occupies more place.
(The provided code snippet serves as an illustration of the configuration. It should be emphasized that this snippet is specifically designed for the purpose of this example, and represents the default setting, as we previously mentioned).
The box-sizing property does not have any effect on margins as they are already positioned outside of the element’s space and are not considered part of it.
To modify the default configuration and include the borders and paddings of an element within its initial size, it is necessary to apply the CSS property box-sizing: border-box. This property ensures that the specified width and height of the element is now adjustable and the content box can reduce its dimensions in order to include/accommodate paddings and borders.
To summarize in a nutshell, 😌 content-box calculates the width and height based only on the content while border-box includes the paddings and borders in the calculation.
Let’s examine both images side by side to simplify the contrast of their different sizes.
Tech tips
* {box-sizing: border-box;}
CSS
🔖 We usually choose the border-box method due to its simplicity in achieving consistent layouts. We include the corresponding code in our CSS files by setting the asterisk (*) from the CSS selectors. By doing so, we apply it to all HTML elements, hence, we no longer need to include it repeatedly in each HTML 👌 element.
In this post, we will explore how to center elements in CSS using various methods and make our lives, as developers, much easier. Are you ready to dive deeper? Take your snorkel 🤿 and follow me!
As in life, so in programming, placing items in a way that will be helpful or more beautiful, is one of the most important things you can achieve. There are plenty of ways to place or position (in programming terms) items, although it still remains quite a challenge.
We will start by adding our basic HTML & CSS structure:
Now, we can move forward. 😕 Don’t worry — everything is going to be okay! We‘ll go step by step together and continue working only on CSS.
Below are two images. The left one shows what was rendered through our code above, and the right one shows what we want to achieve. Let’s get started! 💪
Center in CSS using flexbox
First, a few words about flexbox. 😇 Flexbox is a modern layout model, in simpler words, a way to easily position our HTML elements in rows or columns. It provides multiple ways, through CSS, to organize our layout and at the same time be flexible and responsive on different devices.
Basic steps for centering HTML elements using flexbox
The basic property for flexbox is the display property. Using display: flex is not gonna give us something but it is necessary if we want to work with the other flexbox properties.
To center HTML elements we have to use align-items & justify-content properties. align-items: center centers child elements vertically &justify-content: center centers child-elements horizontally.
All these three properties combined give us the desired outcome, as seen in the code snippet below:
There is a small prologue for the grid here. 😇 The grid is a layout system. There is a basic difference between flexbox and grid. Flexbox is one-dimensional (best suited for small-scale layouts) while grid is two-dimensional (best suited for large-scale layouts).
In simple words, with flexbox we work in rows or columns while with grid, we work on both at the same time. Grid layout makes it easier to create complex, responsive designs that adapt to different screen sizes and orientations.
Flexbox & grid can work together and complement each other
Using grid-template-areas
As in flexbox, the basic property for the grid is the display property. Using display: grid is not gonna give us something but it is necessary if we want to work with the other properties. By setting the display property of an element to a grid, the element becomes a container for grid elements, which can be positioned using the grid layout.
To center HTML elements we have to use align-self & justify-self properties. align-self: center centers child-elements vertically andjustify-self: center centers child-elements horizontally. All these three properties combined give us the desired outcome, as seen in the code snippet below:
Another way to center HTML elements through a grid is with place-items property. place-items: center centers child elements vertically & horizontally at the same time.
.parent { ...display: grid;place-items: center; /* centers vertically & horizontally at the same time */}
At this point, a few words about positioning property would be helpful, I suppose. 😇 CSS position property defines the position of an HTML element in a document. There are five types of positioning:
static
relative
absolute
fixed
and sticky
In this post, we will use position: relative & position: absolute . By default the position property of HTML elements is static. That means that our flow (direction of HTML elements) follows HTML order and goes from top to bottom. If we want to change this flow we have to change the position property.
Position: relative works exactly as position static but allows you to change the position of an HTML element. In simple words, you can now move your HTML element, for example, 20px left.
.examRel {position: relative;left: 20px;}
CSS
Position: absolute takes the document out of its flow and places an element relative to the closest parent element.
.examAbs {position: absolute;top: 40px;}
CSS
🤔 So if we have two HTML elements and we want to put one (which we used to call child-element) inside the other (which we used to call parent-element) all we have to do is put position relative to the parent and position absolute to the child.
.examParent {position: relative; /* parent element */}.examChild {position: absolute; /* child element */}
CSS
Using transform and translate
First of all, we set position: relative to our parent element. Secondly, we set position: absolute to our child element. Then we set left: 50% and top: 50% to move the child-element from the parent, using as a reference the child’s top-left edge (see black dot).
To finalize our centering, we use transform: translate(-50%, -50%) to align the middle of the child element (green dot) to the middle of the parent element.
First of all, we set position: relative to our parent element. Secondly, we set position: absolute to our child element. Then we set left: 0top: 0right: 0bottom: 0 . By doing so, the child element will fill all available space of the parent container.
Finally, we use margin: auto. Using the margin property lets the browser calculate the appropriate margin for the child element and divide the space evenly. It centers our element horizontally & vertically at the same time.
.parent { ...position: relative;}.child { ...position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto; /* centers vertically & horizontally at the same time */}
CSS
📢 Warning: you need to set a fixed width to the HTML element you are trying to center (in our case the child element). Otherwise, it won’t work!
Dos for CSS centering
If instead of a box, you have to center a div or even a whole paragraph you can use all these methods described above! To do so, remember NOT to add width and height to the child and just let the child get its dimensions based on the included text. This way when centering the child it will be the same as centering the text, check the image below:
If you decide, though, to add bigger dimensions, bigger than your text, I mean, you need to be careful. By doing so you might end up centering the child element but not its content, the text.
Don’ts for CSS centering
🥵 DO NOT center elements using huge paddings. It may seem easy at first but it is considered to be extremely risky and error-prone. Especially now that we have to deal with all these different screen sizes. You will be forced to change paddings again and again with media queries. (@media only screen and(screen’s width) { }).
Welcome to the vibrant 🎡 world of colors! The CSS color property is one of the most creative building blocks of web design. Whether you want to create a visually stunning user interface or simply add a touch of flair to your project, understanding the variation of colors will empower you to paint your digital canvas with endless possibilities. In this post, we’ll dive into CSS color methods and explore their syntax and formats. Let’s embark on this chromatic journey together! 🌈✨
Exploring CSS color methods
Most colors have a predefined name, allowing us to easily declare them by referencing their designated names. For instance, if we desire a blue color, we can do so by setting background-color: blue.
Apart from names, we can declare colors by setting the values HEX , RGB , and HSL.
HEX color method
A hexadecimal (HEX) color is stated with #RRGGBB where RR represents the red color, GG stands for the green color, and BB acts for the blue color. In the example below, we can see that the HEX value for pure blue is #0000FF , where the first two ’00’ represent no red and the second two ’00’ represent no green, while ‘FF’ indicates the maximum intensity of blue color. So, at this point, is the right time to say that ’00’ stands for zero and represents the absence or off state, while ‘FF’ stands for the highest value and represents full intensity or the presence of all components.
Hexadecimal syntax supports using from 3 to 6 letters in order to denote RGB color combinations. As you may have already guessed, using less letter syntax reduces our color combinations, that’s why it’s mostly common to see 6-digit hexadecimal system when working on projects. In our example, we could write #00F instead of #0000FF.
🔖 It is essential to note that hexadecimal color works only if we add the # in front of it.
🔖 This 6-digit format for RGB colors (#rrggbb), can be extended to 8 digits to include an alpha channel, where the last two digits (00 to ff) represent the alpha value, with 00 being fully transparent and ff being fully opaque. Hexadecimal numbers use digits 0-9 and letters a-f. They represent numbers in a base-16 system. 🔹 Higher aa values (closer to ff or ee, etc.) mean less see-through colors. 🔹 Lower aa values (closer to 00 or 11, etc.) mean more see-through colors.
The RGB color model is a way of defining colors using red (R), green (G), and blue (B) values. These values go from 0 to 255, or you can use percentages from 0% to 100%. This gives us loads of different shades to play with!
Each value determines how strong that color should be. When the values are at ‘0’ or ‘0%’, it means the color is completely off, like it’s not there at all. But when they’re set to ‘255’ or ‘100%’, the color is at its maximum power or indicates the highest achievable intensity level. Cool, right? 😎
By skillfully combining them, we open up a plethora of possibilities, allowing us to create captivating color combinations.
Below, we see an example of the RGB color model for the color blue. The intensity of red and green is set to 0, and the intensity of blue is set to its maximum value of 255, resulting in pure blue color. In terms of percentages, it would be rgb(0%, 0%, 100%).
🔖 This function also allows us to add the alpha value (a) responsible for our color’s opacity (transparency), but this time written in a different way. It ranges from 0.0, which is fully transparent, to 1.0, which represents full color.
HSL color method
The HSL is another cool way to define colors. It consists of three parts that work together. So, let’s break it down!
The first part is hue (H), which is a number on a color 🎨 wheel. It goes from 0 to 360, where red is 360, green is 120, and blue is 240. So, you can pick any hue you want, and it’ll give you a different color.
The second part is saturation (S). This one controls how vibrant the color is. When it’s at 0%, the color becomes grayish, but when it’s turned on at 100%, you get the boldest, brightest color!
And finally, we’ve got lightness (L). This guy decides how light or dark the color should be. At 0%, it’s dark as black; 50% is the regular normal color, and at 100%, it’s bright as white.
Combining all the parts we can effortlessly create a myriad of captivating color 🍭 combinations.
Above is an example of the HSL color model for the color blue. We begin with the hue value of 240 degrees, which corresponds to the blue color on the HSL color wheel. The saturation is set to 100%, meaning it is fully saturated and vivid. The lightness is set to 50%, which represents a mid-level brightness for the blue color.
🔖 This function also includes the alpha (a) component which controls opacity (transparency) and is written in the same way as rgb(), a number between 0.0, fully transparent, and 1.0, which gives a clear color.
In CSS, colors can be defined in three primary ways, each serving a specific purpose.
The first way is used to change the color of the text. This is achieved through the color property.
We continue with the second one, which focuses on adding color to the background by utilizing the background-color property.
Finally, the third way revolves around defining colors for element borders, providing them with a distinct and visually appealing appearance. This is accomplished by setting the border-color property. If you’d like to learn more, check out my post on creative ways to style CSS borders.
Explore different color combinations and properties to create a user experience that matches your design vision. For now, check out a simple example that follows:
<divclass="container"><h1>Goodbye</h1><p>Hope to see you around again! 😀</p></div>
Greetings everyone! 😃 Today, our focus will be on addressing CSS selectors. These unique tools 🛠 are essential for targetting 🎯 specific HTML elements and controlling their appearance using CSS. Utilizing CSS selectors enables us to apply styles to those chosen elements which simplify and organize our code as well as improve the presentation and display of our websites.
CSS selectors offer a wide range of options, from a basic element selection class, id, type, * to more advanced techniques when combining them. In addition, we have the pseudo-selectors :before, and :after which also apply styles but only to specific elements and then it is the :hover pseudo-selector which adds the hover effect. So, let’s continue and analyze them one by one!
Universal CSS Selector
We are able to select ALL elements by setting the asterisk * selector. We utilize the asterisk to seamlessly/harmoniously apply uniform styles across all elements on our page. Below we can see an example where the CSS selector * applies a padding of 10 pixels to all HTML elements on the page. This means that every element, such as headings, paragraphs, images, buttons, and more, will have a padding of 10 pixels on all sides, creating consistent spacing around each element.
* {padding: 10px;}
CSS
Basic CSS Selectors
Now, it’s time to continue with the basic CSS selectors.
class selector
The first one is when we select elements based on their class. In the following example, we set all elements with classname="custom-class" to have background-color: yellow.
.custom-class {background-color: yellow;}
CSS
id selector
We continue with the second selector where we pick out elements based on their id. In the example below, we set all elements with id="custom-id" to have background-color: yellow.
#custom-id {background-color: yellow;}
CSS
type selector
Finally, the third selector is when we target elements based on their type (e.g.: p, h3, div, etc…). The code to the coming example selects all p elements from our document. The rules background-color: yellow and font-size: 14px means that all paragraphs on our document will be displayed with this specified background color and font size.
We can further enhance CSS selectors by creating powerful combinations. Mixing and matching elements, make our selectors stronger and maintain our code super clean. 😄✨ The examples provided above show how adeptly combining CSS selectors can lead to remarkable outcomes.
Multiple selectors
We can begin with the power of CSS selectors in tailoring styles to a variety of HTML elements. Using the above code snippet we set the text color for h1 and h3 to magenta, while the text color for h2, h4 and p will be pink. All other elements (e.g.: h5, h6, div, a, etc…) will not be affected by these rules and will retain their default styling.
h1, h3 {color: magenta;}h2, h4, p {color: pink;}
CSS
Adjacent Sibling Selector (+)
We move forward with a slightly different example. Here, our code selects only the first p element that stands after every section element. So, here we will give a purple background-color to paragraphs that come immediately after sections. If there are paragraphs that follow other sections but are not direct siblings, they will not be affected by this specific rule.
section + p {background-color: purple;}
CSS
<section><p>This paragraph will NOT have a purple background.</p></section><p>This paragraph will have a purple background because it is immediately preceded by a section element.</p><section><p>This paragraph will NOT have a purple background.</p></section><p>This paragraph will have a purple background because it is immediately preceded by a section element.</p><p>This is an additional paragraph after the last 'p' element, and it will NOT have a purple background.</p>
HTML
Direct children selector (>)
We continue by setting the following code which selects all the p elements but only when they are nested inside a section and only the direct children. So, here will give a purple background-color to all paragraphs p that are direct children of all section elements. Any other paragraphs inside nested elements or outside the section elements will not be affected by this specific rule.
section > p {background-color: purple;}
CSS
<section><p>This paragraph will be selected.</p><p>This paragraph will be selected.</p><div><p>This paragraph will NOT be selected.</p></div></section><p>This paragraph will NOT be selected</p>
HTML
All descendants selector
Our last example selects all p elements insidesection elements. So, here will give a purple background-color to all paragraphs p that are nested to section elements. Any other paragraphs outside the section elements will not be affected by this specific rule.
sectionp {background-color: purple;}
CSS
<section><p>This paragraph will be selected.</p><div><p>This paragraph will ALSO be selected.</p></div></section><p>This paragraph will NOT be selected</p><p>This paragraph will NOT be selected</p>
HTML
🔎 🕵️♀️ 🔍 The main difference between 3 and 4 is that section > p selects all p elements that are direct children, of the section, while section p selects all p elements that are descendants of the section, no matter how deeply nested.
The :before and :after are not standalone selectors in CSS. They are pseudo-elements that can be used with regular CSS selectors to apply styles to specific parts of an element’s content. They are used in conjunction with regular selectors to add content before or/and after the selected elements and apply specific styles to that generated content.
Here we have an example using an h1 selector with :before and :after pseudo-selectors. Styles defined within h1:before will be applied to the content that appears before(left) the h1 element while styles defined within h1:after will be applied to the content that appears after(right) the h1 element.
h1:before {content: "🥰 😀"; /* the two faces will be placed before my heading(h1) */padding-right: 10px;}h1:after {content: "😀 🥰"; /* the two faces will be placed after my heading(h1) */padding-left: 10px;}
CSS
OR (using Sass)
h1 {&:before {content: "🥰 😀";padding-right: 10px; }&:after {content: "😀 🥰";padding-left: 10px; }} /* end of h1 */
SCSS
🔖 We need to add padding-right and padding-left in order to give our pseudo-selectors a small space, in our case 10px, from our heading.
<h1>Pseudo-selectors are awesome!</h1>
HTML
Ta-da 🥁 ! Below, we are able to view the current visual output displayed on the screen. Awesome! Isn’t it? ✨ 🎉
Hover
We use the :hover selector to change the style of an element when we hover over it. While it is commonly used with links it can also be applied to all elements. To implement this effect, first, select the element you want to target, in our case the <button>, and then apply the :hover pseudo-selector to it. After that, when we hover over the button, its color will change from pink to green.
The CSS selectors play a fundamental role in web development, enabling us to target and style specific elements efficiently. They provide great flexibility and precision in styling web pages. Use them in the right way 🧐 and you will be able to do amazing things! Sending good vibes for your CSS explorations! Happy coding!!
