Transcripts
1. Introduction : Hey everybody. Welcome to CSS inaction. Today we're going to be looking at CSS or cascading style sheets and how they can be applied to content. They can sometimes seem like black magic, but we're going to go through and look at the basic rules that underlie CSS and make it easy for you to apply them to your content. Whether you're a developer or designer, whether you have experienced or not, this is a good class for you. We're going to cover the basics quickly to get everyone up to speed and we're going to move forward from there. I'll be providing everything you need for the class, in-links, resources and online workspace and if you do have experience, there's going to be files that you can download and work in the way you prefer. All the work we're doing today is going to be in CSS. I'll be providing you an HTML document, but you're not going to have to worry about editing it. We're all starting with the same content and ending up with something uniquely completely yours. By the midpoint of the project, we're all going to be working towards the same web page. It'll have polished, and styled and a great reference point to compare and ask questions of other students in the class to see what you might have done wrong. After that, I'm going to hand you a few more tools and then you're going to set out on your own. Use your imagination and see what you can do to this web page. It's amazing to see what with the exact same content, a little bit of CSS and creativity can create. I'm excited to see what you can do at the end of today's class.
2. How to Start the Project: We're going to use CodeSandbox.io to make today's project quick and easy to jump into. If you have enough development experience, then you prefer working in your own local environment, feel free to download the two provided files and edit them how you're most comfortable. Once the class is done, you can upload them to CodeSandbox or put them somewhere else entirely to share your progress. From here forward though, I will be assuming that you're following along with me. CodeSandbox lets us all start on the same page using the link provided for the starter project. As soon as you make an edit to any of those files, your project will get a brand new URL and become unique to you. We'll be using that fact to make it easy to share our project whenever you have questions or when you are ready to show your own final result. This is what your project should look like once you've followed our starter link. There are only a few files in the project, package.json, which we're going to ignore entirely for today, don't worry about it, index.html, which is where all of our content lives, and styles.css, which lives in the styles folder in case it's hidden. Now, we're going to be looking at the content of the HTML file shortly, but first, I want to remind everyone, we will not be editing anything in index.html. All of our work today is done in styles.css. Meaning that no matter how different, complex, or completely unique everyone's final project is, they're all based on literally the same content. Seeing just how varied your CSS presentation could make a page helps illustrate just how powerful what we're learning today is.
3. A Quick Look at Our Content: While we won't be changing anything in this HTML file, we are going to be referring to it, a lot. The CSS has lots of tools for styling content in ways both widespread and very precise. But they all rely on how your HTML content is actually written. Let's take a quick look at how our content is laid out, now, don't worry about memorizing all these details we are just going for a big picture understanding right now, I'll refresh specific details later for you as they become relevant. You can always refer back to the HTML file at your own pace. The content itself also contains hints and details we might not cover directly in these videos. Go ahead and read through as we're working along, It's important to remember that everything in HTML is nested. For example, here we open the Header element and here we close it. Everything in between is considered inside the Header, even if there's nothing visual on the page, to really tell you about that yet without looking at the code, properly indent HTML does give you hints about nesting by pushing nested elements of further and further in order to make it easy to judge at a glance, as you see here, keep in mind that elements can be nested multiple levels deep. Just below the header, we have a navigation element that holds a UL or Unordered list element, which contains a bunch of LI, List elements, each list item even has a link inside of them, even though they're not split on two separate lines and indented. To keep incredibly large HTML files from being pointlessly long. Many times, simple content, like a link inside a list item, is kept on a single line, as you see here.
4. CSS Toolbox: Elements, Classes, and IDs: There are three primary methods of applying CSS we'll be using today, elements, classes, and IDs. These three methods of writing CSS instructions can be used together to apply our styles with precision and logic once we understand how they work. But don't worry about adding any of the CSS I'm typing in this section, we're just going to erase it in a moment anyway. I'll let you know when we start writing code we'll want to keep. First, let's talk about elements. An element is the most generalized way to apply CSS to content. Just about any content on a HTML page can be considered a stylable element. Let's look at the first paragraph on the page under the R content header. The text is wrapped in a p tag for paragraph. This p tag is our element. If we were to write CSS to make all the paragraphs on the page bigger, we could use this general element to do so like this. Next, we have classes. What if we wanted to add some styles to just some of our paragraphs but not all of them? Classes are reusable names we can apply to our content piece by piece. They let us pick and choose more selectively than just targeting every element on the page. I've added classes throughout the HTML content, but let's see them in action. The first paragraph in each section has a class of first-para. We can use that to selectively turn those paragraphs, and only those paragraphs, red. Note, for CSS, we use a period before the class name to tell our file that it's specifically a class we're calling out. We didn't add anything extra to our element. Finally, we have IDs. Think of an ID like a class that you only get to use one time per page. Well, a class is useful because it's reusable and flexible and ID is all about being unique. You can be confident that any styles you apply to an ID will only ever apply to that exact content. We'll get into details later, but IDs are incredibly useful when you need to make sure a certain piece of content has a unique style, even if other class styles are in conflict. Whereas classes get a period to set them apart, IDs use a hash symbol, like this.
5. Big Picture Layout: Let's actually start styling our project now by looking at some of the broadest changes we can make. There should be one element already in your style sheet the only CSS I wrote for you before the class began. It selects the body element, which is an element that contains everything visible on the page and sets the font to be Arial,, with a fallback to any Sans Serif font if Arial is missing from your system for some reason. We'll begin by adding onto this element. For now add CSS alongside me, pausing the video as necessary as a way of learning and practicing your new coding skills. Once we reach a certain point in the class, I will let you know that the time has come to add your own creative touch and make the project completely yours. Until then, we're all working towards the same goal. By default, our browser adds a little bit of white space around our content, so it doesn't rub right up against the edges of the window. While that's helpful, we do want to write our own rules for how to lay out this content, let's remove the margin and padding from the body element like this. This isn't going to look great straightaway, but we're building towards something. Now there's some content scattered throughout the page that I felt deserved a little bit of emphasis, we can use the class name emphasis, which I've already added to those bits to do so. There are lots of ways to emphasize your content, but for now, let's make it bold, let's make it italic, and make it underlined, there, that should be harder to miss. We've also got some content that references actual code as examples to help you learn. The CSS is a little more complicated here and we are breaking it down more thoroughly in coming lessons. For now follow along and take notes on anything that doesn't make sense right away. We're going to add two classes, code and code comment. We want code to look like it's straight out of our code editor, so we're going to shape and color it to stand out. There we go, that looks a little more like our code editor to make it stand apart. Now code comments aren't functionally code but little tips or notes for me about what should be going inside your code outside the examples. To make sure we don't get confused, let's turn those green and make them easily separated visually.
6. Customizing the Header: Next, let's make our header look a little bit more like an actual header. In the last lesson, we applied some layout and colors to the elements in our content with a code and code comment class. Let's bring some color and layout details to our header as well. First, let's focus on the title of the page, the H1 element. HTML uses a series of header elements: H1, H2, H3, etc. So the content can contain many levels of importance for their headers. Usually you'll see a single H1 on a page though there's no mandatory restriction on that. H2 might be used to note a particular section of the content. Each of the larger sections on our page, like our content, is in H2. If they are further sections within that topic, you might use H3s and so on. Like the body tag, browsers usually have default spacing added to these headers that they fall back on if you don't write specific rules on your CSS. In this case, we're going to tell our H1 elements exactly how much margin we want it to have. We want to be centered, and we want to have a particular color. Now we want the smaller subtitle to match. It's not within the H1, but rather its own paragraph element. Let's target that element like we've done previously and picks some styles. We want a little larger so it's obviously part of the title visually. The unit I'm using here ems is one of relative size for typography elements. I'll be providing resources for additional depth to research this, but for now, just consider 1.2 em means 120 percent of the size that text would normally be. We'll also be setting the margin and the padding explicitly here to override the default paragraph spacing. Let's add some cool looking blue color, and let's add a border so that we can separate out the top from the bottom of the title. Now the header is looking pretty good, but I think our CSS had some unintended consequences down below.
7. Understanding the Fallout: What happened? We were able to lay out our header and title just how we wanted them, but the styles for the subtitle have carried through and been applied to every paragraph on the page. That makes our content hard to read and completely misses the point of having unique header styles in the first place. Believe it or not, this massive degree of broadly applied style is one of the biggest features of CSS, not a bug. That's why they're called cascading style sheets. As long as you know the rules, it's way easier to style a 1000 paragraphs on a page with this cascade than it would be to manually do each and every one. How do we contain that cascade? There's a few ways we'll consider over the duration of this course, but the simplest is with something called specificity. Other than being a great tongue twister to say five times fast, specificity is one of the greatest methods of writing CSS to behave exactly how you want it to work. Remember how we talked about nesting a few minutes ago? CSS is very aware of how your content is nested, and that's how we can use specificity to select only the nested elements we want. See how our h1 and paragraph tags are nested inside of our header tag? Here's how we reflect that in our CSS. Use a space between elements to target any h1 that's inside of a header element and any paragraph that's inside of a header element. We've only got one header element in our content. This CSS targets exactly what we want quickly and efficiently.
8. Deep Dive on Specificity: Before we move on, let's talk a little bit about specificity. Hands off the keyboard again, no need to add any of the CSS I'm showing you here. It's just going to be dummy code to explain what I'm talking about. We'll pick back up writing real CSS from the next section. We've seen two examples of how to write specificity, both restricting our styles to any H1 or any paragraph found inside any header element. Remember, if we had 10 different headers on this page, they'd all follow these new rules, but what other tools are available within specificity? First, what nesting level you start with is arbitrary. While we have header H1 here, it could also be written as HTML, body, header, H1. Everything in that content page is within the HTML and body tags, but we don't need to do that. It's largely the same effect for our current CSS. It is important to know though, that the more specific your CSS, the more importance is placed on it. For example, I can set the font size of our H1 above and then completely override it down here with more specific CSS and now, no matter how I changed the less specific rule, it doesn't matter. There aren't a lot of situations where specificity like this should be your go-to tool for resolving style conflicts, but it can be a great place to start looking for unintended bugs. Next, let's look at how classes and IDs fit into this picture. I introduced them in the order of element, then class, then ID, for a reason. If you write a style for a paragraph element, then a different style for our class on that paragraph element, the class wins in importance. Further, any style attached to an ID wins out over both element and class. See here, you can use a combination of elements, classes and IDs when you build a unique specificity order, like we see up here. We aren't going to be opening that worms today though, there are multiple methodologies for what writing good CSS looks like, but today we're just keeping it simple. If you want to play around with complicated specificity as part of your customizations, just remember this, individual elements are less important and classes which are less important than IDs. The more specific your CSS allows something like this, the vastly more important it's considered. Adding more specificity to a style if something is confusing or conflicted, is the nuclear option, should not abuse it. Finally, a note on something that looks like specificity, but isn't. Using a comma like this, is not targeting an H3 inside an H2 inside an H1. Commas make this a list, telling CSS that all the rules written should apply to everything in that list. It's a quick hand way instead of writing H1, H2, H3, it saves you time and space and you can apply uniform code this way. Now, we're barely scratching the surface of all the nuances in specificity, so make sure to ask questions and look through the extra materials provided with the course to get a better understanding of this very important topic going forward.
9. Working with Lists and the Navigation: Armed with a new understanding of specificity, let's press forward in styling our page navigation. Lists are very common and very powerful way of structuring navigation for webpages and resources. That being said, they come with even more default browser styles than most elements. We need to make sure to undo that for our own purposes. Like before, we're going to start with a bigger containing element and work our way down into nested specificity. We're about to talk about what this display block style actually means in the next section, but it helps set the stage for our lists right now. Hang tight for just a little bit longer on that one. We'll get to it, I promise. We want this navigation to be wide but not quite touching the edges of the browser like it is now. We'll be setting the width to 98 percent and then use margins support in the center like this. Specifically, we just told the browser that our nav element should have zero margin at the top, automatic margin on both sides, and 40 pixels of margin at the bottom. Finally, just in case, we do need to explicitly say that we don't want any padding. The basic styles for the unordered list itself are pretty simple. The last style we just wrote for this element says that we don't want bullets, or circles, or other list-style icons applied to our list items. We'll handle that layout ourselves. Thank you very much. Finally, we're going to add a number of styles to the links themselves within the list. This is where the navigation will start to change from a list to a proper website layout.
10. Layouts and Changing Display Formats: As we move out of the realm of plain text, bullet points, and other typographic details, we need to look at another aspect of CSS, content layout and display formats. There are a couple of major types of display values that we use regularly. If we look back at our already written CSS, we even have the first two. In our navigation menu, we set the links to display value called block. Without any other explicit styles, that means those elements now naturally start on the wrote new lines and take up as much width as they can on that line. We'll start to restrict that soon with more styles, but an element with its display set of block is very common for many modern layouts. In the code class, we use to display value called inline-block. This display is similar to block and how we can add margins and pattern to it along with a background color. It differs though, by not naturally starting the elements on a whole new line at max width. It's great for adding styles and custom layouts partway through content without breaking the text line or the complex layout features, exactly where we used it when we did for our code snippets. There are many additional display values that you can manually set, including table, list item, and more. Many of these are the default value with their respective element, so you don't need to worry about using the manual very often. It can be good to be familiar with them though just in case. In the next lesson, we'll be looking at two of the newest display options and how their powerfully changing the game when it comes to CSS layout.
11. Floats vs. Flex (and Grid!): To understand the powerful new tools available to us in CSS, it's important to know what's been in use up till now. In the dark ages of CSS, absolutely everything was in tables. Imagine visiting your favorite modern website and then attempting to rebuild it in an Excel spreadsheet. Not a happy thought. Well, tables still have their place for tabular data, information. They should not be used to structure the overall layout of a page. To put that terrible time behind us, we started using something called floats. The intended use for a float value in CSS was to do simple layout, like having a large paragraph wrap around the side of a related image. Think like a textbook, for better or worse though, they're capable of doing way more than that. Let's see what happens when we add float left to our navigation links. For a single line of CSS, that's not bad. They look a lot more like buttons and they fit into a row. The main problem with floats is that because they weren't intended for structural layout planning, there are a lot of catches and gotchas that you've got to cover every time you use them. Watch what happens when we resize our window just a little bit. Rather than cover how to handle all the little details for using floats in a semi on official way, we're going to move on and look at one of the newer tools available to us for now. If you continue to pursue learning in CSS though, it might someday have to work on maintaining someone else's code. Learning the ins and outs of floats will be important. They're still in widespread use in major projects across the internet. Taking time to get familiar with the extra course materials will serve you well. Now let's talk about flexbox. This display value was one of the most powerful to be added to CSS in some time, and is the first step in a new era of design and layout methods. Here's how it works. You declare display flex on the parent of the nested items you want to lay out, like this. It looks like our floats. But our content maintained at spacing much better, and watch what happens when we shrink the window now? [inaudible]. That's much better. Even more importantly, flex gives us access to some very important layout tools. For our navigation, we're going to set the item alignment, which is top to bottom centering, and item justification, which is left to right centering. We're using space between for our justification, which is a deceptively powerful value. It takes the first and last link and puts them at the very start and very end of the space respectively. It then calculates the remaining blank space and evenly places it between all the remaining items in between. Attempting to recreate that via floats would be complicated and probably pretty fragile code to maintain. There are a lot more values for flexbox that I encourage you to research soon within the courses' extra materials. We'll be covering a few more advanced uses right at the end of the class. But a fundamental understanding is invaluable to a modern designer and developer.
12. The Power of CSS: We've covered a lot today. Good job hanging in there till now. Using what we've learned, there's surprisingly little work left to do to make the vast majority of content still on page fall into place. We'll be using elements in classes to quickly apply wide-reaching styles across our page. If we look at index.html, most of our content is wrapped up in sections and articles, so let's start by styling those. Most of the CSS should look pretty familiar. We're setting a display value of block, a width of 90 percent to make sure our sections aren't completely across the page, and we've got margin set up including auto on both sides, so they'll float in the center of the page instead of being on the left or the right. All articles are looking pretty good, lets go ahead and handle the content within them. What if we were to set apart those first paragraphs in every article so it really looks a unique compared to the rest of our content? There we go, an initial section for each content article. Now, we can quickly sort out the various headers as well. Rather than just leave them as plain text though, let's have a little bit of fun and really stylize them. We're going to go for a folder tab sort of appearance so it's obvious at a quick glance which titles are connected to which contents sections. There we go, that's looking better. Let's give the h3 sub-headers little bit of attention too. We've got one last thing that needs to be stopped at. That second bit of text at the top of the page, if we check index.html, it's not actually part of a paragraph tag, its under span. No wonder our styles weren't being applied. I have put an ID on there though, so let's touch it up using that. There we go, that looks better. While I won't be using them for this class, make sure to note that each and every content section does have a unique ID associated to it. Use that as a specificity tool while you're working in your own customizations, and you can make each and every section look entirely different.
13. Pseudo-Classes: We're getting close to the end. There's one more powerful set of tools. I want to show an action though, Pseudo Classes. There are enough pseudo classes and amazing tricks to fill two or three whole courses. But let's cover the basics. A pseudo-class is used to define the state of an element. There are two pseudo-classes we'll be looking at today to help clarify that definition. The first is hover. We're going to use the hover pseudo-class to tell our navigation links to change their styles when they detect the user's mouse hovering over them. That means the links default state is unhovered. When then changes to hover, we want to make some changes to the styles. The CSS itself is pretty simple. All we're doing is swapping the background color, order and font color and we end up with a pretty cool button that interacts directly with the user. The pseudo class is just, colon and then the type of pseudo-class, In this case hover. Now, the second pseudo class is a little less exciting, but it's very important for presentation. This pseudo-class is called visited. A web browser keeps track of which links you visited before. By default, unvisited links are a bright blue while visited ones are purple. To make sure our blue buttons don't suddenly have an eye crossing shade of purple text, when our user starts clicking around, we use visited, like this to ensuring the text stays white. There we go. Now, when you're reinforcing a rule like this with a pseudo-class, where links are already white by default, there's an even faster way to do it. Instead of writing the rule fresh, just add it with a comma. Like this. Make sure to take an extra look at the class resources and see what other pseudo-classes you can track down to really take your project to the next level of customization.
14. Fancy Flexbox: To help you think of some creative additions to your take on this project, I've put together a demo, some fun customizations on my own. To keep things simple, you should add your custom CSS to the bottom of the styles.css file we've been working in once you're ready to begin coding. For your reference though, I've added all of my new styles to custom.css. Don't worry too much about the mechanics of adding another CSS sheet. Just know that everything I've written in custom.css is made to over ride the styles we built up together in styles.css. That makes it easy for you to check, and see what the difference are that actually transformed my custom version. Take a good look through the content, and see what I've changed, the layout of the header, the animated navigation tabs, and so much more. See if you can pick out at least one change, and then track down how I did it in custom.css. One major thing I want to show you is how I completely re-ordered the content on the page. The first thing we see in my custom version is additional resources, which is the very last content in a shared project, so how would I do that without actually changing the HTML? With the power of flexbox. First, I set the whole body to display flex, which lets me greatly control how all of the individual sections are laid out. Also important to note, I added a flex wrap property with value wrap. By default, flexbox would want to keep everything on one row, and make this page have a huge horizontal scroll bar. Flex wrap just hills our content that we do indeed wanted to wrap, and stay on the page. Then I used unique IDs on each section to give it a background color, and an order value. Any elements nested inside a flexbox, like these sections in the flexbox body can be reorganized using this order value. As you can see, I've mixed and matched the content in a new order entirely through CSS. I highly encourage looking further into flexbox before you start your own custom work. If you really want to make a splash, the extra credit homework is checking out something called CSS grid. Ignore any articles arguing about flex versus grid. Flex handles content that goes in one row. Although that row may wrap around like we're doing here. Grid opens the door to complex layouts with multiple rows, and positions but is usually overkill for simple content like we're doing. Don't get sucked into the trap of thinking it's either or. When understanding how to use each together is the best route forward. The CSS grid class by Rachel Andrews here on skill share is a great place to start.
15. Your Turn and Conclusion: There's so much more to learn about all the tools CSS has to offer, but you're now equipped with a fundamental understanding of the rules. It's time to look through the course materials, for reference guides, design ideas and more, to help empower your own creative designs. If you really liked working on CSS and you're interested in diving into more real-world applications and ideas, there are lots of places to start. Two important fundamentals I can suggest researching, are accessibility and responsive design. Accessibility is all about making sure that none of your fun and engaging designs accidentally make it more difficult for users to actually enjoy your content, while responsive design or mobile responsive design, is how to plan and implement designs to look good everywhere, from a phone up through a giant monitor or TV. Remember, if your project ever get so tied in knots that it seems unrecoverable, you can always go back to the links provided and start a fresh copy of the project. There's links for both as a very first starting place with no CSS, as well as the version we all wrote together. Don't be afraid to dive in deep and learn by breaking things. Being able to see your code in action and share the project, means you can ask for help from me or any of the other students. Once you're happy with how your project looks, make sure to show it off. I'm looking forward to seeing what each and every one of you can do with the lessons we covered today.
Chris Landtiser, Front-End Specialist
