From the course: Creating a Responsive Web Design
Unlock this course with a free trial
Join today to access over 24,000 courses taught by industry experts.
Defining the basic text styles - CSS Tutorial
From the course: Creating a Responsive Web Design
Defining the basic text styles
- So now we'll add some CSS rules for the base text styles. So hit a few returns after the body element. Now I like to add some CSS comments into my CSS just so I can quickly see where groups of rules are. So that would be a /* space. We'll just call this Text. And then */. Same thing I did up here for the Document for Screens. Let's hit a few returns. So first let's target our h1 tag. So I'll type h1 { } bracket. Inside of here we're going to set a margin. Now for the properties I'm going to use shorthand style which goes in the order of a clock. So the first one is top, right is second, bottom is third, and left is fourth. So for the top property I'll type 0, then a space. For the right property we'll type 0, then a space. Then for the amount of space after an h1 tag we're going to use 1em. Now by specifying 1em we're basically saying one times the base font. So this will be approximately 16 pixels. Now I say approximately because by defining ems we're giving the devices a little…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Importing a Google Font3m 54s
-
(Locked)
Defining the basic text styles4m 18s
-
(Locked)
Styling the heading and page container4m 45s
-
(Locked)
Styling the logo and hero item6m 50s
-
(Locked)
Creating the button style4m 32s
-
(Locked)
Setting up a three-column row6m 4s
-
(Locked)
Adding graphics to the main section4m 54s
-
(Locked)
Clearing floats with pseudo-elements4m 3s
-
(Locked)
Styling the atmosphere section3m 25s
-
(Locked)
Styling the how-to section aside elements5m 9s
-
(Locked)
Styling the how-to section blockquote element5m 37s
-
(Locked)
Adding content with pseudo-elements5m 35s
-
(Locked)
Styling the footer3m 22s
-
-
-
-
-
-
-