Introduction to CSS: The Magic Behind Beautiful Web-pages - Scratch My Dev

Before we begin with the enchanting language that it CSS, I strongly advise you to read my first episode in the HTML series here. It will give you the basic knowledge for creating your first HTML page that is required for this episode. Both series are intertwined.

Imagine visiting a website with plain, unstyled text and images scattered all over the place. It’d be a digital disaster, right? Fortunately, there’s a web wizardry known as CSS (Cascading Style Sheets) that turns this chaos into the visually pleasing, organized web pages we all know and love. Welcome to the enchanting world of CSS!

The Power of CSS: Making Web-pages Beautiful

CSS is the artistic side of web development, responsible for making your website look as captivating as a magic show. It’s the spellbinding language that allows you to control the colors, fonts, layouts, and animations of your web content.

In a nutshell, CSS takes the plain HTML structure of a web-page and brings it to life. Whether you want to add a vibrant background color to your headers, change the font of your text, or create mesmerizing animations, CSS is your trusty wand.

Three Ways to Apply CSS: Inline, Internal, and External

Before we dive into the magical world of CSS, it’s important to know that there are three ways to apply CSS to your web page:

Inline CSS: This is like painting each element individually. You specify styles directly in the HTML tags using the style attribute. While it works for quick fixes, it’s not ideal for larger projects as it can get messy and hard to manage. Basically, never use unless you really have to, beware of the consequences… You will need to know what are tag attributes in HTML (more on that in the second episode of the HTML series).
```
<p style="color: blue; font-size: 20px;">This is a styled paragraph.</p>
```
Internal (or Embedded) CSS: Think of this as your spellbook, kept within your HTML document. You use the <style> element within the HTML <head> section to define your styles. This is useful for small to medium-sized projects or preferably one-page projects.
```
<head>
  <style>
    p {
      color: purple;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <p>This is another styled paragraph.</p>
</body>
```
External CSS: This is the big spellbook that you keep in your library. You create a separate CSS file with a .css extension and link it to your HTML file using the <link> element. It’s the preferred method for larger, maintainable projects (meaning, any “real” project). You can also include CSS files that are hosted on other websites, just use the URL of the CSS file instead the relative path of your local file.
```
<head>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  
</head>
<body>
  <p class="magic-text">This is yet another styled paragraph.</p>
</body>
```

Selectors and Properties: The Ingredients of CSS Spells

Now that we’ve covered the different ways to apply CSS, let’s talk about how CSS works its magic. At the heart of CSS are selectors and properties. Selectors are like magic wands, allowing you to target specific HTML elements, and properties are the enchantments you cast on them.

For example, the selector p selects all the paragraphs, and the property color can be set to give them the text color you desire.

p {
  color: pink;
}

With this CSS spell, you’ve transformed all the paragraphs into enchanting pink text.

Your First CSS Spell

It’s time to roll up your wizard sleeves and try your hand at CSS. Create an HTML document with a simple HTML tags in the body. Add some CSS to change the text color and font size, whether it is for paragraphs or headings (titles). Use one of the methods we discussed to apply the CSS (avoid the black sheep method).

The Adventure Begins!

Congratulations, you’ve taken your first step into the mystical realm of CSS! In this introduction, you’ve learned how CSS brings life to web pages, the three methods to apply it, and the fundamental concepts of selectors and properties.

In the next episode, we’ll delve deeper into the fascinating world of CSS selectors, unlocking even more of its secrets. Get ready to become a CSS sorcerer and craft web pages that are nothing short of magical! 🪄✨

Stay tuned for more enchanting CSS adventures!

Photo of Cristian Escobar from Unsplash