Skip to main content

Change the Font Size & Color

Lesson 21 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

Change the Font Size & Color

Lesson 21 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

21. Change the Font Size & Color

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

Getting div tags onto one line using Flexbox in HTML & CSS

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Form Check Marks

03:04
74

Multi Line Form Text Box

02:18
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

11:18
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final Quiz

Lesson Info

Change the Font Size & Color

Hello there fellow web designers in this video. We're going to go from this to this. Okay removing the background adding some text, starting the text. Looking at font families. We're going to look at padding from the outside and the top we're going to look at the difference between padding and margin. Whoa loads to do in this video. Let's jump in and get started. All right so we're gonna put it in our text and get it kind of looking like this In case there's an H1 and then there's AP. Tag. So let's grab the copy, I've put it in your exercise files so find your exercise files and then project one there's one called project one text. Open that up in something and yeah we've got some stuff in here so what we want is let's meet and let's bring in that first. Okay it's all lower case. Just the looks you can add the upper cases if you like and then we'll bring that in a sec. So let's jump into V. S. Code where do we want it? I want it to be we're skipping the non if you'd be like hey let's d...

o the nav we'll we'll do the easy bits first and we'll move into us we're building on our skills let's say So each one tab for over 10 and paste on that text save. Let's have a little look in the browser there it is. Let's meet. Okay let's add the P. Tag P. Tag and let's grab the text copy, paste it in. Now this brings up a good point. Okay so let's save it in preview and make sure it works. Where are we? There you go. It's in there now in code view. This can whether you like it or not and I'll show you something that I do. So the text kind of goes off and see it on the bottom here. There's lots of text, so you have to kind of scroll across, it's up to you whether you want to leave it like that because I feel like this is there's pros and cons of both. I'm going to delete that to the P tag. Come on, delete, I'm hitting my delete key Because there you go, it's all on one line. There you go. Nice. Like the H1, it's a pdf all on one line, you might like that, a lot of people and me included, I flip and flop so I'll show you both is I want that to wrap around. Okay, one thing I want you to notice is that every new line starts with a new number and that makes it quite clear. So on line 22, even though it's quite long, It's all online, 22, but if I get a view and I do this one here, toggle word wrap, okay, can you see it opens up a gap in the numbering because that's technically still that next line, but it's just kind of wrapping it around because it depends on how wide, you know why the spacing is, know what I mean? So it's up to you, I'm going to wrap mine but you might not like that. It's easy to turn it off by clicking that exact same button. Alright, so now we need to style both of these guys and then add some padding because that was bold and it's white and it's not times new roman. We're using aerial in this case and you can see there's some padding in from the edges, whereas at the moment you see it's running all the way along plus we need to center it. So let's do all those things. So over here in my CSS H one, we're gonna put in curly braces and we're going to do, we'll start with font size, font size when you're building it, you're going to spend a lot more time going, oh, is it 40 or maybe 60? And just testing, because I've made this class for you guys already already know it's 84. Exactly. Okay, so let's test in the browser, you'll get into the habit and then out of the habit of just trying to do all of the styling, you know, you'll go in here and you go, okay, now it needs color of white white and then you do the next thing and then the next thing without checking and then you'll check and something will be totally wrong and you will have no idea what part of your code you actually broke. So my advice, especially at the beginning is to do one thing, Go check it, then come back in here and do another thing in this case kind of a big fun with this that we haven't done yet is the font family. So think of it as you're changing the font or the type. Okay, from these default ones, we're gonna use the default ones for the moment. There's not very many, but we'll look at expanding that as we go through. So what I'm going to use is with Ariel, I'm going from times in roman to aerial Helvetica, sans serif. Let's hit semi colon, let's save it. Let's preview it. Cool. So instead of it being times in roman. Okay, let me turn that off and I'll show you how I do that in a second. So times your own with all the little feet. Okay, this is called a serif font, so it has the little bits to hang out the side and if I changing aerial, see no little feet. Okay, it's a sans serif. So without defeat. Did a couple of things there, one was would be commenting in a second. This one, this is kind of weird. Why is there three fonts, you know, so you want Helvetica Now, what we're doing here is we're using what's called a default font. So what's happening is you're not like putting Ariel into this website. What's happening is let's say I built the site and our friend bob okay, bob loads your website. What happens is his browser goes in and checks his system so checks bob's computer to see if he has a real and loads it. If he doesn't have Ariel, it'll check for Helvetica. Okay. And if you can't find Helvetica, it'll look for this. Every computer has at least sand saref. It's like the default font for the core of the machine. So that's yours. You're suggesting I suggest Ariel, but if you don't have it, I suggest Helvetica. If you don't have it, I suggest san serif. That's why when you see some of these longer ones we picked area because it's easy, but let's delete all that type family colon, family space return now, yours might not have done that. I guess I skipped over that as well. Let's go back. So when I'm typing in the family, Okay, instead of hitting the colon, I click on this because it gives me all these cool suggestions. So looking at these guys, can you see gill sans gill sans mt calibri, Trevor Shay, there's lots in that list there. Right? So it's saying check bob's computer for gill sans if he doesn't have it have gill sans Mt? If it doesn't have that, put in calibri doesn't have that Trevor shay, it doesn't have that, I give up and use the default font size, sand saref and you'll notice that some of these are white and some of them aren't, some of them have these little marks around them. Some of them don't um single words don't need them. Words or fonts that have to like a space in between. Need these uh apostrophes. I'm going with apostrophes, little tiki things. Okay, so I'm going to go back to Ariel because you could write in here, say you're you're you're a designer and you're like man, I would love some who I was going to say lust, It's a fun. I was using today out of context is not a Alright, you know what I mean? Let's pick a more less suggestive font. What do we got? Comic sands. Okay, you're like your comic sans lover. Okay, you can type that in there and it will probably load on most computers because most computers have comic sans, but if it doesn't it'll have gill sans and then calabria, you get what I mean now. Right, so I'm gonna get rid of all of that and start typing an aerial, make sure the semicolon goes at the end and that's what it's going to do. The other thing I snuck in there and I didn't mean to, I feel like this should be later in the course, but we've kind of opened that box, is that I highlighted this and I wanted to turn it all off because at the moment, right? It's working, it's Ariel. So if I want to disable this, I can do a sneaky trick rather than deleting it and then saving it and then checking it. You can kind of disable it momentarily. Okay. And basically you need this syntax, you need to put a forward slash in front of it. This is for CSS only Okay. You need to put a forward slash then you need to put your asterix which is tied up with your eight number eight key on your keyboard and kind of the reverse of that at the end. So if you if you put that around anything, okay, so ford slash apostrophe and at the end of it apostrophe apostrophe, that's not apostrophe. Okay, that is your asterix, sorry, asterix for slash. Can you see as long as it's inside of that little group of characters, it will turn it off goes green. And the brother doesn't know it exists anymore. Okay. And it's just a handy trick but you would have also noticed that I did it super quick. There's a shortcut so it's a bit early for these shortcuts but we're already there. Right? So what we do is we highlight the bit we want to turn off. Okay? And we hold down the command key on a Mac or the control key on a pc and click hit the forward slash button. Okay. On my keyboard. It's down down in the bottom right of my keyboard. Yours might be somewhere else basically looking for this key. Okay, so hold the command key and click it and would automatically do it. It's really handy highlighted command for slash control for slash all right. So let's move on and do the P. P. Tech soapy this one here. What do we do with this one? We did font size. I want all of this. My lazy brain says just copy it. Okay. But the size is gonna be different. We want the size to be 18 pixels and we leave the color and the font. Let's check it. So there's now 18 pixels. It is a real and it is right now the next thing I want to show you is we could now go through and say because we want it centered right to match this. We want it all in the middle. So what I could do so I can go into my dress code and I could say we did this one and this one makes a lot more sense. Text align center. Perfect. And we've done it for the H1 and it's done But it's not done for this bottom one. Okay. So it's not centered. So what we'll do to be because it's all about being economical with your code. Do it once rather than you're doing it like 10 times. So the same thing remember earlier on we did the container we did auto left and right on the thing that wraps everything up. We do the same thing for this. So what wraps all of this up? It's that main tag. Okay. So where it is main. So if I do the same thing for that. I say you my friend everything inside of you be text align center, it'll do the same thing. It doesn't really matter. But we're looking for like style points as a front end designer. Okay. So that's working, that's centered, that's centered. Let's work with the padding because I want a big chunk at the top and a big chunk on the sites. Now we could do it to the specific type again but we'll do it to the container. Okay. So we'll use we'll add some margin to that main tag. So we'll do main we'll do padding. Okay. And we're going to use padding to the top And what I wanted to be. I've already worked this out. 80 pixels. Okay. And let's check it Awesome. So there's 80 pixels padding at the top and let's do it for the left and right. So padding lift In this case it is 240 2 even pixels and make sure it's semi colon at the end and do the same for right. Nice. Alright. Let's give it a test to see if we've broken it sitting at the top depending on the sides. Nice. Now throughout this course we're going to be looking there's kind of two ways of putting spaces in there's padding and margin and this is a it's a really good I guess way to show it. Okay. The difference between the two. So what we'll do now is main. We've done padding. Let's do the difference. So instead of padding top we'll do margin top because it can get confusing like which one do I use and sometimes it doesn't matter. So let's let's show at the moment because it's it makes it really clear. So I've done margin top instead of padding top, look what happens, it works. The text is just as far down from that red box as it was for padding except margin is the outside of this box because we see it main be orange margin. Okay, Top pushes it away from the top of the box. The whole orange nous comes down whereas padding is the inside of the box the internal parts. Okay, so the text will end up at the same place but padding is the inside of the box, so the orange. Okay, do you get what I mean is let's have a look. So text same place. Okay, but the box reaches to the outside margin pushes the box down so let's add a little bit more. It's at margin top and padding top to hopefully clarify it. I feel like I've almost explained this right, we'll do this a few times. So let's do let's do another 80 pixels. Just hopefully solidify this idea. Can you see there is 80 pixels there on the margin and then there's another 80 pixels here. Just afterwards for this, there's a little bit more here because this, this font here has a little bit on it by default. Okay, so there's probably padding on the top of this H one by default which will turn off later. But do you get what I mean? Margin? The outside padding on the inside. And then I also said sometimes it doesn't matter and it doesn't matter when you get rid of this background color because we only use this background color. Right? And to just to kind of identify these boxes, I don't want a big orange box or a blue box. So what we'll do is in your margin. Let's delete this. Goodbye. Okay, save it. Have a look. That's what I want. Okay. And now if I had imagined margin or padding, you can see it wouldn't make a lick of difference. Ok? Because the text would end up in the same spot and because there's no background color, you get what I mean, Dan You've said it 10 times now. All right. We got it. If you haven't, we'll do it again later on while we're here we'll get rid of the logo background. So where is the header in the background colour of blue? Delete it. Here we go. Alright, last thing before I go when I teach this thing live and there's always one in the class, you might be that person. Okay? People forget to put the PX and save it and you're like, hey, it's not working. I'm changing in the numbers and I'm making it up and down and it's not working. It's just because you forgot the PX because it's not something natural. All right. So there we go. Don't forget that. All right. That is it for this video? I'll see you in a second in the next one.

Class Materials

Bonus Materials with Purchase

Exercise Files
Completed Files

RELATED ARTICLES

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

RELATED ARTICLES

Recent

Articles