31. Starting the CSS for our page - Responsive CSS Tutorial

Key Takeaways

I do think it's we're going to be getting started with the CSS I'm so excited by this I love working on big projects like this and sharing how I work on big projects like this oh well I can't see the work you do I'm excited for you to challenge yourself and you have some fun with this so here is that Adobe XD link again just in case you never opened it I do think it's going to make your life a lot easier so I would really encourage you to click through and use that to get the specs but if you'd rather I'm gonna keep this slide open the nice thing with the Adobe XD version of it is if you go on the home page here you can zoom in on different parts of it and look at them in a little bit more detail which might make it a little bit easier to work on in this video we're just focusing on the global style sort of setting the stage for everything it is going to take us a little while to get through all the CSS that we need to do on this one but let's jump into it and actually get started because it is the first time we're looking at a big project I am going to start now if you want to do it on your own by all means do as much of this on your own as you can with what you have and with everything you know as I've already mentioned there are a few things we have not covered yet that I'm gonna use this project as an opportunity to teach you about but constantly throughout all the lessons we're building out this page I will be stopping you and asking you to do things that you've already done so it's not just going to be following along with me I do want you to be pushing yourself and learning while we're doing all of this as well if you didn't get that Adobe XD link already it will also be in the notes of the lesson too just in case you don't want to have to try and worry about the slides or anything like that so as promised I've put in all the content here so that will definitely make your life a little bit easier and let's go over to the CSS and we already have some CSS in here because what we did this when we did our navigation right so we're gonna leave this all here it does make our life a little bit easier to work with because we've already set a few things up now I'm not going to be constantly coming and looking at the layout throughout this but I'm gonna have it open on my own screen on the side like it encouraged you to do with the link that I have shared you because it's a lot easier when you're looking at your design I will be opening it occasionally but I don't want to constantly be opening and closing it just so it's I think that'd be annoying for you but whenever I'm sort of looking at bigger subjects or when we have to come and examine something I want to explain myself I will open up this loop I will open up the slide just take a little bit of look of it but if I'm just grabbing font sizes or doing small things I might just refer to as you see in the slider as you can see in the design so there's a lot of commonality that's going on in this all of our titles are looking exactly the same we have our continued reading we just have the basic body and the setup of that as they said I like starting with global styles I already mentioned this videos about the global set up so that's what I'm going to be focusing on and of course we I've given you a whole bunch of the typography now I didn't put the colors but I showed you what it looked like so I'm assuming you can figure out what color you need and stuff like that so let's go and set all of that up so where do you have our h1 and our subtitles set up here so well we might as well keep going through this and set up the other parts of our typography is I do think that's the best place to start whenever doing your CSS because it really sets the stage when you start doing the layout stuff sometimes if you don't have the type setup things don't look good and you start getting frustrated and you're moving things around and then you change a font size and you have to on do other stuff you did so always starting from me it makes a lot of sense starting with the type I think it prevents problems or other issues from cropping up along the way so we had our subtitle which I could put here just a comment to myself that this is like the logo subtitle because I didn't give it the best name to be honest because we also have our article title and I don't want to confuse that my subtitle like this is the subtitle for my h1 or maybe I could even put each one subtitle so I know that it's not dealing with my article title that I created and it's an it's not a subtitle for my article now if I did have subtitles which I don't hear but if we had like a secondary title for my all my article titles I would have had article - subtitle just to clarify my naming and all of that so I'm gonna go through and set this one up so the font family is Laura and well what's the easiest thing to do to get that font family it's to come up to here and to copy it but wait a second if I have to come somewhere and copy it that already means that maybe I shouldn't be doing that maybe I should be combining two selectors together probably a good idea because I also I'm gonna want my font weight here to be shrunk down as well so I think what I'm gonna do is I'm gonna take both of those off of my h1 and actually come all the way up here and put it h1 h2 now I'm doing it on the h1 and the h2 I could also be doing this on my article title if you think that makes more sense by all means go for it but I I'm only going to have my H Tuesday's article titles in this page it's very possibly of designs that are different and that aren't like that and you know what my age threes have that as well because my age threes are I'm going to actually open up this I said I wouldn't too much but these are my H threes and they're sharing a lot of commonality with everything my h1 mhm too so even though they do have a clasp on them the way I usually do it is I'll start with a really generic h1 h2 h3 do as much like Global stuff on that and then when it makes sense to have my class to put things on that it really depends on the layout and the design that you're creating as well sometimes you only need these you never have a class sometimes you have a lot more on your classes I wish there was like this is the answer that I could give you one of the fun things I think with CSS is there is no this is the answer that I can give you which can be very frustrating when you're learning but I do want to show you that it's not all just like this cookie cutter cut and dry thing and that if you didn't do this and you just put everything on the class that'd be perfectly fine there's not a problem with that but if you find yourself repeating yourself try and make combinations and again you're gonna see you could even have it h1 h2 h3 and then maybe you know have your article title in there as well as a selector even though that might be a bit redundant maybe you're gonna have an article title that's a paragraph for some odd reason you never know and you just want it for visual reasons and not necessarily for other reasons you know I could have my article title here as well as like another selector that's in that now I'm not doing that this time because my h2s and my article titles are the same thing but I'm gonna leave it just like this for now but if you're not too sure either put it everything on your class and you're completely fine there's nothing wrong with working that way it's how I work for the longest time but now whenever I find myself having to come and copy something I'm just gonna group it up to here and because this was just my regular h1 tag I'm just sticking with h2 h3 but if I put my classes up there as well that's completely fine and completely normal you know what else is the same on all of them actually is the color they all use that same dark blue color so we can also put this up here and we've done a lot the only thing I really need my article title for is the font size so my font size on this case it's 24 pixels which comes out to 1.5 M so if you were looking at the Adobe XD you would have seen 24 it's one of the very common number for fossilizes and it works well 1.5 is a nice easy one to do now I do have the body text font size which I have is 1.125 R M so I have a choice now of you know this is my body and then I have my typography grouped here there are some people who will come and put like this and say body and put a font size down here as well again I'm not doing it on my paragraph because I don't want it to only affect my paragraphs I wanted to affect everything and it's not so much going to be effecting on this page but we will have a project where you we will see a big difference on that um so I'm gonna come up here onto my body and I'm gonna set the font size here 21.125 Rim and I think that is it so that's good and the next thing we want to do on this one so we have the links at the end which always have that article read more that say continue reading in them so we need to style that so article read more as the font size of 0.875 r m and if you leave off the leading 0 there's no problem you can just do just do it like this i tend to do it that way because it's one less keystroke i know a lot of people prefer the 0 it's up to you which one you want to have and there's the dates that have the same font size on them so why don't we do this that we also have i put dates in my Adobe XD file but if you remember we actually called it article info because it's not just the date if there is some extra information in there as well so the two of those have the same font size don't forget the dot but there and there are some differences between them so when my article read more we also want to be throwing in here a few other things the color on that link is that bright blue of ours they are linked so if we actually I'm gonna take a look at this for the first time since we've set all of this up we should see it's starting to come together because we're setting things up really nicely I forgot to change the font weight on the body and notice how it's a little bit bolder than in my design so in my XD file I are in even on the slide here where I put the style I definitely mentioned that it should be Ubuntu light and I didn't make that change so you here with my continue reading button we can see there's an underline on it and we don't want that underlined to be there so we can't in texe declaration of nun and the font weight of 700 because it is the regular bold if you wrote the word bold that that would be perfectly fine too the one thing we won't be looking at as I mentioned when we were looking at the logo is the spacing on the letters the space and the letters is a little bit spaced out we're gonna see in the next module we're gonna come back to this project we're gonna be stepping up our style we're gonna make things look a little bit fancier and nicer so let's come up to my body on that one thing that I forgot which was my font weight font weight should be 300 and actually and let's go look I don't think it's working and there's a reason why it's because I didn't bring in the I didn't load it in with my google fonts but I want it take this opportunity to show you a nice little trick because sometimes you realize there's a font weight along the way that you need that you didn't bring in or you didn't load when you were at google fonts it's annoying if you've closed your tab to find the right font to open up the little black bar thing to go back to customize get the link copy it back you know it's not it's not that many steps that I'll hold then if you can avoid it it's always nice so when we're bringing in our google fonts i've showing you that it adds the numbers here it's just putting in the numbers and comma separating them so if you forgot one and you want to add it in after you can literally just come here and add it in like that it's really really simple really really easy and now we have access to our 300 as well so if we come and look we should see ah there we go the fonts are nice and light and they look much much nicer my continued reading is also looking okay one thing I didn't do on that though was I made a bit of a boo-boo I did not include a hover so I'm gonna come in and I had a hover to it and if we have a hover we need one other thing what is it hope you said focus on these long ones I like to copy and paste to make life a little bit easier I'm gonna put take a minute I'm gonna remove the font wait because we don't want to change that I want to change my color to the darker color just so they're just we have a color but I also want to add the text decoration back in because I find the subtle it's gonna be a shifting color but I think adding the underline will really just make it more pronounced so the original text decoration we haven't looked much at this but if you want to it's just writing the word underlined that's the default style that's already there so we can add it back in by doing a text-decoration:underline or you can put that on something that doesn't have an underline and you can create one so you had a span where you wanted an underline this is one way you can do it so now if we go and take a look at what we have we have the everything is looking pretty good and you can see the changes color and I'm getting that underlined that's coming on there as well so we have two things left to do in the typography section before we finish off this video but I'm going to do them as a challenge to you before I do them they're both things we've looked at before and I won't lie to you I forgot to do this at the beginning so you might have noticed the beginning of this video we didn't have the bold or the link here I've just added them in now sorry about that but now that they are here I need you to style them for me the problem with the bold one is it's not bold enough it looks a little bit bold but it's not really quite getting there and I'll explain why in a second and then the other problem is this it just you know as some basic styling on our link we want to make sure we have a hover change the color and all of that on there so I'll let you do those two and then I'll take a look and explain a little bit of what's going on with the strong all right so I'm assuming you put them down here when you did it online 60 and I left a space there to do it so that's completely fine just to say if I was doing this myself I'd actually leave this space here because I'm going into a next section of content anyway but I would actually bring those up here where I have my general like my h1 h2 h3 selectors because then I'm getting into classes and I just like organizing things and this is just personal preference on my part there's no right or wrong answer here but I would have my a here as well as my strong tag if I had paragraph Styles if I had anything that's just a regular tag before I get into the typography of my classes I would include all of the general ones first so on my a here we can set the color of it which is the light color now one that you might have also found a way to sort of combine it with other selectors and if you did that that's really cool I think that's the only change we needed there but of course we need our a:hover and a focus we also want to give it I'm just going to do the same color change that I did on those read more links and as I said we need to style the strong tag because the font isn't bold enough it's a little bit bold and it's not really getting very bold and the reason for this is depending on the browser using actually bold can have two different settings on it and one of them is bold which will just bring it to 700 automatically but the specification actually outlines that it should be bolder like there's no there's a literally a bolder key word so if I come on my link here just so we can stay in one spot and not create a new class or anything if I set the font weight on this to bolder you'll see it looks a lot like my strong tag here it's gained a little bit of weight what bolder means I'm gonna go back to my index for a second is it means we're currently here go one step bolder so it's gonna go from 300 to the next available font in the scale whereas if you use the actual bold key word so instead of bold it goes to a bolder it goes to bold now you can see it's gotten super fat like look at the difference there between this one and my link so bold really bold will always jump to 700 whereas bolder will go to the next available this depends what browser you're in Google Chrome will actually normally go to bold whereas firefox and some other browsers will go to Boulder but Boulder is the official specification that's the way it should be working that's one of the reasons on a strong tag even if it looks good on your screen you different browsers might be doing different stuff so always tell it what font weight you want to have in this case it should be 700 and we can take this font weight of my a off and if you put the word bold that would be fine to bold and 700 should end up at the same place I prefer the numbers a they're faster they're a bit more consistent and when you get start getting into like the in betweens which you're often going to be using it's just a lot easier to use a number so there we go now I have the nice big bold font on there and everything else is looking good and my link is clearly something we can click on and that's it we don't have anything else to do the dates we don't actually have to this article info we don't actually have to do any other s'more styling than the font size I know in my outline I put that it should be light but because I put the light font weight on my body here that's automatically gonna get applied to everything now pretty much unless I explicitly override it by putting a font weight on it so everything is done we're good to go in the next video we can start with the layout