This is the second part of my basic three-part series - in this chapter where we are going to learn about CSS (Cascading Style Sheets). Before jumping into this one, I recommend starting with HTML basics (if you haven't done that so far) - so this one will make a lot more sense!

As you could read in my previous post, HTML is a descriptor language what contains the content, the data. CSS gives a look and feel, the personality of this structured data.

The separation of these makes the work easier, as you can modify them without touching the other. The content and the style sheet behind your website will be more transparent and manageable. That's why it reduces the complexity of your code.

Creating a Simple Page - HTML only

As you can see in the HTML, this form starts with the <form> opening tag and there is the closing </form> tag too, between these two there are some new elements which we did not learn about in the previous post.

The <div> element has a class attribute, its value is "main-title". This is its name which you can "call" (reference) in CSS, and with this name you can style the Please log in! text between the opening and the closing tag of the div element.

The <input type="text" placeholder="Username">line means that you have:

• an <input> element which is used to accept data from the user from web-based forms,
• the type which is the attribute of input,
• and the "text"is the type's value, this is just a simple single-line text field.

As you can see in the HTML code above, besides "text" value there are a "password" and a "submit" value too. How an <input> element works depends on the value of its type attribute. These values are not just names, they have tasks to do. The password is a single-line text field which value is hidden. The submit value works as a button that submits the form.

• You can see there is an another concept in this code, this is the placeholder. This is just a helper for the users that what kind of content they have to provide. In this first line, its value is "Username", so the users have to type in their name.

Designing the Form - Meet CSS

This code below includes the CSS as well - if you want to apply your stylesheet to the HTML, the head element has to contain this line: <link rel="stylesheet" href="style.css">. (If you name the CSS file as style.css.)

Modifying the look of HTML elements in CSS

To improve our page written in HTML, we need CSS. We can style every single element with it. Your browser interprets CSS rules, and apply them to affect how the webpage shows up.

CSS files contain rules. A rule consists of:

• selectors, with them you as a developer can tell the browser which HTML elements the rules should be applied to, like all the divs on a page,
• properties to modify the look of those elements - imagine you'd like to describe something like the color of a header or the font it uses.

In this current post we are going to touch the most basic selectors only:

• selectors for HTML tags: body, form and input
• classes, which can be applied to multiple elements, like .main-title

Selectors and properties for HTML tags

HTML tags can be selected using CSS by their name - so if you'd to select a div, you simply write div in your CSS file. After that, you have to define how a given div should look like. The simplest example can be a div with a red background property:

div {  
  background-color: red;
}

As you can see the properties are inside curly braces, and you have to add a semicolon at the end of each line for the properties.

To get a full list of available CSS properties, please refer to the MDN website: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference.

Selectors and properties for classes

Each HTML element can have multiple classes (or zero), and these classes' properties will be applied to them, all of them.

In the CSS file, these classes are defined with a leading dot, so if you have a class named text-color-red, you will have to write .text-color-red in CSS.

So in CSS, you would define it like this:

.text-color-red {
  color: red;
}

And use it like this in HTML:

<h2 class="text-color-red">header</h2>  
<p class="text-color-red">paragraph</p>  

Homework - Up for the Challenge?

I have a little challenge for you! Click the "Edit on Codepen" logo on the code snippet below, fork it, using the "Fork" button, and modify the style to your taste! Don't worry if you don't understand every property now, just play around with it and see what's happening with your form.

Once you have it, send it to me in the comments section!

Next up

In the next blog post, we are going to take a look at the basics of JavaScript, the only programming language that runs in the web browser!