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.
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:
<input>
element which is used to accept data from the user from web-based forms,type
which is the attribute of input,"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 itstype
attribute. These values are not just names, they have tasks to do. Thepassword
is a single-line text field which value is hidden. Thesubmit
value works as a button that submits the form.
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. 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.)
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:
In this current post we are going to touch the most basic selectors only:
body
, form
and input
.main-title
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.
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>
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!
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!