7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 1.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Styling Components and Elements

Now that we understand what components and elements are in the RSCSS system, in this lesson, we’re going to see how we might go about styling them. Grab the starting pen and follow along as we do just that.

Related Links

2.2 Styling Components and Elements

Hello and welcome back. Now that we understand what components and elements are as far as RS CSS is concerned, I wanna take a look at how we would go about styling components and elements. So we'll be using CodePen to enter in all of our HTML and CSS in this course and in this sample CodePen, you'll see a sample of the page that we're gonna be building. And hopefully, after the last lesson, you're able to look at some pieces of this UI and point out where you see certain components and elements. And we have one component that's repeated over and over again on this page in different ways and it's this component that we're going to spend a lot of our time on in this course and that component is this card right here. So all of these cards have something in common and that's one thing you want to look for when you're trying to set up your structure for your CSS, you want to find what your components have in common. So all of these components here, all of these cards have an image at the top and some text at the bottom. In this section at the bottom, this footer has a different background color. And if we scroll down, you can see that even this large feature image here uses that same setup. We have an image at the top, and some text in the footer and then at the very bottom, we have just another variation of that. So we're gonna start in this lesson with the simplified version of this first card in the upper left hand corner and we're gonna try to make it modular so that it's easy to apply this across the board to all of the other components that are gonna be using this same setup. So I'm gonna jump over to a new tab where we have just the HTML setup, and then just some basic resets for the body of our document and we have a basic div which contains all of our content and then we have a image and an h3 inside that div. So it's a very very simple setup and I want to talk about how we would approach this setup using the RS CSS system. Well as you may have guessed here, what we have is a component with two elements inside it. So our component is our containing div, and our elements are gonna be our image, and our h3. So when it comes to naming our components, we're going to give them class names, not ID names, because they need to be reusable and those class names for our components are going to have at least two words in them, and they're gonna be separated by a hyphen. So if we go back to our other example, our previous example, we have these cards up here at the top, but we don't wanna just give a class name of card. We're gonna save our one word class names for the elements inside our components. So we want something with at least two words, another class name we don't want is something like product card. We wanna keep our component names fairly generic. We don't wanna get too specific with them because we might use them for different things. For example, the three cards up here at the top are all showing products, but when we scroll down to the second section, it's really just an image with some text below it. So instead of something like product card, we might use something more generic like feature card, and that's what we're gonna be using in this particular example. So we have our starting pen here on CodePen and you can find the URL for this starting pen in the course notes for this lesson. Once you open that up, go ahead and click on Fork because we're gonna make some changes to it and I want you to have your own copy that you can make changes to. So remember, our component is this entire card, this div and we're gonna give it a class of feature-card. And again, this is the typical naming convention for RS CSS components. You're gonna have at least two words and those words are going to be separated by a hyphen. And then for our elements inside that component, we have our image under h3 and we generally want to avoid using element selectors, so we don't wanna point to the img tag inside our feature card or or our h3 tag inside a feature card. Instead, we wanna give each of our elements class name as well and so far our elements, the naming convention is gonna be a little bit simpler. It's going to be a one word name, so it's not gonna have any hyphens in it. So for our image, we're gonna give it a class name and I'm just gonna call this image. Now, if you for some reason, really can't think of one word to use for your class name here, then you would put two words in here. And let's say we wanted to call it Image, I don't know what the second word is, we'll just say Imageword. You'll notice that we're not going to use any hyphens for the class names for our elements, we're gonna save that for our components. This way when we're looking at our CSS, we can very easily tell what we're looking at. We can tell just by scanning our CSS files, which items are components, which items are elements as well as which items are variants and helpers, but we'll get to those later on. Now I don't need two words for this, so I'm gonna get rid of the second word here, we're just gonna call it Image and then for our h3 at the bottom, we're also gonna give it a class name and we're simply gonna call this one description. And that's really all we need for this particular component as far as the HTML is concerned. In our CSS, you can already guess how we're going to be styling this. It's very, very straightforward. We're not learning any new earth shattering techniques for styling our items, we're simply learning a new way to structure those styles. So we would start off with our feature cards. So feature-card and then we can add some basic styles for our feature cards, so maybe we want it to have a white background, and you'll notice that our body has a light grey background. And for now, we're gonna change this later on, but for now, I'm going to go ahead and give this a width and let's say we want it to be about 200 pixels wide. And for now also, this is something we're going to change later on, I'm also going to put some margin on it, just to center it on the page so that it will look a little bit better as we're styling it. Then once we've got the main component style, we can jump into that component and style the elements inside it. So again, I'm using SASS as my CSS pre-processor and so I can nest these elements here inside the feature card element or the feature card component so we can just jump down to the next line and style the image inside our feature cards. Now first let me show you the wrong way to do it. The wrong way to do it is to simply enter in our styles for our image. So maybe we want it to be display of block and we want to make sure that our images are centered just in case they're not as wide as the containing element. So we're gonna set its margin to zero auto as well. Now for the most part, this setup will work. But first, we need to make sure we get our punctuation right. I need to put a semicolon after the word block there, and that should take care of that. So we styled our image, and it works fine, but this is not the preferred way to do it. The preferred way to do it is to use the child selector, the greater than sign. So that way, if our designs get a little more complex, we don't accidentally have any styles leaking through to other elements that we might not want them to touch. So here we're saying we want the image that is a direct descendant, a child of the feature card component. And if you are not using SASS, then obviously you can't nest it like this. Instead you would just create your feature card rule which would just have these three items here and then afterwards, you would have your feature card, and then your child selector, and then your image tag, and then you would use all the rules that we discussed here for that image tag. So [SOUND] let's get rid of that and then let's address our other child element of our component which is our text and we gave this a class name of Description. So again, we're gonna use our child selector there and then .description. And then for our description, I wanna give it a different background color. We're gonna give it a value of f9f9f9, just a different shade of gray. We're gonna give it ten pixels of padding, and I want to align the text in the center. And then I'll also want to change the color of that text, and we're gonna give it a value of 777, just kind of a medium gray color, and there we go. So again, we're not doing anything revolutionary in our styles here, we're just using basic CSS. The only difference is, we are now constructing them and structuring these styles in a consistent way so that every time we look up and see a class that has two words separated by a hyphen, we know that we're looking at a component. Any time we look at a class that has one word or maybe two words that don't have a hyphen in it, then we know we're looking at an element within a component. So those are the basics of how you would break down a component in your user interface and style it using the RS CSS system. Thank you for watching and I'll see you in the next lesson.

Back to the top