Learning CSS

So you figured out how HTML works, that's great! How do you level up from there? Well it would be nice to be able to add some styling to that page that only has a white background and a Times New Roman looking like font right?

CSS

There are two ways to add CSS styling to an HTML document.

Embed it right to on the HTML page

When you just wanna create a simple small little HTML page and don't wanna get fancy with it you can use the <style></style> tag in your HTML page.

Consider this example:

<style>
  body {background-color: hotpink;}
  h1 {color: purple;}
</style>

Inside of this <style></style> tag we have added two rules:

The body tag should have a background color of something called hotpink
The h1 tag should have a color of purple

I'm a serious person and I wanna do it the "right" way

So let's take the example we have above and we wanna move it over to its own file. First of all why do we wanna do this in the first place? Well in order to keep your code neat and organized, it's considered best practice to keep your CSS separate from your HTML (this statement isn't necessarily true when using something like React.js but that's an entirely different advanced topic). Let's split up the HTML and the CSS and get it work.

Imagine that this is the file we have right now and this one is called index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Basic Page</title>
  <style>
    body {background-color: hotpink;}
    h1 {color: purple;}
  </style>
</head>
<body>
  <h1>Welcome to My Basic Page!</h1>
  <h2>This page is about something</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id ex ultricies, aliquet nulla in, fringilla lacus. Nullam at tellus enim. Cras porttitor lacus ut magna fringilla, ac ornare dolor cursus. Etiam vitae justo eros. Nullam vel est id nunc tristique convallis tempor id mauris. Integer sodales ex ultrices porta congue. Phasellus a dignissim lorem. Proin nunc erat, varius ut condimentum ut, commodo eget lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla magna augue, gravida et feugiat sit amet, eleifend eu odio. Donec malesuada tempor purus sit amet malesuada. Sed ut pellentesque ex, eu egestas ligula. Suspendisse potenti. In sodales leo eget congue luctus. Integer sagittis nulla quis pellentesque ultrices.

    In hac habitasse platea dictumst. Suspendisse libero diam, condimentum eget odio pellentesque, iaculis gravida massa. Nam eu diam ipsum. Nam pharetra convallis ante eget semper. Sed in nisl a urna aliquam dignissim a sed massa. Etiam velit ligula, ullamcorper non commodo et, efficitur quis quam. Sed venenatis, magna et ullamcorper interdum, ante enim sagittis sapien, quis rhoncus velit ipsum et nibh. Sed euismod pellentesque convallis. Donec dapibus tortor in finibus venenatis. Donec tempor efficitur vehicula.
  </p>
</body>
</html>

First of all we wanna remove the <style></style> tag and its contents so the index.html would then look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Basic Page</title>
</head>
<body>
  <h1>Welcome to My Basic Page!</h1>
  <h2>This page is about something</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id ex ultricies, aliquet nulla in, fringilla lacus. Nullam at tellus enim. Cras porttitor lacus ut magna fringilla, ac ornare dolor cursus. Etiam vitae justo eros. Nullam vel est id nunc tristique convallis tempor id mauris. Integer sodales ex ultrices porta congue. Phasellus a dignissim lorem. Proin nunc erat, varius ut condimentum ut, commodo eget lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla magna augue, gravida et feugiat sit amet, eleifend eu odio. Donec malesuada tempor purus sit amet malesuada. Sed ut pellentesque ex, eu egestas ligula. Suspendisse potenti. In sodales leo eget congue luctus. Integer sagittis nulla quis pellentesque ultrices.

    In hac habitasse platea dictumst. Suspendisse libero diam, condimentum eget odio pellentesque, iaculis gravida massa. Nam eu diam ipsum. Nam pharetra convallis ante eget semper. Sed in nisl a urna aliquam dignissim a sed massa. Etiam velit ligula, ullamcorper non commodo et, efficitur quis quam. Sed venenatis, magna et ullamcorper interdum, ante enim sagittis sapien, quis rhoncus velit ipsum et nibh. Sed euismod pellentesque convallis. Donec dapibus tortor in finibus venenatis. Donec tempor efficitur vehicula.
  </p>
</body>
</html>

Then we want to create a CSS file, let's call it styles.css and move our existing style definitions over there.

body {
  background-color: hotpink;
}
h1 {
  color: purple;
}

Now we have some more breathing room and we can use the curly braces and indentation to understand what's really going on here. Let's save this file and hook it up to our index.html file.

Inside your <head></head> tag in your index.html add the following code snippet:

<link rel="stylesheet" href="styles.css">

This link tag tells the web browser that you are referring to a stylesheet and that the name of the stylesheet is styles.css. Now let's refresh the browser window and see if it works.

Following the example code we have above your index.html page should look something like this now:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Basic Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Basic Page!</h1>
  <h2>This page is about something</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id ex ultricies, aliquet nulla in, fringilla lacus. Nullam at tellus enim. Cras porttitor lacus ut magna fringilla, ac ornare dolor cursus. Etiam vitae justo eros. Nullam vel est id nunc tristique convallis tempor id mauris. Integer sodales ex ultrices porta congue. Phasellus a dignissim lorem. Proin nunc erat, varius ut condimentum ut, commodo eget lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla magna augue, gravida et feugiat sit amet, eleifend eu odio. Donec malesuada tempor purus sit amet malesuada. Sed ut pellentesque ex, eu egestas ligula. Suspendisse potenti. In sodales leo eget congue luctus. Integer sagittis nulla quis pellentesque ultrices.

    In hac habitasse platea dictumst. Suspendisse libero diam, condimentum eget odio pellentesque, iaculis gravida massa. Nam eu diam ipsum. Nam pharetra convallis ante eget semper. Sed in nisl a urna aliquam dignissim a sed massa. Etiam velit ligula, ullamcorper non commodo et, efficitur quis quam. Sed venenatis, magna et ullamcorper interdum, ante enim sagittis sapien, quis rhoncus velit ipsum et nibh. Sed euismod pellentesque convallis. Donec dapibus tortor in finibus venenatis. Donec tempor efficitur vehicula.
  </p>
</body>
</html>

Tips & Tricks

Writing text to tests your layouts

Coming up with what to write when you're supposed to write long paragraphs to test out your styles is hard. Instead of having to write that text yourself you can use a text generator and have that generate a certain amount of paragraphs for you 😊

The most famous one out there is called Lorem Ipsum and looks like some kind of fake Latin.

Images

Finding the perfect image for the web page you're working on can be hard and time consuming. Instead of doing all of that manual labor you can use something like placekitten.

Placekitten will give you a nice looking image in the width and height you request using this simple format:

http://placekitten.com/<width>/<height>

So let's say you want a square picture that is 200 pixels in height and 200 pixels in width, then the URL would be:

http://placekitten.com/200/200

If you want the picture to be in grayscale instead of having colors you can change the URL to this:

http://placekitten.com/g/200/200

Then you can simply add it to the source attribute of your HTML image tag like this:

<img src="http://placekitten.com/g/200/200" alt="A beautiful picture of a kitten">

anhar/learning_css.md