What do you want to learn?
Skip to main content
by Shawn Wildermuth
For the beginner, starting to learn web development can be daunting. In this course, Shawn Wildermuth shows you step-by-step how to use client-side web development techniques to create immersive web sites.
Start CourseBookmarkAdd to Channel
Table of contents
Why This Course?
What Is HTML?
So let's start by understanding the simplicity of markup. For our examples I'm using a Sublime text editor to just write plain old text files. I could be using Notepad, I could be using Vim or Emacs or any editor including Visual Studio. What we're doing is just creating simple files that we can host as a small website, it doesn't matter what tools you're using. I like using Sublime in this case because it's really thin and easy to see all the moving pieces. So here we have a really blank slate. When we're dealing with markup, we're really just talking about creating a hierarchy of elements. So let's just create not even HTML at this point, just some markup. So some of the basics of markup is that you can have an element, and an element is a name of an object and it's surrounded by two angle brackets, a less than and a greater than. And in this case that represents the beginning of this structure. To end an element you're going to start with that same greater than and less than with the same names we have here, but you're going to start it with a slash in front of it. This is an indication that this is the ending part of this, what is called an element. And then everything inside of that is simply the content of that element. And in addition you can have what are called siblings and that is elements that are at the same level that are sisters or brothers of the other elements. So let's do that with a bar element here. So in the case of bar we might not have any content and while it's perfectly valid to leave the beginning and end part of the element just next to each other, some of the elements support what are called self closing tags and that is ending an element with a slash greater than. This indicates that it's an object, but it's an object that has no content inside of it. It's a simple, atomic element. In most cases instead of having arbitrary content, markup will have a hierarchy relationship or a parent child relationship. So in this case foo is the parent of the bar element and the bar is the child of the foo element. So a simple parent child relationship. And this is how you can build hierarchies, one parent has another child, has another child, has another child. And it's perfectly valid to have let's say a couple of these. And so in this case, foo as a parent has multiple children. And these are some of the very basics of markup itself, but we're really talking about HTML as a markup language, a hypertext markup language. So instead of these arbitrary elements, let's use elements that are actual HTML markup elements. So here I'm going to change this top level parent to a div. A div is a basic unit in HTML that says this is a portion of my webpage. Inside that div in an HTML page we might have an image tag as well as let's say a paragraph tag. P is for paragraph. So in HTML we can have these atomic elements and image is one that is always atomic, it never has content associated with it, and then paragraph tags that may have arbitrary content. In this case I have some piece of text that's going to be shown in a formatting for a paragraph. And so this is about the most simple piece of markup we could possibly have in HTML. Even in content scenarios you can have other parts of the content wrapped in their own element. For example if I say hello world and put my name in there, I could surround the world with a b tag or a b element as it's often known, and that is going to be some indication of how I want a formatting the world and in this case that would be bolding of that text. So even in the case of content with HTML we're using elements to surround or to tag different parts of the markup so the browser knows what to do with them. Elements themselves can also have what are called attributes and these are pieces of information, name value pairs typically, that are inside of the actual element tags themselves. So I could define that this div has an idea of top and then image could have an attribute called source that pointed at some actual source location for an image. Individual elements can have more than one if necessary, like in the case of image tags we might have a second attribute that defines the alternative representation of this image for viewers that have images turned off. This is often the case for screen readers for the blind or for the partially blind. Now if you've come here with some prior knowledge of markup languages like XML, you want to be careful with understanding this markup. Because in the case of XML there are some rules around XML. XML was actually developed after HTML and wanted to find something that was a little more structured than HTML. HTML has some specific peculiarities that make it a little bit more difficult to parse than pure XML. So if you come from the XML world one thing you have to realize is that unlike XML the markup here in HTML is not case sensitive. So making a capital img for the image tag is perfectly valid. Most people use lowercase tag names, but it is not a requirement. There's also this notion of being able to self close a tag like we have here on image, but not all elements support that. There are tags like script and paragraph and div that must end in a full element closing like this. They cannot end in this shortcutted version. And there are some elements like the image tag that can't have its own content. It never has children. These peculiarities can throw you because in the XML spec they standardized these things so they were a bit easier to parse. In HTML you're just going to have to learn about these exceptions and live with them. We're living with them, we can't just change it because we have browsers that go back years and years that have existing websites that are relying on these rules to be in place. This is one of the peculiarities of web development that can be a little painful, but most of the libraries, most of the code we're going to be using, are going to have ways to sort of backfill older browsers for us anyway. So let's take this and let's start building our first HTML page, now that we've looked at some basics of actual markup.
Structure of an HTML Page
Next, let's create an HTML page from scratch so we can see the real structure of an HTML page. I'm going to go ahead and close this temporary file and I'm going to create a new file. I'm just going to call it index.html to represent just a simple HTML page. HTML pages start with a tag called HTML and that is the parent for the entire HTML document. Inside the HTML document there is a head section and this is going to contain some elements that are used to interact with the browser, setting the title, bringing in CSS sheets, setting metatags, things that aren't really about the look and feel of the individual page. For the actual body of the document we're going to have another tag called body. This structure is the very skeleton of an individual HTML page. An HTML parent called HTML that contains two elements, a head and a body. Before the HTML tag we start the document out with something called the doc type. This is a bracket, exclamation point, and then the word doctype to indicate what is the actual type of this document. So this doc type is going to indicate what kinds of elements a browser is going to expect in your document. If you include element types it's not familiar with, it's actually going to interpret them, most browsers do at least, as div elements. So if you want to have your own named elements, they will be interpreted for the most part in modern browsers as a div element itself. So let's go ahead and make an actual working HTML page here. Right now we have a valid HTML page, but there's nothing at all that's being displayed in the browser. First thing we'll do is start with the head and we're going to go ahead and give our document a title called the Github Hub so a simple webpage that's going to look at the different projects on GitHib.com and be able to look at information about them. Not a super useful webpage, but for us it's going to introduce a lot of these concepts. In the body itself let's start with what's called an h1 tag. H1 is a heading. There are actually six of these that are defined with HTML. H1, 2, 3, 4, 5, and 6, for different heading levels. H1 is normally the largest of these and it's used for big visual elements on the page. So let me put that same name here, Github Hub and let's actually view our HTML page in the browser. So as I go to our index.html page, we'll see a couple of things here. This is that h1 we defined that is part in the body. The body is going to exist here in the main part of the browser, but one of the other things you should notice is that the title ends up being the title in the tab or in the title box of the browser. Most browsers now are tabbed, but even in the case of non-tabbed are only individual pages in a browser, you going to see that titles show up right here in the tab. So the title is important, it's not just a piece of record keeping, it's actually something that is displayed to the user. If I go ahead and bookmark this item, that bookmark is actually going to be the name that was in the title, Github Hub. So that title element is important to get and get right. And now back here let's add a paragraph tag just to indicate some information. This is a site to search Github for interesting projects. Let's go ahead and create a second paragraph tag that might have a little bit more information. So now we have just structural information. We have a heading and then a couple of paragraphs. If we go back to the browser, we'll see that it's separated these into something that sort of looks like paragraphs. If we make this smaller we'll see that the paragraphs will actually text wrap as you would expect paragraphs would in any sort of textual representation. But we'd like to have some more information here that might be interesting. So let's go ahead and use another tag around here, around the sample site, that says go ahead and show this in italics. And then let's go ahead and do the same here for bold. So these are elements in their own right, but they are also information to the browser to indicate how to format what the user is saying, in this case use italics and in this case go ahead and bold those elements. And we can now see that the italic is used here and then the bold is used here. In HTML5 they've sort of gotten away from using the i and the b tags and instead want to use ones that are more indicative of what they actually do. So em instead of i is actually to add emphasis and instead of b for bold they actually want to say we want to make these strong. And so you're going to see both of these in examples, so I wanted to make sure you saw them. If we go back to the website and refresh we're going to get the same formatting. So the i tag as well as the em tag are the same instructions to the browser and that is to use italics for the font and b and strong are also both the same thing. Of course, HTML5 is a hypertext markup language. Now what do we mean by hypertext? One of the basic ways that the web works is that sites can link to other sites, that you can follow this chain of information across from site to site. It's a way the internet works today. And this is using a tag called an anchor tag or an a tag. So for the Github here, let's give them the opportunity to click on the Github and open up the Github website so they know what we mean by the Github website. So inside this a or anchor tag we're going to include a property called href. Href says where should this link go and in this case we'll just go ahead and say Github.com. When we refresh this in the browser the Github now is an active link. When we hover over it we can see it's going to Github and it's displaying differently in the browser so that when we click on it it will go ahead and take us actually to whatever the webpage, whether it's internal to our project or an external webpage, like we did here with Github. The last thing we'll do is go ahead and replace the content of the name of our website in the h1 here with an actual image. So I'm going to replace that and just create an image tag itself. And the image tag is going to want to source to some image to display and in this case I'm going to use a folder structure inside my project and in this case img/logo.gif. So of course our folder here with the index doesn't have any folders. Well let's go ahead and change that. So we now have an image folder that I just created with Sublime. Now you could use any method you want. And I'm going to copy from my resources folder inside of the samples that are available to the Pluralsight plus members, you're going to find a folder called resources. That contains some files including this logo.gif. So we can now see when we open this up there is that logo.gif and so this path is saying go get and display this logo.gif here. What's interesting about the source here is it's going to be relative to wherever this file is. So by saying image/logo.gif, it's going to say, oh the sibling of the index in my folder structure is image and then go find the logo inside of it. We certainly could have also said a full absolute path to a resource as well, but typically if you're using your own resources on your own website you're going to want these to be relative paths, relative to the location you're dealing with. If we go to the browser and refresh we can now see that we have an image that represents the main part of our website inside of just some textual information. So we've seen with just a very simple set of HTML elements we're able to display images, format text, set the title to our element. So we're starting to see that this structure, this document we're creating, that the document is something that the browser is going to render for us based on the instructions that are in the HTML.
Next, let's talk about some important tags in HTML. Earlier I briefly introduced the idea of a tag called a div and a div is just a section of an HTML page. It's sort of a catch all for structural information. So if we take these first two elements and put them in a div, we're saying that these are going to go together somewhere on our page. And this is later going to represent the header of our page. Let's do the same here for the body of our page and let's create a third div that's going to represent the footer of our page. Divs themselves don't have any UI to them unless you tell them to color or add elements and so even though we've added the structural pieces, these divs, in place, our page looks exactly the same. We have a div that surrounds these two elements and another one for the body here and then actually a third one that has no content in it yet for the footer. So let's go ahead and add that content to the footer. I'm going to introduce you to a way of finding special characters. HTML supports this idea of escaping characters and all these start with the and sign. In our case we're going to use a simple one called copy and that's going to show a copyright symbol. And so as it would be appropriate for a footer, I'm going to show just a short copyright notice. These escaped characters are actually what are called entity references in HTML. These allow you to create characters that may not be valid purely inside of the HTML. They are other characters and there are quite a few of these, I'm not going to cover all of them obviously, like gt for greater than and lt for less than. And these are interesting because these represent the symbols of greater than or less than, which of course wouldn't be valid because we need the greater than and less than to represent the delimiters around each of the elements. You can also represent Unicode characters by just representing them as a number. These also start with ampersand, but then are immediately followed by a pound symbol and then a number. In our case if we did, let's say 937, that would be the decimal representation, which shows this character here or after the number sign you can use an x to indicate you're going to give a hexadecimal version and let's do 160 for this character here. And so even if there isn't a special entity reference inside the HTML you can always drop down into Unicode. Normally in HTML this div tag represents a rectangular section of the page, that's why as we're going to use these for headers, footers, and sort of the body of our page, the div is a good solution for that, but sometimes we need to be able to define an inline section of code and we can do that with something called a span. So here I'll add a span inside our text that's going to represent just these three pieces of code and this would allow us later to style or change the look of just the characters that are inside of this span. It represents an inline container much like the div represents a rectangular container. Those are the two basic containers you're going to end up using. But even though in a lot of HTML you're going to see div used to define those divisions or those containers, in HTML5 they introduce what are called somatic tags. And these are tags that are better named to define what they're actually doing. And some search engines can actually look at this information in order to discern what data is inside these tags. As far as formatting, some of the tags are formatted simply as divs, but they're supported as these name tags again that have a semantic meaning. And we'll go ahead and use these here. One of them is the header tag that says here is a section on our page, but I'm going to define it so that everyone knows this is the header of the page. We can do the same down here for footer. Again we're defining a section of the page, but we're also giving it semantic meaning in the markup. This is so people that are parsing it like search engines, mobile devices, mobile and desktop browsers, that they can make some decisions about them, that we aren't implying that the header is going to look a certain way, the footer is going to look a certain way, or the div. But you can imagine a search engine as it looks through might go, well the header information isn't going to be necessarily descriptive of what this site has to offer, certainly the footer may not be, but what's in another section on the page might in fact be more interesting for indexing for searchability. The last of the semantic tags I'll show you, and there's a number of them, again, not going to be able to cover all of them, is just called section. And this is to give more meaning to the structure of a page. If this were a blog engine or something like that we might imagine that this is going to make sense that maybe the body of a blog would be here, the header of the blog and the footer of the blog are here as well. And so that we know that there's going to be some repeatability, it's again providing the semantic or this real world meaning to the sections on a page. So let's show you a few more tags including another of those semantic tags that were added in HTML5, and that's a tag called nav. This is a new tag that represents the navigation of a website and so by certain people looking at this it can know that this is going to be the section that's going to provide navigation across a website. And so inside the nav we can define really in any structure we want a list of links to other pages. We're actually only going to build this one index page, but let's create a couple of links to go to different pages even though we might never implement them in our simple and small example. So here I might have another anchor that goes to the home page. So I might just start it as index.html because that's always going to be the reference to this page itself. Now let's create another one for a contact and I'll just pretend we're going to have a contact page and then finally for about, every website needs those three, right. Three very standard pages. So much like the other links we had created earlier in the browser it's just going to show these as clickable links, obviously contact and about aren't going to take us anywhere because those pages don't exist, but home will continue to take us back to this original HTML page. Before this I'm going to actually introduce a new concept and that's what is called lists. There are two kinds of lists that are pretty common in HTML, an ordered list, which is really a numbered list or an unordered list, which is really a set of bullet points. So let's start with an ordered list. It starts with an ol tag and ends with an n tag, like all of our pieces, and each item in the list is wrapped with a list item tag or an li tag. I'm using a little shortcut here in Sublime, allows me to quickly just surround and create this structure for us. Because it's an ordered list it knows that each of the list items here should be shown with a number sign. In fact if we can look at it, we can now see that it is just a numbered or ordered list. In our case we don't really want an ordered list, we want an unordered list, a UL. Because it's going to be a set of bullet points and later we might change the style depending on how we want this to be shown, but we'll use an unordered list, this is a pretty common case for a navigation pattern. We can see that because it's unordered now it knows to just show bullet points by default. Again, in the next module when we look at CSS we'll see how to change this to make it look like the exact thing you're really looking for. One thing to notice is that this logo up here, we actually have it inside of an h1 tag and an h1 tag or first heading tag usually has some spacing in it. Same for this paragraph tag we have here. Later we're going to design what this header looks like exactly and so this probably isn't useful to include the h1 or the paragraph tag as tags that have some built in formatting to them and so I'm going to go ahead and convert both of those to divs. This won't substantially change the way they look, but will allow us to remove some of that spacing in between them without having to specially format that later. The header is really all the items inside this, currently the section is this whole text that we had created, and then finally we have our footer down here. Don't worry too much about this being a little simple and ugly. We're going to get to changing this design when we get to the second module.
Cross Browser HTML
So we've been talking about HTML primarily and focusing on some HTML5 specific features. But you should really just be thinking of this module as being one about markup. When we look back at the history of HTML it's important to understand that the nature, in some cases the peculiarity, of HTML has been because it's always been written by the people who release browsers. The browser makers end up being the ones that write the specs and they sometimes write them in the reverse order, unlike most computing systems where you'll write a spec and then you build the software, often the software is built and then the spec is written to match the existing base of users out there. It's easy for new web developers to get a little scared by everything that encompasses that HTML5 moniker. It has really become a catchall for a variety of web technologies. When we talk about HTML or specifically HTML5, let's really focus on the ML part of HTML, the markup language part of it and understanding all the different tags that you may and should be using in your projects. We've only touched at sort of this surface area of them including forms and structure and header tags and the basic structural information about HTML, but as you build websites you're going to find the use and the need for more and more tags and you'll be exposed to them as you need them. Remember that HTML really is just structure. It's just a hierarchical document that displays what the browser should be showing to the user. All that the HTML becomes is an object graph in memory. So don't get too confused by the nature of HTML. If you think, as a developer, that it's only going to be an object graph, that we're just creating parent child relationships, a true hierarchy, I think you'll find it's pretty easy to wrap your head around. We've spent a lot of time on creating forms in HTML and this is really the key to accepting input. So whether those are buttons and input boxes and drop downs and radio buttons, which we didn't really show you, or checkboxes or simple textual input, these are all part of the form elements inside of HTML. We also showed you a simple technique for bringing in assets like code and CSS or other things that are going to be specific to certain browsers so that you can fix cross browser issues when you need to. It's becoming rare that you need to, but it's something that you certainly want to keep your head around and we've shown you some simple techniques for how to do that. This has been the HTML5 module. My name is Shawn Wildermuth of Wilder Minds. Thanks for joining me.
Styling Your HTML
Next we're going to talk about how to style your HTML. My name is Shawn Wildermuth of Wilder Minds. We'll start by talking about styles in HTML and then we'll introduce cascading style sheets. We'll walk through CSS rules, CSS selectors, sizing in CSS, positioning in CSS, and finally how to debug styling in the browser. Let's get started.
Styling in HTML
Let's start out by talking about styling in HTML. There's a style property on every element inside the HTML and the style property allows you to specify rules for layout. We can certainly use this style property, but in most cases we want to separate the UI and that style. We can do this by creating style tags in the header and including the style information. This would keep it separate from HTML, but this really is only separating it on a per page basis. Instead of that, we're going to use a technology called cascading style sheets or CSS for short. These contain all the rules for styling for the UI, leaves the HTML for structural information, and then this way you can allow for site-wide rules, not just page specific rules and overriding for specific cases where you need elements on specific pages to override the default site-wide rules. Let's start out by looking at the style attribute and how that works. Over here in our index.html that we built in the first module, we're going to see different elements on the page. If I come over here to our header element, which just to remind you looks like this, the header element is the section that contains the logo as well as the site description in the list of nav instructions for the home, contact, and about pages. Because the header, like every other element, has a style property, we can simply use a set of name value pairs here to change the way this looks. So in this case I'm going to say background color, which is one of the supported style names, and there's a lot of them, we'll cover a few in the course, but over time you'll learn more and more of these. I'm going to set it to light gray. Now the way the name value pairs work in styling is the name of the property, in this case background color, followed by a colon and then it's value. And then a semicolon separates it from the next name value pair set. We save this and show it in the browser. We'll see now that that header section has a light gray background. When we talk about the style property, this is really what it does is it changes the look and the feel of that object and because the other objects live inside of it they are also changed by it. In this case the header tag itself has a background of light gray and because none of the other elements have styles to specify the background color, the light gray shows through, whereas if the logo or one of the other parts of the page had its own background color that would show around that part of the element only. But of course creating the styles on each element individually is really mixing the structural UI information from the way it's displayed on a page and we want to separate that and we'll do that next.
So now let's talk about the style tag that is usually put in the head element. Up here in the head we can add a new section or element called style. And this is going to allow us to put styling information that's separated from the individual attributes. So in our case we want to take the existing style information we have here and we want to put it in the style section. The problem is we need a way to specify what element it belongs to and in this case we can just say header and then create curly braces around the set of properties we're going to include. By doing this we're going to get the same behavior we got by including the style element. It's going to be the instructions for styling all the elements on the page with the name of header. Of course we only have one, so it's only going to affect our one style. We refresh it and we can see that it still looks the same. This whole section is called a rule or a styling rule. And this is typically going to match one or more elements on a page and then specify how those should be formatted. We can add multiple properties here so we can describe all the different ways we want to change the look and feel of that element. In our case we can go ahead and set a border property. And inside of a rule not all of these individual declarations or name value pairs are going to be single valued. We can see the background color has a single value and that is light gray, but border has a number of elements to it. We're going to say it's going to be a solid border that is 1 pixel wide and is going to be black. So in this way it's a compound set of values. We can say all the information about it in individual border and in many cases these can be broken up onto individual lines as well, but this usually is a bit more efficient and will make sense more to you as we go along. If we look at this now, we'll see that we now have a black border around our entire header section. Let's create another rule and this time it's going to be for body. And of course boy is going to specify it for the entire UI part of our page, everything that's within the body section. One of the properties we can specify is font family. This is going to be the name of the font that can be used, but of course on different machines different fonts are going to be available so font family supports fall back. So in our case we're saying if Segoe UI exists use it, otherwise fall back to Arial. If that doesn't exist either fall back to Helvetica. And if none of those exist fall back to any sans-serif font you can find. And this way depending on machine this may render a little bit differently. We're specifying font names that we expect to exist on the resulting machines. You can of course import and use fonts and use those specific fonts that are downloaded, but we're not really going to cover it in this simple styling example. Another property we can specify is font size. But in this case we've said everything inside the body we're now going to change the standard font family and the standard font size. So this is going to take our example from this with a lot of serif fonts I'm going to take it down to this with a lot of sans-serif fonts. Now this machine happens to have that UI font on it, so it's actually using that one, but if it couldn't find it it would again drop down into Arial or Helvetica or any sans-serif font it could find if you find a machine without any of those major fonts on them. Let's go back to our header and let's change the font family here and let's just specify Times New Roman and serif. So we'll use Times New Roman if we can find it, otherwise just use a serif font. Now we specified font family in two different places and how does it know which wins? Let's look and see what the UI tells us about which wins. The header won the fight for who is going to actually use it and the reason is that CSS and the styling stack on the web is using a set of rules of cascading these properties. Because body is specifying the body of the entire page, the more specific tag of header is going to win in this case. So there are two rules about cascading you want to think about, one is if a rule occurs later in a list of rules it will win over an earlier rule and that more specific rules beat less specific rules. In our case body being the generic for every element on this page looses out to the more specific header rule that specifies what it is for just the section in here. We're going to see some more of this overriding or cascading as it's known as we go through some of the other examples.
So now that you've seen a couple of the pieces in action and working, lets talk about CSS itself, the actual cascading style sheets. The style tags on the top of the page certainly work, but they aren't very reusable. I would have to copy this onto each and every page of my project in order to get them to work across the project and of course maintaining them over time is going to be a problem and so in most cases instead of including style information anywhere in the HTML page we're going to separate it out into a new file. So I'm going to create a new file and a new subdirectory called CSS and I'll just call it site.css. Ordinarily you're going to keep your CSS segregated together so that you may have a number of CSS files, some that are specific to the entire site, some that are specific to certain pages. In our case we'll go ahead and create the site CSS that we'll use for each page. In CSS it uses the old c style comment tag so I would just like to put the name at the top of it, that way we know what file we're looking at if it's open in an editor. And all we have to do for the syntax is use the same syntax we get from the style tag. So I'm going to go ahead and cut and paste that over into our CSS file. And the trick here is instead of having a style tag here we're actually going to include the style to be downloaded and used on the page using a link tag. So we'll just create a link and there are two properties that we need to set, one is rel and that's going to tell it what kind of link and in this case it's going to be a style sheet rel. There are a couple of other rel tags that can be used here, but since we're focusing on styling this is what needs to be in the link for to download a style sheet. And there's an href tag that represents the actual path to it. Since our HTML page is here, our site CSS is in a subdirectory called CSS, we can just say css.sitecss and it will download that. Now that we have both files created and saved, let's show you that it's going to show the same data in the browser. So we're still downloading this page, but we're downloading the additional CSS file to style our page for us. We can see that this actually works, but lets comment out this line so that we can see our header go back to the new style sans-serif font. So it's pulling in the CSS information directly from our new CSS file that we just created. So let's make some more changes and teach you a little bit more about the syntax. In here let me create a new rule for that footer tag that we're using. We could certainly go ahead and copy this style into the footer and that would work. We can now see the footer is gray and surrounded with black, but this is duplicative. We have the same properties in two places and instead of doing that we can actually use a comma and say these are the rules that apply to both the header and the footer. And in that case we then no longer need this style and we can just pick which of the items here apply to both the header and the footer. So this is now a rule for both. The trick here is that this rule is for everything that applies to both. We can still have a separate rule that only applies to one or the other to have properties that aren't common. So in this case we'll introduce two more properties, padding, which is how much room from the side of the element to the element. So I'm going to give it a little bit more room to put some space between the text and the side of the element and border radius, which is going to allow us to round the corners of our border. In this case, I'll put a little circle around the corners on just the foot as well as add this padding. If we go back to the website we can see now there's more space in here and the corners are just a little rounded. So the rules still apply for header and footer for the background and the border, we've just added some other properties that are specific to just the border. And you'll see that this is not uncommon inside of writing your CSS style sheets. You're going to see that there are going to be some cases where you can batch together or reuse without duplication one rule as it applies to a number of elements and then have exceptional cases. So what ends up happening at the end of the day is that the footer element gets both these properties and these properties. So CSS reads all the rules and then figures out what properties apply to each element by just doing the logic. So know we've talked about named elements, like header or footer, body, etc. Let's show you some new ways to indicate what elements you're going to style.
Now let's talk about selectors based on the idea of an element. When we look at an individual rule, let's take the body for instance, the part before the curly braces is called the selector. The selector syntax is what decides what the rules are going to be applied to. So far all we've done is use the name of an element. But we can also use a new property I'm going to introduce called id. So let's take our section here and say id equals main. So we're going to identify this section as main. This way if we have other section elements we can really specify that it's only for this one instance. Id specifies a single instance inside of an entire HTML page. It needs to resolve to a single element on a page. In order to style it we use the pound and then the name, in this case main, to specify the selector for that element. And in our case we're going to take that main section and change some of the properties. So first let's set up a border like we've done before, so it'll be a solid border again 1 pixel, but instead of picking a named color like black or light gray, let's go ahead and use a pound syntax and when you start a color with a pound it's going to indicate the red, blue, green values for the color. This way you have a fuller pallet of colors you can choose from. After the pound value there can be either three 2 digit hexadecimal numbers or three 1 digit hexadecimals numbers and these will specify what the exact color is. In our case we can say ccc, again these values are going to be red, green, and blue, and it will pick a color based on that. In this case because they're hexadecimal numbers this is going to be a fairly light gray as well. We're also going to pick a border radius to round those corners. Another property we can use is called color. Color is going to specify the color of the actual text inside this element. Now because our background is going to be white, unlike the header and the footer, we probably want a color that's going to show up pretty well. By default so far it's been black, but I like to make things a little lighter than that so I'm going to specify another pound value and just say 202020 as a dark color, again, all zeros will result in a pure black, all FFFFFF, which is 255255255, for each of the red, blue, and green values will result in white. So having a red, green, blue that are all the same is going to give you a color that is some black and some white, in this case it'll be a fairly dark gray. Let's look at this in the browser. So we can see we now have a fairly light border around it and that the text over here is just a tiny bit lighter than the black we see up here. It's actually a little hard to see. Let's make a quick change so we can see it a little better. If we change this to FF0000 that's actually going to be pure red, FF indicating that a hexadecimal number of 255 for red and then no values for green or blue. In that same way we could do the same for a mix of green and blue, but in our case we'll go ahead and return back to that dark gray color as that will look best for our design. Of course our problem here is that we're stuck next to the header and the footer so we can't really see the border very effectively. So let's go ahead and add a margin and this is going to be the space between our element including the border and the edges of the next element. This can take the form of a single number like 5 pixels and in that case it will bring the entire element in 5 pixels from the top, the bottom, the left and the right. Instead of specifying one value we can pick individual numbers for each of those values by specifying four numbers. The way this works, in CSS all these numbered values start with the top, go to the right, go to the bottom, and then go to the left. It's going clockwise around the circle of values and it always starts with the top. So we can see now that the top is 5, the right is 10, the bottom is 5, and then there's 0 at the left hand side. In our case I actually want the top and bottom to be about 20, but I want the left and the right to be zero and in fact for zero pixels we can just say zero. So that's about the look I want, I want a little space between the header and the footer for us. But because this is duplicative I can actually also give it two values. And in the two value form the first value will indicate the top and bottom and the second value will be the left and the right. So that shouldn't change the way it looks because that's in fact what we're looking for, we're looking for an example of where the margin is 20 top and bottom and then zero left and right. And lastly, we want some space between our text and the body of the element, so let's go ahead and give it a small amount of padding. Padding uses the same rules in the that it can be one, two, or four values here, in fact three is supported as well, but we won't really talk about that. But in our case I just want 5 pixels to just separate us from the rest of the element. Now we can see this is starting to look a little bit more like what we want it to.
Next, let's talk about relative selectors. Back on our page, we have the main element that we had specified the id for and we also have a form element that's inside of it an then inside of it are a number of labels. Now we could go ahead and specify id's for all the labels so that we could then say search label and then create another one for lang label, et cetera. But using id's for everything can get a little laborious, especially if there's some commonality like there is with the forms. So one way we can do this is to use a selector that is positional. So we can say that we want to style the things that are a main and then use the greater than to say style things in main who are a child called form or also a child called label. Again, this is mimicking this hierarchy here. Main, form, label. Let's go ahead and put font-weight, which is another property we haven't talked about, but let's go ahead and make it bold so that all the labels are going to now be bold. So that matches it, but it's not actually a necessary. Using these greater than symbols can be a bit fragile because of course what were to happen in the HTML if we were to add another layer here, maybe we put this in it's own div or we moved it into another part of the main section. Having that direct walk down the dom hierarchy would be a bit fragile and so the solution there is to actually say hey in our case we're going to specify that any label, anywhere inside of the main tag, we're going to specify with this set of rules. Now this may look similar to what we did here for header and footer, but this comma is so important. This comma indicates it's a separator between selectors and that the rules apply to all the selectors in the heading here. Whereas down here without that comma we're seeing label that lives somewhere inside this main element. Let's do the same thing for the input element. Let's do main input and let's specify it's width at 150. This is another property we haven't talked about, but unsurprisingly probably to you there's a property called width where we can specify how wide these individual elements are. And this will match anything that is an input element. So the search phrase, the use stars, and the lang choice. If we look now in the browser we're going to see that this search phrase is now this wide, but so is the checkbox which just looks weird. You don't really want both of them to be that wide and the select here wasn't included in that width. So how do we address that? We address that by being more specific. So here like we did earlier we can include multiple types, like let's go ahead and put our select in here as well, So all of the inputs and all the selects inside of our main will be 150 pixels wide. So now that's a little better, but we still have this really wide checkbox. How do we tell it not to use the checkbox? If you remember I told you that rules are matched by specificity, how specific it is, and so if we look at our inputs we have a type declaration here for checkbox. It's easy to have a negative match and in fact in most cases you're not going to want to do that, so instead of doing that let's go ahead and put the type of text here, that way we can actually match input that are text make them this wide as well as selects and make them this wide. So we change that, we can say type equals text and now we'll only match for the search phrase and the language, but leave our checkbox alone. In many cases we might have a number of these in here like main input type equals password and even main text area because those are all input types that need to usually look in a form to be about the same width. And so we accomplish that by using multiple selectors with one set of properties that define them. So if we go back to the index at HTML, the only other one we want to really look at is this type submit because we've now only specified the input types we're going to change the width of, we might want to include a new rule for the submit button itself. And in this case we'll use a number of properties that we've seen already to change the look of the submit button to something more pleasing than a square gray box. We now have a search button that looks a little more slick. So next, let's talk about a selector that can match an arbitrary number of elements.
So now let's talk about class selectors. Back in our HTML we've got an image here that contains our logo. We can set a new property on that called class and the idea behind class is a named matching for some styling rules. It can be used for some other things, but they're mostly for styling rules. And in this way we can arbitrarily attach a class that's going to match formatting instructions. So let's call this class bordered image. So we want to set up a rule inside of our site CSS that says if an element has the class of bordered image let's go ahead and give it a border. Let's drop it in up here for no apparent reason, bordered image, and the way that the selector for classes works is it starts with a period and then the name of the class. In this case I'll say border solid 1 pixel and let's make it a fairly dark gray. Let's go ahead and give it a border radius 2 while we're at it. If we look at this in the browser, we can now see that it has a border because we've applied this border to the bordered image. Now we're not specifying that this class has to only be against the image, we've only it named it that. If we came down here into the index.html for the form and we applied the same class, even though it's called bordered image, probably a bad name in this case. We should now see that same border around the entire form. So you can think about this as ways to take simple UI decisions, like adding a border, centering, formatting, specifying a font, those sorts of things, as classes of elements. And in this case we're specifying that a class has a border and we can apply it to whichever element on the page makes sense to have those sets of attributes. It's all additive, so in the case of the form we still have a form rule here that added additional attributes. This class would be added to the specific properties for the element. So we will get a set of properties that is an and operation against all those properties. In this same way we can have a class, in our case we'll call it simple form, that applies to the form so that we can do the formatting for our form elements that are based on the forms class instead of its location inside of the main. So let's assume that in our style sheet instead of us wanting all the labels and sizes of the inputs and even the color of the submit button to be based on whether it was inside the main element we could do the same thing here with simple form. It's still based on that same formula, labels inside of the element that's labeled with the class simple form in the text input inside of simple form, the submit button is inside of simple forms, etc. So it works in the same way, we're just specifying that the container above these inputs and labels selects and text areas is going to have the class of simple form. And this is useful especially in forms when you have maybe two or three different styles of forms across your webpage. One thing that might not be super obvious, but I'll make it obvious here, is that a class can be multi-valued. In this case we have bordered image as a class as well as simple form as a class. This does not have to be a single valued property. It will take all the classes that it matches and include all of them in the styling for that element in this case the form. Because we've done this we can also add a simple form set of attributes for the form itself. So in this case let's go ahead and add a padding that is specific to the simple form, not specific to the bordered image class we used before. And we'll now see the form has a little space between it and the edge of the form itself. That padding says that all my children are going to be spaced a little bit inside of myself. I'm going to give myself in essence an inner margin if you want to think about that way. We will notice that the form here now has a mix, it has the border and rounded corners from the bordered image class as well as the padding from the simple form class. So you can really separate your individual rules based on the functionality they're going to provide to the rendering mechanism.
Sizing and the Box Model
So let's talk a little bit about sizing in CSS. We've introduced some different properties, like width and you can probably assume that there's also a height, padding, and margin, and border all make up some part of the sizing story. But I think it's important you understand the CSS box model so that as you're putting these together you understand where your actual height and width are coming from. It also starts with your content. Your content is inside of what is called the padding. The padding is inside the border. And the border is inside the margin. There's also a left, a right, a top, and a bottom that can also be specified to move it around the page and we'll show you some examples of that in a little bit. The height you specify is really the height of the content alone, not as it relates to adding the border, the padding, the margin, and then whether it's top, left, right, or bottom. The width is done the same way. It's for the content alone. There are two more properties, actual width and actual height, that can be read at runtime and we'll see how to do that a little later, but this represents the actual width and the actual height including the margin, the border, and the padding. So there is a disconnect between the way they handle height and width of the content and actual height and width, which are going to include these other elements. So if you need something to be exactly 200 wide you have to make sure that your width plus your padding plus your border and plus your margin are going to equal 200. By specifying the content of 200 and the padding of 5, the border of 1, and the margin of 5 you're going to end up with something that is 200 plus 5 plus 1 plus 5 or 211 wide for your actual width. Let's see this in practice. So if we go back to our simple form here, let's go ahead and add a width to it. Let's say a width of 300. We can now see that the width of the form is this wide, but the width of the content of the form is going to be 300 wide, but by adding the padding here and the border it's actually going to be 306 wide. The reason is we have a padding of 2 and a border of 1, so that's 300 plus 2 twice, once for the left and once for the right, and then the border of 1 twice, which is another 2, that makes 306 and so you're going to have to take all these different properties, margin, border, and padding into account when you're going to specify the size of an element. If it needs to be an exact size that can be an issue. And we'll come back to this exact size in just a minute. Now let's talk about a common approach of actually wrapping all these pieces so that they aren't the width of our page. You've probably noticed that most websites out there are actually centered on the page and let me show you how that works. If we come here into the HTML and I'm going to collapse these three sections so we can see them all on a page and I'm going to wrap these in a new div. We can now see that this div is now going to contain all three sections. Let's go ahead and give this div a class called container. Now let's create that container class rule. Container, like we've seen before, but in this case we're going to specify a standard width and I'm going to use 989 pixels. This is a pretty common width that works well on all monitor sizes. This really accounts for all of your content to be contained on a monitor, 1024 x 768 and then it's just centered in all monitors that are larger than that. When you're dealing with mobile sized browsers, this is a little different and if you view the Pluralsight course on mobile web development you'll see some techniques there for dealing with different screen sizes, but for now we're just going to go ahead and pick container as 989. So far in the course I've actually had our webpage zoomed in so we could see things a little better, but let's go back to 100% magnification and we can now see that the whole page is this size, but we'd like to be able to center it in some way and so there's a little trick here. We could say text align center, but that's actually not going to center the div, it's going to just center text. Instead we're going to use margin. Margin has another value we haven't talked about and that is auto. If you remember when I said that multi-valued margin and padding can both take one, two, or four values. In our case we don't want any margin on the top or the bottom so we give it a zero for the top and the bottom, but for the left and the right we're going to tell it to use a margin of auto. This is a special value that says make the margins the same, but in essence center them. So when we specify margin of zero in auto here, the container itself, and again the container can't be seen, it's just blank at this point, is going to center this. Remember the container is 989 wide and by pushing a margin of auto the two sides here get equal sized so it ends up looking centered. Now we're starting to look a little bit like a lot of sites you've seen that are using the same technique. Next, let's give the container a background color and in our case let's go ahead and pick dark gray. So when we say dark gray what we're actually getting is just the container itself is going to be a dark grya, and so all the elements here that don't have a specific background color, in that case our body here, are showing through. Of course the header and the footer, which we specified a color for, are going to show theirs on top of that light gray. Instead we're going to go ahead and specify a background of white because soon we're going to make the margins or outside of the container a different color instead. Lastly, we're going to add a padding here so that there's some space between our container and our other elements. So now let's go back to that body tag and add that color. Let's say blue just to add a little color to our lives. Now that when see this we'll see that there's blue everywhere, it's actually kind of a difficult blue. And let's go ahead and say dark green and here in the browser we can see it's that dark green that sort of matches the other greens that we're working with on our page, so it mostly works. But we do have this little space on the top that I don't care for. And so how do we tell it that this container should be against the edges? The reason this is the case is that the HTML and the body both have their own margin and padding that aren't zero by default. So we have to add that. We can do that with a combined tag to say HTML and body padding zero, margin zero and that will in essence reset it. So it's now up against the edges where possible. In fact, many cases the starting point for your CSS are going to be those resets for body HTML as well as maybe some other standard CSS that you use project on project. So let's talk about position next.
Positioning in CSS
So we've talked about sizing, let's talk about positioning in CSS. If we take a look at our CSS and let's go to that simple form that we have on the page, we can see that there is a property called position and by default this is static and static essentially says please draw me in the order of the hierarchy, top to bottom, outer to inner. So it's going to naturally flow the hierarchy onto the page. By changing this you can decide to position things in a couple of different ways. Let's change this to fixed. We can now see that the search form is here where we had it before, but it's not taking any height or width because we're telling it that we want it to be fixed on a page in a very specific position. And in this case it's still going to be drawn in the same place in the hierarchy, we're just telling it that it has to be in this exact place. Fix simply means fixed in this position, but still relative to the hierarchy. If we change this to absolute we're actually telling it we want absolute positioning on the page. Now this is something you should use very sparingly. Some of you may be listening to this and go, well I've done Windows development or I've done Mac development and I can absolutely position things exactly where I want them. This tends to break the web a little, but there are occasions where absolute positioning, like a floating piece over your website, can be pretty useful. And in these cases we need to specify top, left, right, or bottom to specify that. So if I say top equals 5 pixels and let's say left 5 pixels, this will be positioned exactly 5 from the left and 5 from the top of the entire window. In the same way if we did bottom and right we're going to get the same behavior, but for something that may float on the bottom right of the page. Again, using this sparingly is useful, but for things that you want to float over the page that don't flow with the page, this can be pretty useful. Of course, for us we don't need these so I'll just comment them out so that if you have access to the source code you can at least see what they were. Let's talk about how things are displayed or laid out on the page next.
Display in CSS
So let's talk about the display property now. Back in our HTML let's create a new element that's right after this form, a new div and let's call it results. This will be where the results of our search will ultimately end up. If we look at these in the browser this will, by default, put this below the element before it. It's not going to flow it to the right, it's going to flow it to the bottom and let's talk about why that is. In the case of forms and divs they're actually, by default, have a property called display of block. So in our case when we look at the different elements in HTML there are some elements that are block and some that are inline and some that are called inline block and there are a few other display properties, but those are the three that I want you to sort of focus on, block, inline, and inline block. So in our case what we'd like to do is take this whole section here and put it to the right so that our results are to the right of the search pane. We can do that with a little CSS. Now we've already made the width of the simple form a fixed size, so let's go ahead and it's not right next to it, but make sure it's nearby so we can look at both of them at the same time. And let's go ahead and add a padding of 2 and let's give it a width of let's say 600 for now. And over in the HTML I'm just going to give it a class just like we did our form of bordered image. Though, again, having the image on the back of this probably wasn't the greatest idea and we can always fix that later. So at this point it should look like this. We have our box, we have it 600 wide and 300 plus 600 should fit here, right? But because these are both block level elements they're defined as block and block means that they're going to top to bottom stacked unless we do something different. The way to do something different is actually to change its display and in our case we'll change it to inline so we you can see what the inline display looks like. Now because we used inline it attempted to make it as small as possible and didn't really solve it. It made each of the lines stil where they were and then dropped this new element next to it just to the left and that's because inline is more like the way we put inline pieces in text. That's what inline is for, for the way that we flow elements within let's say a textual representation. Much like this anchor tag here that we have is inline with the text, that is an inline displayed element by default, an anchor tag. Instead what we want is incline block. So we want it to act like a block, which means mostly adhering to its width, treating it like a rectangular element, but we still want them to be displayed inline if possible. By doing this, both the elements are put left to right and if we had three that all fit they would show, otherwise they would wrap onto an individual line. Let me show you that. If this was too long, let's say 700 because of course 700 plus 300 plus the associated padding and all that is greater than our 898 pixel width, it would just fall into the next line. So inline block is like the way that text works in that it'll allow line wrapping and such of elements. And so when you see something like the Netflix que where you have a bunch of little boxes that are all left to right and then they wrap onto next lines and next lines, those are most likely inline block elements. But of course our problem with just the ones that fit here is it isn't aligned correctly because by default there's also another property called vertical align. This aligns things vertically and by default these two elements are not aligned to their tops so we have to add that. So by aligning both elements to the top it now does what we want. Eventually this will have a lot more information and the search pane will always be at the top aligned with what the results are, those results may be fairly tall once we get into pulling actual data from Github. There's another way of putting things next to each other that flow in a different way. We'll talk about that next when we talk about float.
Float in CSS
So now let's talk about the float property in CSS. If we look at our page here, if you remember we have this navigation element that has three different links for the pages and what we might want to do is actually put these over here on the upper right hand corner of our page and we can do this with float. We'll introduce a couple of other pieces while we go at it, but the primary idea here is to investigate and understand float. If we look at the HTML for this we have a nav element that then has an unordered list and list items in it, which you probably remember from which we built it earlier. So let's start down here by creating a header nav rule and this way we can have a separate set of rules for the nav element that we might have in the footer later. We could do this if we wanted to format all the navs the same, but in our case I'm going to leave it as header navs so any nav element inside the header element. And I'm just going to say float right. Now float has a couple of valid values, right and left are the two that are most likely used. So let's go ahead and say right in this case. And we can now see that the elements are now floated to the right, the entire nav element is floated to the right, but of course now that it's being floated, it's no longer taking up space in our header. So one of the tricks here with float is to change the order of the elements. If we come here and take our nav element and put it before the others that way it starts at the top of the header value, it'll now take space over here on the right hand side, but we'd really like these to be displayed next to each other so that if we have three or four or five they'll just sort of sit on the right upper hand corner of the page, much like you'll see in a lot of pages. To accomplish this we'll need a new rule just for the LI or the list items. Now we could certainly have put in ul li to be very specific, but in our case we just want to permit all the list items in the same way. Much like we saw display being used before, let's use it again, but say that we want all of these items to be inline. So instead of them stacked block, which is the way that list items normally are listed, we're going to tell it to stack them next to each other. So now we're seeing them left to right, floated all the way to the right of the element, and so let's go and add a quick margin right of about 5 pixels just to keep it off the edge of the page. Now what's interesting about this is you haven't seen this syntax before and that is margin-right when you just want to override one of the margins or one of the paddings you can actually specify the cardinal location, in this case right, as an individual property. So here we're just going to push it a bit from the right and lastly we'll make it a bit smaller. And then this way we've used float to really decide where it's going to be on a page. One thing you'll notice is that the float is stacking things either on the left or the right hand side. So you have multiple things floated, they're going to stack in that order from left to right or right to left depending on whether you're using float right or left. But float doesn't account for space. Float isn't used to compute the size of the container, so you have to make sure that whatever you're floating is going to exist in that container and be correct. You may even have to size the container to be large enough to hold the content because the browsers themselves aren't going to resize the container for anything that is floated. The last thing we'll do is style the links. Now here these, even though the text is all black, are colored purple for visited pages and then blue for unvisited pages. That's because these anchor tags and even this one in Github are formatted special using their own rules. So if we come back up to the CSS, we can actually format these by saying anchor, which is the a tag and let's say color equals green to match our theme. If we refresh it we'll see that we now have green for all our anchor tags. Now that we've formatted them as green we've lost the ability to specify whether they've been visited or not, but most sites no longer worry about that, they'll just color the anchor tags to fit the theme of their project and then they may remove or add the underline where possible. You do want to have some indication that these are special and clickable. It may not be simply that it's an underline, it may be a bolding or an italic or as you hover over something it may change the look, all those are possible with CSS. But now we have a site that has been styled pretty much in the way we want. Let's next talk about how to debug these using some of the browser tools because there's going to be times when you think you've got the CSS right, but the browser just isn't displaying it correctly.
Debugging Styling in the Browser
So now let's debug styling inside the browser. If we come back to our page in Firefox in this case, we have a plugin installed called Firebug. All the browsers have their own built-in tooling. I like to use Firefox specifically because the Firebug tool I think is a little bit more powerful than the built-in tools on the other browsers, but if you want to get used to using the Chrome tools, using the IE tools, or using the Firefox tools, it's probably a good idea to get a little familiar with all of them. We're not going to cover all of them in this course, but they all work in a pretty similar way. In most cases when you hit F12 the console for the tools will show up, in this case these are the Firebug tools. When we're debugging CSS what we really want to look at is what the CSS is for certain elements. So in our case we can go to the HTML tab and as we open up the file that we're looking at and hover over elements you'll actually see them highlighted in the browser. These highlights are showing in blue the content size and then in yellow the margin size. You'll see that it's going to be different for different elements. Let's go down to the header section as well or the main section now. The main section you can actually see all three, the blue is the content, the purple is the padding, and then the yellow is those margins we had specified. By clicking on one and let's go ahead and click on our form class, we can see to the right what properties have been specified. So this is showing all the matching styles. The simple form style, the bordered image style, the main style, and then finally the body style. All of these are applied to this element in order to get it to look the way it does. What the tools allow us to do is actually to change this stuff and see what the result is. This isn't changing the underlying file, this is just changing the live view. So if we look at our form and we go to padding we can just put in another value like 15 pixels and we can see it change on the screen or let's say back to zero. We can also, anywhere there's numbers, use the arrow keys to just sort of go up and down so we can tweak these to get the look we want. The same is for non-numeric values, so if we look at let's say vertical align as we push the up or down arrow it's going to go through all of the valid values and change them in the browser. Now in the case vertical alignment doesn't change any of those values, but if we did it for display we can see this is what it looks like inline, flex, block, et cetera. And so we can kind of experiment and learn what the different values for these properties are. Once you've changed these values to the way you want you can actually right click and copy the entire rule and this is a good way to take a rule that you're modifying in the browser and go ahead and paste it back into your original source code. Another thing that this is important in seeing and that is the cascade rules. So I want to select an element on the page. I can actually use this inspector and the different tools call it something different, but this is where I can actually go and select with the mouse an individual element I want to look for. You can see it sort of highlights it as I hover over it and I'm going to go down to the li items inside of my menu and if I click on the li we can see that this header nav li is what we created in the last section, but because we specified the font size, the font size for the body has been checked out. That means that this more specific rule has overridden this rule and so we can actually see the cascading nature of CSS here in person. As you're testing these things out you can actually click on this hidden checkbox, it doesn't show up until you actually hover, in order to disable one of the rules. Now instead of having to delete them you can just disable them for a minute so you can see the difference between them and if you're having a problem with an individual style, being able to start disabling pieces to see which one was the one that was actually involved, it can help you sort of narrow down which one's the problem. And notice that when I disable the font size in list item that this one becomes unselected because this becomes the default value now because the body no longer is overridden so it really applies the entire set of rules to your CSS in live and this is really a live view of them. And so using the tools when you're trying to debug CSS I think is a great way to not only find and solve problems, but also learn how CSS really works. Because in most of the tools you're even going to get IntelliSense, so if I decide that I wanted to have border here as I type bo it would start to show border and as I type, even go down to some of the other properties. So it gives me a lot of flexibility about sort of running through and testing my CSS. I suggest you use the tools, again, whatever browser you use for development you can use their tools, but eventually you're going to probably need to learn the tools for each of the browsers because you may find that some of the problems you're having with CSS are browser specific, so being able to go into IE and finding out why something doesn't look right in IE, but looks fine in Chrome and Firefox or vice versa, means you're going to have to learn the tools for each of the browsers. They're very similar so it's not as big of a task as you might imagine. Let's wrap up this module.
So in wrapping up this module, we've learned that HTML itself is structural. You can create the look and feel of your app through the styling stack. You can define the UI, the formatting of each element, the formatting of the text, the look and feel of your application strictly through the styling of your app. Leaving HTML as structural as possible means that you're going to have that separation between what you're dealing with as the structure of your HTML and how it looks. By using CSS or cascading style sheets you're going to have a way to support the shared overridable styles for your webpages and really your entire website. Each of the rules in CSS has a set of properties that are applying to a certain set of elements. In this way those set of elements can be defined as a selector in the CSS to tell the browser how to draw your HTML. Understanding the nature of these CSS selectors is key to being able to style your site. So learning the different mechanics of id selectors, of class selectors, of element selectors, of relative selectors, are all going to benefit the CSS you're going to write. It's also pretty critical that you learn and understand the box model as we have described it in CSS so that you can really understand how the sizing and layout mechanics of CSS work with HTML. We've also seen that using the cascading model of having more specific selectors apply their rules to individual items on the page is how the cascading allows for this overridability. These rules for cascading aren't always intuitive, but certainly we've seen that using the browser tools we can see how that cascading is actually happening. Ultimately you will find times when you need to drop down and debug your styling using the browser tools. And aside from being able to debug these problems, it'll also be a very effective tool for learning CSS itself. This has been the styling your HTML module. My name is Shawn Wildermuth of Wilder Minds. Thanks for joining me.
Variables and Types
Objects and Arrays
Welcome to the using jQuery module of our quick start. In this module we'll discuss jQuery. I'll start out by explaining what jQuery is. We'll grab jQuery from the jQuery.com website, show you the basics of jQuery, talk about event handling in jQuery, using jQuery to query the document, to change the document, to perform networking tasks with jQuery, and finally we'll work with some forms with jQuery. Let's get started.
What Is jQuery?
Working With Events
Querying the Document
So now let's dig a little deeper into the way that querying using jQuery really works. If we go back and we look at our index.html you may remember we created this nav section and this nav section had a number of list items in it that contain the different elements of our menu. Over here in our code we can use jQuery again to look for those nav elements. Let's remind ourselves again that we used in CSS this header nav li to look for each of those elements inside of the menu. We did that to display them inline and change their font size. If we copy this CSS selector, this entire CSS selector, we can use it inside of jQuery. So jQuery can query anything that is described as a CSS selector. In fact jQuery adds some additional things that aren't allowed in CSS to simplify some of the code that you might write and we'll look at that in a minute. What this returns, what this jQuery function returns, is actually something called a wrapped set. Now we returned wrapped sets from all of these queries that we did earlier, but because they were against a single id it always returned a collection or a wrapped set of results that only had one member. In this case we know we're going to probably get three items here. An instinct as a developer might be to get the collection and then use for to walk through them. This is one of the amazing things about the way that jQuery works. All these same functions that we're used to, like text and HTML that I've show you already, when you execute them against the result of a jQuery, it'll execute them against all the results in the wrapped set. This only results in an effecting one because the wrapped set, because of this being an id query, always returns a single result. If we did the same thing here and say setting the text to the li items, we'll see that it changed them to all be the same item. So that executing a function on the wrapped set is going to do the same thing to each element of that wrapped set. Let's show you one that's a little bit more obvious. There's a function on the wrapped set called CSS that'll allow me to go ahead and set CSS arbitrarily. In this case I'll do font weight and I'll make them all bold. Now I know what you're saying to yourself, shouldn't I be doing this in CSS? Yes, you really should. But this will show you the power of what jQuery can accomplish imagining that you might need to set something as bold as the user interacts with the page. CSS is going to apply those rules when the page is loaded, but isn't going to necessarily know what to do with them when a user hovers or clicks or taps on something. So we can now see that all three of these are bold. The work involved to actually execute this query is nontrivial. It's pretty quick in the larger scheme, but if you have a very large HTML document this can be a little slow. So it's often a better idea if you're going to be doing multiple things, to go ahead and hold it. So let's call this list items and that will yield the same thing, but that means that if we decide to do something else, like set the font size, then this execution is going to be against that result set. It will first set the font weight for each of the items in the wrapped set of the list items and then do the same thing for the font size. But it's often the case where you might want to actually look into the result set for some more information to query against a query. Well certainly we could have changed this and created another query, like header nav li and use a jQuery specific extension to the CSS selector syntax and I'll give you an example of one first. And in this case it'll go ahead and find the first list item and set it to 18 points, but remember that by executing this entire list it can somewhat inefficient because if you have a large HTML document these queries aren't a trivial effort. We want to be able to save them as much as possible. And one way to do this is to reuse that wrapped set like we talked about. But instead of calling the CSS we can use a call called filter to allow us to then do another query against that wrapped set and in our case this will be a much more efficient way to go ahead and set the size of just the first item in our list items. So we looked at some other techniques for querying the DOM, so let's look at how to actually manipulate that DOM.
Modifying the Document
Networking With jQuery
Working With Forms
Shawn Wildermuth has been tinkering with computers and software since he
got a Vic-20 back in the early '80s. As a Microsoft MVP since 2002, he's
also involved with Microsoft as an ASP.NET...
Released22 Aug 2014