Basic Styling with CSS

Learn to implement your design and apply basic styling using powerful CSS techniques. Additionally, you’ll be able to use custom fonts from Google fonts and set up the structure for your images and CSS.

Project

Feel free to use your own designs and apply your own styling. You can also use my Figma design if you wish to follow exactly what I have. You can access all the React files.

Global CSS

Let’s go to index.css and delete everything from that file. Command + A, then press Delete. I like to start from scratch because it allows me to understand everything.
This index.css file in the layouts folder will serve as a global styling for your entire site. We’ll use it to change the main things such as Font, margins, line-height, etc.

Body CSS

The body tag is the one we’ll use to apply those styles.

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
}

We’re setting the main font to the System font, which is San Francisco for Macs. As a fallback, it’ll use Segoe UI, then Robot, etc. Like this, you have second choices for Windows and Android devices. Of course, feel free to use your own fonts.

To get rid of the default body margin, we’ll set it to 0.

Custom Fonts (optional)

The easiest way to add custom fonts, is to use the @import. Go to Google Fonts, and find a good font. Here, we’ll use Open Sans, which is a popular one. Then, add this code to your CSS file.

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

(img) Then, in your body tag, you can use add use this property.

font-family: 'Open Sans', sans-serif;

Font Smoothing (optional)

If you’re a Safari user like me, this code will make your fonts look a little smoother.

-webkit-font-smoothing: antialiased;

Font Size

I like big, readable fonts, so I set my body text to 20px. It also makes sense because Design+Code is a site mainly for reading. But feel free to use anything between 15-20px.

font-size: 20px;

Units

I like to use pixel units because it’s consistent with the design tool. Later on as you get more familiar with CSS, you can use em or rem units, but they come with some complexity costs.

Line-Height

Often times, huge blocks of texts can look cramped. That’s where the line-height comes in. It gives more spacing between each line. As a general rule, you can to set anywhere between 1.2-1.45.

line-height: 1.3;

Links

One of the things I like to customize is the styling of the links. Usually, you want to set them to the main action color. In my case, it’s going to be purple. Because we’re going to remove the underline effect, we should make it clear that it’s a link by making it bolder.

a {
  color: #5334F5;
  font-weight: 600;
  text-decoration: none;
}

Index Layout

The index.js in layouts is a global container for all the pages in your site. By default, it includes a Header component and the children content, which would be one of the pages.

Let’s remove the style component for now at Line 18. We’re also gonna remove the div. Make sure to also delete the closing div tag. Also , at Line 17, delete the Header component.

// layouts/index.js

{children()}

Custom Class

In order to start styling a custom element, you’ll need to give it a reference className. In this case, we’ll do that for the Hero div container for applying the background. Additionally, we’ll create a HeroGroup div that’s gonna allow us to position the content and give us more freedom to make it adaptive later.

// pages/index.js
<div>
    <div className="Hero">
        <div className="HeroGroup">
        </div>
    </div>
</div>

Images folder

We usually put images in its own folder. Right-click src and select New Folder. Name it images. Then, right-click the images folder, click Reveal in Finder and drop the images from the assets.

Apply Hero Background CSS

Let’s go back to the CSS file and start customizing.

// layouts/index.css

.Hero {
  height: 920px;
  background: url('../images/wallpaper3.jpg');
  background-size: cover;
  background-position: center;
}

The background has multiple properties which allows us to set the image, but also positioning and a cover fit, which ensures that the image takes the full width or height.

In case you have an error the moment to apply the hero Background CSS you can run this on the terminal.

npm install --save url-loader

Another solution is to simply use a full URL. Store the image in [CloudApp] and get the full download link.

background: url('https://cl.ly/3k1F152x261C/download/wallpaper3.jpg');

HeroGroup CSS

The HeroGroup class allows us to take care of positioning and sizing the inner elements. Like this, anything that’s inside can work in isolation.

.HeroGroup {
  max-width: 500px;
  margin: 0 auto;
  padding: 150px 50px;
  text-align: center;
}

Title CSS

Once you have a CSS reference name, you can pretty much target anything inside. In this case, we know that there is an h1 inside, so we’ll target that directly and apply some position and size properties.

The title needs have no margin and less line-height.

.Hero h1 {
  margin: 0;
  color: white;
  font-size: 60px;
  line-height: 1.2;
}

Paragraph CSS

This time, we’re using an RGBA (red, green, blue, alpha) color property, which allows us to control the opacity of the text as well.

.Hero p {
  font-size: 30px;
  line-height: 1.5;
  color: rgba(255,255,255, 0.8);
}

Button HTML

Let’s go back to our index page and add a button.

<Link to="/video">Watch the video</Link>

Button CSS

text-transform property in CSS to make all our letters in capital.

.Hero a {
  font-size: 17px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  background: rgba(0,0,0,0.7);
  padding: 9px 20px;
  border: 1px solid rgba(255,255,255, 0.25);
  border-radius: 20px;
}

Conclusion

I highly recommend trying to use your own design to implement this layout while working with the same techniques. It’s going to get your hands dirty and you’ll build something meaningful to you at the same time. Again, feel free to share your progress on Twitter. I love retweeting awesome creations made from the course!