Hello Front End — An Introduction To Web Development (Part 3 — CSS)

Styling HTML with CSS

If we take a closer look, we can notice that using only HTML provides us with some sort of default styling. For example, wrapping text in H1 made it larger than the text wrapped in P. While this default styling perhaps has been sufficient in the very early days of the web, where documents resembled pages in a newspaper, today’s web applications have sophisticated and esthetic user interfaces, not far behind from native desktop and mobile applications. User interfaces that contain beautiful animations and that adapt and react to the size and orientation of your mobile devices.
This is where CSS comes in.

CSS is also a computer language, which means it has a specific syntax, but much simpler than HTML. Let’s see how we can change the size of the image with CSS. We can write CSS directly in the HTML file, if we wrap it in a special element:

<style></style>

To learn more about CSS syntax, refer to this resources, but try to deduce it from the examples first.

To change how an element looks, we need two things: A way to reference an HTML element from CSS, and then a way to manipulate the CSS styling properties, like height and width.

First let’s reference the img element.

<style>
img {
}
</style>

And now we change the height of the image:

<style>
img {
 height: 300px;
}
</style>

And the width:

<style>
img {
 height: 300px;
 width: 300px;
}
</style>

We targeted the element by specifying the type of the element. But what if we had multiple elements of the same type, how would the browser know which one to change? In this case, it will change all elements of this type, which may not be what we want.

A different way to accomplish the same result would be to define an ID to the element, and then reference this ID using a different CSS selector.

Find the HTML element img from earlier, and add an ID property:

<img src=”cat.jpeg” id=”pic”>

And then target the element using an ID selector:

#pic {
 height: 300px;
 width: 300px;
}

This is really all we need to know to get started with CSS. We target elements in our CSS code, and then manipulate the element’s styling properties. CSS has hundreds of different properties, and while the gist is very simple, it may take you a substantial amount of time to master the different properties and how they affect one another.

In general, CSS tends to add substantial complexity to the development process, and requires careful attention due to its cascading nature (which we haven’t even mentioned). Originally, first came HTML and years later CSS was introduced to satisfy our styling needs, which is the reason for this separation. It is an indispensable tool in every web developer’s arsenal.

Assignment: spice things up a bit by adding a background color of your choosing, or changing the font of the text.

In the next part, we shall deploy our website to a server! And we still have programming to cover later. Good times.

Click here to start the next chapter.

1. Read more about CSS in general
   https://developer.mozilla.org/en-US/docs/Web/CSS
2. Read more about CSS selectors
   https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors

Some toys for you to have fun with

1. Edit style in with a friendly visual interface and get the CSS code behind it https://enjoycss.com
2. A great resource for enhancing your CSS skills
   https://css-tricks.com/
3. Gradient generator
   https://mycolor.space/