CSS Properties and Values: Unleash Your Creative Side!

Welcome back to our exciting CSS journey! In our last posts, we’ve delved into the magical world of CSS, discovering its basics and selectors. Now, it’s time to unleash your inner artist as we explore the colorful realm of CSS properties and values.

CSS properties are like the paint on your palette, and values are the shades you can choose from. With this episode, you’ll soon be creating web page masterpieces!

The Great CSS Property Playground

Before we dive into the nitty-gritty, let’s get the big picture. CSS properties are like superheroes. They have powers that can transform your web content in amazing ways. Here are some of the most popular ones, and don’t worry we’ll explore how to use them just a bit further down the road:

• Color: Ever wanted to paint your text in all the colors of the rainbow? With the color property, you can!
• Font: Fonts are the fashion of the web. The font-family , font-size, and font-weight properties let you dress your text in style.
• Border: Think of borders as the frame of your web artwork.
• Margin and Padding: These properties control the space inside and outside elements.
• Background: Spice up your web canvas with the background property. Change the color, add images, or even create gradients.

A Little Experiment, Shall We?

Let’s put this basic knowledge into practice with a quick experiment. Say you want to make your page text blue. You’d use the color property like this:

p {
  color: blue;
}

That’s it! Your text is now as blue as the ocean.

But that’s just the tip of the iceberg. CSS properties come in a rainbow of options. You can add shadows, change text size, and even make elements transparent! The possibilities are as limitless as your imagination.

The Value of Values

Now, let’s talk about values. Values are the magic words that bring your properties to life. They’re like the secret sauce of your CSS. Here are some types of value you might have to use depending on the property:

• Colors: Here are the most common ways you can use colors in CSS, it works for texts, backgrounds, borders, any property that supports colors, really. You can use names (like red or blue), hexadecimal codes (ex: #FF5733) or RGB codes (ex: rgb(255, 0, 0)) to define colors. Get creative with your color choices! Here is a list of named colors and their equivalent in hexadecimal and RGB https://www.w3.org/wiki/CSS/Properties/color/keywords
• Units of mesure: Values often come with units like pixels (px), ems (em), and percentages (%). These help you control size and spacing.
• Keyword: Some properties accept keywords, like “italic” for font style or “center” for text alignment. There are many keywords you can use in CSS and again it will really depend on what property you are using.
• URLs: When setting backgrounds with images, you can use URLs to point to image files. URLs will also be used for loading font files for example.

If you really want to know all about values and units in CSS because you need to know exactly how everything works and what is best suited for you, I invite you to read this page on the MDN (Mozilla Developer Network).

Side note: you can sometimes get lost on the MDN going from page to page, trying to understand how everything is tied together in HTML, CSS and JavaScript.

Now that you know what properties and values are in CSS, you are ready to enter the game and learn how to make you pages great! In the next episodes, we will explore what are the properties and values mentioned earlier and how to use them.

Photo of Andrew Ridley from Unsplash