O'Reilly logo

Creating Flat Design Websites by Antonio Pratas

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling our page with CSS

Let's start by creating a new file called main.css in the css folder. This will be where we will place our own styles to customize the look of the page to our design. With our file in place, we now need to link our CSS file in our HTML page. Go to your index.html file and add <link href="css/main.css" rel="stylesheet"> to the <head> tag, and make sure you add it after bootsrap.css and flat-ui.css; otherwise, our styles might be overridden and won't work.

The first change we'll be making is the text color. As we want it to be the color we set in our design, let's set the text color to #222222 for every element in the <body> tag. We do this by using the following code:

body{
  color: #222222;
}

Now, let's start with the header, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required