Borders define the outside edge of elements and backgrounds fill the space behind elements. The author shows you shorthand syntax for both.
- [Instructor] In this movie, I'd like to talk with you about borders and backgrounds. And we'll start with borders. Borders define the outside edge of elements. Element borders are usually defined by three properties, style, width, and color. Similar to margins and paddings, borders can be defined from the top, right, bottom, and left sides individually. Or defined for the entire element and the shorthand notation. A border syntax can get really wordy if you're specifying the style, width, and color individually.
That's why I recommend going with a shorthand notation. This lets you set all three border properties at the same time for each individual side. Now, if all four sides are gonna be the same, you can actually condense this shorthand further and just simply say border and then, give it the properties that you want. One important thing to remember about borders, and that's that they do effect the overall width of an element. Border widths begin at the edge of padding widths and then extend outwards. So, in this instance, we've got an element that's 200 pixels wide, it's got 20 pixels of padding on either side, and one pixel of border on either side.
So, that's how you would calculate the total width of this element. Now, let's talk a little bit about border styles and border colors. Border styles can be set in one of 10 values. There's none and hidden, which are very similar. Except when tables come into play. And then there's solid, dotted, dashed, double, groove, ridge, inset, and outset. Solid, dotted, and dashed styles create a single, flat line. And it's either solid, broken into dots, or broken into dashes. These remaining values create a dimensional line effect that often requires a width value of more than one.
And as for that border color property, this allows you to define a specific color for your border that's independent of an element's foreground or background color. Now, before we move on, I do want to take a moment to discuss the difference between a border and an outline. You'll probably see a border used a lot more frequently. But outlines play an important part too. The outline property in CSS, draws a line around the outside of an element. And it's similar to a border, except that it always goes around all sides, so you can't specify particular sides.
It's not a part of the box model, so it will not affect the position of the element or nearby elements. And it's often used for accessibility reasons, to emphasize a link or form field for keyboard users that are tabbing through a screen. The outline doesn't affect the positioning in the way a border would. So, with that, let's talk about backgrounds. The background property, let's us add visual sophistication and style to even the most basic content. Let me show you an example. Using Firefox's built in Page Style view, I'm gonna go ahead and turn off the style sheets for this website.
Whoa, what a difference. So, here, we've got the same content. But it's worlds apart, in terms of look and feel. Now, of course, there's a lot more going on here than just a background property. But all the images, accents, and defined regions are made possible by using backgrounds. Let's take a look at a few things that the background property can do. First, let's focus on exactly how the background of an element is defined. You'll often hear the background property referred to in discussions of the box model. And it's not really a part of the box model itself.
That's because the area for the background extends all the way to an element's edge. So, if you were to find a solid color for an element's background, it would extend, not only to the edges, the element's content width and height, but to the edges of the padding for that element as well. So, as the name suggests, backgrounds display behind an element's content. Allowing you to create really nice visual effects with a single element. The default style for most elements is to have a transparent background. Meaning, you can see through them.
By explicitly setting the background property, you can choose to display solid colors, gradients, or even images, behind an element's contents. This can allow you to transform an invisible div, section, a side, or article into a visually defined space or give individual paragraphs or headings added definition. When specifying a background imagine, you can control its position. Whether it repeats along an axis, the background imagine size, and whether or not the background image should be clipped within the background area.
I should point out, as well, that it's entirely possible for an element to have both a background color and a background image. Background colors are layered underneath background images and allow you to combine the two for cool visual effects. So, how are backgrounds typically used in web designs? Well, solid background colors allow you to add visual definition to elements and help draw attention to important sections of content. And that's using a background image as a header or logo. So, if I used Firefox's built in Inspect Element tool, I can see the HTML markup on the left here and the CSS styles in the right panel.
Now, looking here, I can see that they're using CSS to display this background image. But if I look over here in the HTML, there's actually some bit of text. But that text, WordPress.org, is not displaying. And that's because they're hiding it with this text indent property, so it's offscreen. Now, why are they doing that? Well, this is for search engines and accessibility sake. You want the text to remain. So, in this case, you can move the text off the page visually and then use a background image to display the logo in its place.
This lets screen readers, search engines, and other bots still see the headings, or in this case, the site title. While people that are looking at the visual design, see the headings or site title or logo in the way that you wanted them to display. There's a lot of other things you can do with the background property. It's a really powerful way to add a lot of visual impact with just a little bit of code.
- What is CSS?
- Understanding how CSS works with HTML
- Applying fonts
- Understanding the classic box model
- Setting margins and padding
- Positioning elements
- Basic CSS layout concepts
- Media types and media queries
- Working with CSS frameworks and CSS grids
- Creating responsive layouts
- Tools that help you write and maintain CSS