Transcript

Demonstration: Adding CSS

Web Developer Primer for PL/SQL

 

6. Demo Adding CSS

 

>> Patrick:  I’m going to bring in that other file with the CSS stuff here. Now you can see that the result of that CSS styling has been applied here. We’ve actually added Hi Canada and Netherlands. You could see that the country paragraphs have that light green background and that was done in one place. Canada is red and the Netherlands is purple. Let’s inspect the elements to see what we have. 

 

[pause]

 

You can see over here on the left we have our HTML. As I hover over the HTML, you can see that the live area is highlighted at the top. And over here on the right we have our CSS Style Sheets that are applied to this. 

 

[pause]

 

Now let’s click on the header. Let’s expand the header and you could see exactly where that Style Sheet stuff is. I’ve got these embedded here inline. The actual proper way of doing this is to actually put your Cascading Style Sheet syntax in its own separate file. Here I’ve just got a commented outline that shows you the hook for that. You could actually have a link. It says “Style Sheet” and this href thing points to a file somewhere on your file system that contains your Cascading Style Sheet. But for this demo I’m just using this inline stuff to keep things fairly simple. 

 

[pause]

 

You can see here the default paragraph were blue, country – Canada. This is where the Style Sheet stuff is. If I click now on our class country for Canada, notice over here on the right-hand side now we have all of the styling that is being applied to that particular paragraph. 

 

You see on the top here we have our hash Canada syntax. And you see here we have these check marks in front of the properties. So if I click the color off, you could see up at the top here the “Hi Canada” has gone back to its default blue and you can see that there’s a strikethrough. I hope you can see that on the screen. There’s a horizontal line that goes through the color and the color red.

 

[pause]

 

>> Dave:  Yeah. That’s coming through very nice. Thank you, Patrick.

 

>> Patrick:  Okay, good. I’m glad you could see that. Click that back on, you get your red color back. Font size, there you can see that the font changes in real time. You can really see how your styling affects your page. So you can use this as a bit of a playpen. 

 

Here we have our country. You could see the background. Note that the highlighting goes off for both paragraphs there because this .country belongs to a class, so it’s affecting multiple paragraphs at one go. 

 

[pause]

 

One other thing, the tips Chrome to being the browser of choice here or the tool of choice is this element.style blank area at the top. You can use this as the playpen. Firefox you can use this area as a playpen, but Firefox actually go into your hash Canada area or your .country area to play around and that gets a little bit confusing, whereas with this elements style this applies to the class or the paragraph or element that you’re actually clicked on. So if we’ve clicked on Canada and we come up here and we actually add some syntax here – let’s keep it simple – let’s change the color. Let’s say, green. 

 

[pause]

 

There we go. Now we’ve got text up here in green. So now you can actually see how you could use it as a playpen and see the effect of what you add here in real time. And of course then if you refresh the page, all of this custom stuff goes away so if you want to save something nice you have to copy and paste into some place permanent like your text files. 

 

[pause]

 

Oh yeah. And you see this color little box here. If you click on that you end up with a nice little color tool that allows you to pick colors, shades, and all that kind of stuff. It’s a really handy, handy tool. In this web development tool, there’s a quite a few handy-dandy little helper icons over here. You could see there’s a plus sign here and it allows you to add a new element. 

 

[pause]

 

You can click on this for element state. These things up here are called pseudo variables. You can actually style things, for example, if you want to set things that happen when you hover over an element, you can use this area to play with that kind of stuff. 

 

Then you notice down here I’ve got these colors like red and green. You can actually change the syntax. Let’s click on “Hex colors.” Now you can see that the colors have been translated to their hexadecimal values. So you can pick your color notation that you want. So just be aware that you got a bunch of very handy-dandy elements or links in this tool.

 

Copyright SkillBuilders.com 2017

×
Free Online Registration Required

The tutorial session you want to view requires your registering with us.

It’s fast and easy, and totally FREE.

And best of all, once you are registered, you’ll also have access to all the other 100’s of FREE Video Tutorials we offer!

 

×
Podcast
×