Change the Font Size & Color
Daniel Walter Scott
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final 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
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding