FAQ: The Box Model - Borders

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises

This community-built FAQ covers the “Borders” exercise from the lesson “The Box Model”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Borders

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

i dont understand the pixels

3

What about pixels do you not understand?

Pixels are a unit of measurement in CSS, just like inches or centimeters would be to us. A pixel on a user’s screen is one tiny dot of light. If you are setting a border to be a certain amount of pixels (px) wide, you are telling it to have a width that fills that many “pixels” on the user’s screen.

4

Does it matter the order of the properties in the border rule? :shaka:

5

If you put all the properties separately, it doesn’t matter:

border-width: 12px;
border-color: #000;
border-style: solid;

If you combine them into one border property, the order does matter. It must be width, then style, then color:

border: 1px dotted blue;
1 Like
6

I put them in a different order and it still translated correctly - style, color, width

7

So, I’m trying to post a question separate to the pixel question already asked here. I’m not sure if I’m using this correctly. I could not find where to post a new topic about this exercise. If I’m doing this wrong please let me know!

Anyhow, in the ‘Border’ CSS exercise, 4/16 of the Box Model here, an H2 is used for text that is quoting the page’s own paragraphs. Wouldn’t an aside be more semantically appropriate here? An H2 on this page would seem more apt for a sub-heading rather than a quote. Am I wrong?

8

A lot of the HTML in these CSS lessons is not semantically correct/optimized. I’m not sure, but I think the course was not completely updated when the more semantic tags with HTML5 were released.

Although, the <blockquote> tag would seem, to me, to be more semantically appropriate.

1 Like
9

Should I list border specifications in this particular order, width , style , and color?

10

Yes, the order of specifying border properties in CSS follows a specific convention, and it should be in the order of width, style, and color. The shorthand property for border, as well as the individual properties, adheres to this order:

.element {
  border: 2px solid #000; /* width style color */
}
11

I have a general question regarding pixels.

How do I know how many pixels I need to use to make it look good? Is it just trial and error until you get a feeling for it? It doesn’t matter whether it’s pixel or cm…I just don’t know what would look good.

12

Determining the appropriate size for elements on a webpage (or any design project) can indeed be a combination of trial and error, experience, and sometimes adherence to design principles. Here are some factors to consider when deciding on pixel sizes:

  1. Screen Resolution: Take into account the resolution of the devices your audience will be using. Higher resolution screens may require larger sizes for elements to maintain clarity and readability.
  2. Typography: The size of text should be comfortable to read. For body text, a size between 16px and 18px is commonly used, but this can vary based on font choice and design aesthetics. Headings and other important text may be larger.
  3. Whitespace: Allow enough space around elements to prevent crowding and improve readability. Margins and padding can help create visual breathing room.