Styling text - Dreamweaver Tutorial

- [Instructor] We've created selectors for a heading in index.html and an article in dining.html. Now it's time to start styling them, beginning with the text. If you're still working with the files from the previous video, that's fine. I'm gonna start working index.html and then scroll down and make sure that I've got that heading underneath the hero selected. And to start styling it, I need to find the hero h2 selector, and the quick way to do that is to go to the current button in the CSS designer, and the hero h2 is automatically selected. There are no properties set there yet, so deselect show set at the top of the properties pane, this gives us all of the properties that are available within the CSS designer. We're looking for text so that's the second icon from the left, click that to jump down to the text section. Color is the first property. I eventually want this to be white, because it's going to be superimposed on the image, but there's no point in making it white at the moment because it's on a white background, and it will become invisible. So I'm going to change the font size. Click to right of font size, that opens a menu with units of measurement, you can choose pixels, I'm going to choose M, which is a relative measurement, click that, and for some strange reason, Adobe has decided to make the default zero. And that's why my heading has now disappeared in live view, because it's 0M. I do wish Adobe would default to a sensible value like 1M, but that's the way it works so don't worry about the fact that your heading has disappeared, it's purely and simply the effect of the CSS. I want to set the font size to 1.5M. And you can scrub the values in the CSS designer, and if you hold down the control key on Windows, or the command key on a Mac, you increase in steps of point one. So I drag to the right, and we can see that the heading has reappeared. I need to 1.5 if you overshoot, just drag slightly to the left. There we are, 1.5M, release the mouse button, and the command key, or the control key, and it's the size that I want it to be. Now if you find that difficult to do, you can just double click in there and you can type the value in yourself, but make sure that there is no space between the number and the unit of measurement. I'm happy with 1.5M so I'll just click to the side to confirm that. Let's also give the heading a text shadow. Text shadow is a little bit further down in the text action. I think it's always a good idea to set the color first because if you set the color you can then see the effect as you set these offsets. So, click inside that little color box, to open the color picker, in my case it's already set to RGBA, if it's not set to RGBA, click that button there to set the color mode, I think it's always better to have alpha transparency in a text shadow, it makes it a little bit more effective. And then drag the saturation and brightness slider up on the left, doesn't matter exact value, round about 82 is fine. Then the slider on the far right, that sets the alpha transparency, drag that down a little bit, and you can see the numbers change. Look at the last numbers in RGBA, I want it to be about 78. That will do, once you've got the values correct, you can see the color that's going to be created, at the top left here, just click away, and there, the color has been set. We can now set the horizontal and vertical offsets. I'm gonna scrub again, this time we're gonna hold down the Alt key on Windows or the Option key on a Mac and that will go in steps of one. There we are two pixels, and two pixels again, and for blur, I'm gonna make it six pixels. You don't need to hold down one of the keys when you're scrubbing, but if you hold down the alt or Option key, it constrains the scrub to units of one, and that can be very useful when you only want a small value. So there's our text shadow in live view, it looks pretty awful on the white background with the pink text, but once the text is turned to white and it's superimposed on the image, I think it'll look fine. Now that Hero h2 descendant selector that we created in the previous video was put in the global section of the style rules. In other words, they're not controlled by a media query, and the font size that we've chosen is appropriate for the small screen of a mobile device. And I think it needs to be bigger on a larger screen, so we need to create a style rule inside a media query to over ride the current font size property. So to do that, this time click the All button, then we need to select the source, which is main.css, then in the at media pane, we need to select the media query min width 680 pixels. And I want the new style rule to go after all of the nav links, so scroll down in the selectors pane to find the last nav links style rule, highlight that, and then click the plus button in the top of the selectors pane. Make sure that the h2 is still selected in live view. If it is, you'll get the correct descendant selector, hero h2, if you don't get the correct selector, just type in that descendant selector there then press enter or return to confirm it. Then we need to go down to the text section in the properties pane, and it's the font size that we want to change. Again I'm going to use M, and it will disappear. I'm going to hold down the control key on Windows or the command key on a Mac and scrub to the right until I get 2.2m . There we are. So let's just test that media query. Hover over the extreme right of the document window, this is the live view scrubber, hold down the mouse button and scrub to the left, as soon as you go past 680 pixels, it should go small. Then in the visual media queries bar, click just to the right of 680 pixels, it should jump to exactly 680 pixels and you should get that larger text. If you still see the larger font size when you scrub to the left beyond 680 pixels, that means that the global style rule is lower down the style sheet than the media query and you'll need to switch into code view to sort out the order of style definitions. I always keep media queries at the bottom of the style sheet to avoid global styles over riding them. So lets restore the document window to its full width by double clicking in this empty space here. Right, that's dealt with that heading, lets switch quickly to dining.html and I'm going to scroll down to find that room service article at the bottom. I've selected the paragraph, just press the up arrow key a couple of times to get article room service, and then we can select the current button that gives us room service directly there. I'm going to go to the text section and then text align, I'm going to select center. And that has centered the text inside our room service article. And then go to the file menu and save all related files. Because the changes have only been made to the external style sheet, this also saves the changes made to the heading in index.html. We've changed only a few styles, but the basic principle for setting any style in the CSS designer is the same, locate the property and set its value. We also saw how to over ride a global style, by creating a selector in a media query. If a style set in a media query doesn't work as expected, check that a global style lower down in the cascade isn't taking precedence.