The Zen of CSS – Onirical Soft

Dive into CSS: It’s Easy

CSS, or Cascading Style Sheets, is a style sheet language, which means that is a language made to alter the presentation and looks of a document, most commonly, of HTML documents. You could see CSS as what you use to make the visual part of HTML beautiful and organized.

Understanding the Basics

CSS is actually a very simple and straightforward language. You just have to decide what HTML element you want to stylize, and then type down that element’s name and then, between brackets, properties you want to change. In practice it would look something like this:

elementHtml {
  color: red;
}

Let’s put it to practice

Let’s first create a very basic HTML document. Say we want to create a very basic page talking about our cat, with a title, and image, and a paragraph:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="myTitle">This is my cat. Her name is Bella</h1>
    <img class="myImage" src="img/cat.jpg" alt="myCat">
    <p class="myParagraph">This is my beautiful cat Bella. She is 5 years old. She's kind of the best cat in the world</p>
</body>
</html>

This is what it would look like:

Now, this doesn’t look very good, does it? The image is too big, and the text is extremely tiny. And also, it would be nice if the content was centered, so that it would be easier to read. We can do this very easily with CSS

body { 
    text-align:center;
    font-family: Arial, Helvetica, sans-serif;
}

body h1 {
    color: peru;
}

body img {
    max-width: 600px;
    border-radius: 10px;
}

With this little bit of code, our page goes from looking unorganized and hard to read, to looking like this:

Now this looks much better. The content is centered, our title has a different color, we chose a different font that looks a little bit more modern, the image isn’t gigantic and it even has rounded corners now!

But now, let’s explain this code so we can understand it a little bit better:

• body This indicates we are going to modify everything inside the body
• text-align:center; text-align is a property that modifies the horizontal aligment of the content inside an element, and center is the value that determines, in this case, that is going to be centered
• font-family: Arial, Helvetica, sans-serif; font-family is a property that changes the font used inside an element, in this case we chose the Arial family.

• body h1 This indicates we are going to modify every h1 (header) inside the body
• color: peru; color is a property that changes the color of an element, in this case, the text of the header, and peru is the name of a color

• body img This indicates we are going to modify every image inside the body
• max-width: 600px; max-width is a property that limits the max horizontal size of an element, in this case, is limits the size of the image to just 600 pixels
• border-radius: 10px; border-radius modifies how round or sharp are the corners of an element. In this case we gave the image a 10 pixels curvature to make it rounder

You can learn a lot more about CSS on W3Schools, with their fully free CSS course.

Try it yourself!

Start designing right away! All you need is your keyboard, enthusiasm and all the creativity you want to put into it!