🎨 Part 3: Styling with CSS

By /

In the previous article we built a very simple HTML layout, but now we need to style it somehow, to give it a proper look.
For that, we use CSS syntax, short for Cascading Style Sheets.

All the CSS rules can be found here:
https://www.w3schools.com/cssref/index.php

Styling can be added 3 different ways:

  • Inline CSS
  • Include <style> tag in your HTML document
  • Include external style.css file in your HTML document, using <link> tag in HTML <head>

Inline CSS

Inline CSS is written inside an HTML tag using a “style” attribute. The rules written inside the tag only apply to this and only this specific HTML tag. It’s a quick and easy way for testing something.

<h1 style="text-align: center; color: red; text-decoration: underline; font-family: 'Tahoma';">
   This is a large red heading!!! So maybe something dangerous.
</h1>

Using a <style> tag

Using a style tag is more convenient. You can write advanced rules and attach them to classes, which can be used repeatedly over your whole website.
Style-tag should be written inside the <head> of your HTML document, but can also be written inside the <body>, if needed. The CSS rules must be defined before any of the HTML elements with affected class are called. Otherwise the rules won’t apply.

<style>
   body {
     background-color: #000000;
     font-family: 'Tahoma';
   }
   .header {
     width: 100%;
     height: 100px;
     padding: 30px;
    }
</style>

External .css file

Using an external CSS file is the best way to include styling on your site, because you can use the same file across all your site. Let’s say you want to have all the headings styled with font size of 50px, you can simply write the rule about it to one file, and include that file in all your website pages.

You'll need to create a .css file.
For example style.css

Then, in HTML document, include it in the <head> section like this:
<link rel="stylesheet" href="style.css">

And all the rules will be applied to your HTML document.

Add CSS style

Let’s create a basic CSS code for our previous website and give these div elements some styling rules.

Use the <style> tag in your HTML <head> for styling. Styling rules must be written before the HTML classes are called.

Note that CSS classes are called with a dot, so when in HTML you have <div class=”hello”>, you can call it in CSS with “.hello”.

  • All the rules of these classes must be written between the curly brackets.
  • Each rule ends with a semicolon.
  • Comments can be written between /* these marks */

Add this code to your head section of your HTML file:

<style>
 .header {
   background-color: #FFBA00; /* define background color of div */
   color: #FFFFFF; /* define font color of div */
   height: 100px; /* define height of div */
   border-radius: 20px; /* define curved corners */
   font-family: 'Arial'; /* set font */
   padding: 10px; /* set padding */
   text-align: center; /* set text to center */
   font-size: 20px; /* set font size */
 }
.content-block {
   background-color: #dadada; /* gray background */
   padding: 25px;
   font-size: 16px;
   font-family: 'Arial';
   height: 800px;
}
.block-image {
   position: fixed;
   top: 200px;
}
</style>

Expected output:

Note that the .block-image class is using position: fixed, which makes it scroll with your browser window.

Scroll to Top