KODE WITH KLOSSY

Welcome to Intermediate CSS!

 
KEY POINT

Let's write down the learning goals and technical vocabulary for today's lesson!

🎯 LEARNING GOALS

Understand the difference between inline and block elements

Use margin and padding to achieve ideal breathing room around elements

Control the layout of a page using height, width, and an understanding of the box model

📗 TECHNICAL VOCABULARY

Block

Box Model

CSS Property

Inline

Margin

Padding

💪 WARM-UP

  1. Journal: What is your favorite thing about CSS so far?
     

  2. In the last HTML lesson, we talked about the difference between inline and block elements. With CSS, we have the power to override an elements default state of inline or block by using the display property.

Here’s an example:

button {
  display: block;

}


{
display
: inline;
}

KAY_Short_002_shot_090_480p_T.gif

Fork this repl.it. One by one, copy and paste the two CSS rules above into your CSS file in repl.it. What happens when you paste in the rule for the buttons? For the paragraphs?
 

In this CSS lesson, we’ll go a step further with layout design. Understanding the difference between block and inline elements, and being able to change them, allows us to control the layout of a page a little more.

 

CSS Box Model 👉

CSS Box Model


When you hover over elements in the browser when you are in inspect mode, you may have noticed that there are flashes of blue, green, orange, and sometimes yellow. Chrome didn’t just put different colors in there for fun; each color has a meaning. Up until now, we haven’t used CSS to create space or “breathing room” between elements. Let’s look at Michelle Obama’s Twitter account for some examples:




Each element is a rectangular box


CSS leverages the box model to control layout and design. An HTML element is made up of its content and the padding, border, and margins surrounding it. The image below helps us visualize each piece (and the colors match those in the Chrome Dev Tools!). Padding creates space between the content and the border. Margin creates space outside the border, between other elements. The image below shows these coming together, including the color-coding that the Chrome dev tools use:





👩‍💻 Try-It: Box Model

Go to your favorite site and open the Chrome Dev Tools. Click the inspect arrow, and hover over elements on the page. Where do you see margin and padding being used?

Not sure which favorite site to choose from? Codecademy has some great examples!

 

Padding👇

Padding creates space between the content and the border. Most elements don’t have any by default, so a lot of the time, our content can look squished. padding is a CSS property we can use to add what we call “breathing room” between a piece of content and its border.

Thinking back to Twitter, the following CSS rule is on each of the 4 a elements on that “Tweets/Tweets & Replies/Media/Likes” section:
.r-1oqcu8e {
     padding-bottom: 15px;
     padding-left: 15px;
     padding-right: 15px;
     padding-top: 15px;
}

We can also see this by using the dev tools to inspect. The part highlighted in blue is the content, and the part highlighted in green is space created by the padding rules.

padding.png

There are several ways we can tell CSS that we want to add padding. In the rule above that Twitter used, they wrote out a declaration for each side of the element. They could have written this rule and had the exact same outcome:
.r-1oqcu8e {
     padding: 15px;

}

When you don’t specify which side of the element you want padding on, all four sides will get that amount of padding.

If you want different sides of the element to have different amounts of padding, you should use padding-rightpadding-top, etc. Here’s an example:

.r-1oqcu8e {
     padding-bottom: 10px;
     padding-left: 30px;
     padding-right: 30px;
     padding-top: 0px;
}


In the code snippet above, the element would have 10px of padding on the bottom and no padding on the top. Both sides - right and left - would have 30px of padding.

👩‍💻 Try-It: Padding

Fork this repl.it. Read through the HTML and CSS provided to make sure you understand what you're starting with.

Work to re-create the image below using the HTML and CSS provided as a starter kit. The colors used were deeppinkdarkviolet, and deepskyblue.

padding-try-it.png
 

Margin 👉

Similar to paddingmargin is a CSS property that helps us control the spacing of elements.

The difference between the two is, margin creates space outside the border, between other elements, whereas padding is within the border. Twitter uses margin to create some space around the content and the edges of the screen (notice the orange parts):

👩‍💻 Try-It: Margin

Fork this repl.it. Read through the HTML and CSS provided to make sure you understand what you're starting with.

Work to re-create the image below using the HTML and CSS provided as a starter kit. You'll need both margin and padding!

margin-try-it.png
 

Default Browser Behavior & Sizing Images👇

👩‍💻 Try-It: Sizing Images

Fork this repl.it. Find 3 photos from Pexels and create image tags for each of them in the new repl.it project. Get a mix of images that are vertical and horizontal.

Style the photos so they appear to be the same size, and make sure they aren't squished!

Putting It All Together 👉

In this final section, you’ll use your new knowledge about the box model and image sizing to start re-creating a Twitter profile card!

💪 Practice: Intermediate CSS

Card is a word that is commonly used in front-end development. When we refer to a card, we usually mean a div or another similar element that is used to contain information. The profile information on Twitter could be called a card.
 

We are going to begin recreating a Twitter profile card. There are many ways this can be achieved - you may see that you and your partner's outcome looks the same, but code looks very different! That's ok! As you get more practice, you will find which methods you prefer.
 

Fork this repl.it. Remember, a lot of code is provided in the initial HTML file, so you may want to first delete what you don't need. Then, work towards replicating the image below. Feel free to use any images and text you'd like!

recreate-twitter-card.png

*Hint: You can also use percentages as units for the width of an image.

Click here for Medium Practice


Add a blue checkmark next to the user's name. You can find a lot of icons at Flat Icon. Make sure the icon is about the correct size, and right next to the name. You can reference Michelle Obama's profile at the top of this lesson for what this should look like. Follow the same workflow to include an icon just as you would an image (right click and copy image address).




Click here for Spicy Practice


Add another image to your Twitter profile. This image should be round, and part of it should lay over the background image. You can reference Michelle Obama's profile at the top of this lesson for what this should look like.