Today we'll practice using some common CSS properties to style the elements on a page. We'll also discuss what you need to consider when styling those elements (like whether they are inline or block-level elements). We will add color to text and backgrounds, borders, shadows, and background images using CSS variables. We'll also talk about how you can use floats (then we'll learn how to better control layout using CSS flexbox and grid in Module 5).
The CSS Box Model
A screenshot taken from your zyBook is shown below. It is marked up to show how the CSS box model works with content, code, padding, and margin (border would normally be included between the padding and the margin of the element). Open the dev tools in your browser to see the box model on your page as we add styles.
Practice With the Box Model
Follow along as we add styles to the elements below to see the box model in action.
This is link #1This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is link #2This is another paragraph. It is wrapped in a div so that you can see how the margin and padding change where it is located inside of its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Using Width & Height to Size Elements
You can also use the width and height properties to control the size of an element with CSS, but these settings are mostly used for things like images and other decorative elements, to define a height for a container with elements floating in it, or to allow for centering an element on the page (before you can center anything with margin, it has to have a width set first).
Margin Collapse & Centering Elements
When two elements that are next to each other have margin set on them both, that margin that you might expect to push them further apart will actually overlap instead. This is called margin collapse.
You can also use margin to center an element within a container, but there are some important things to remember to do when trying to center an element:
-
⁕ Is the element an
block-level element? If it isn't, you will need to set it todisplay: block;before you can center it withmargin. -
⁕ Does the element have a
widthset?block-level elements take up 100% of thewidthof their containers, so if you want to center them inside of one, you have to set awidthfirst. -
⁕ Apply your
margin! With two values, the first will set themargin-topandmargin-bottom, and the second will set themargin-leftandmargin-right. Left and right must be set to "auto-" to center the element, but you can set themargin-topandmargin-bottomto zero, or to an actual value to create vertical space between elements.
This is the first paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is the second paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Background Images with CSS - Default Behavior
We've already talked about using CSS to add decorative images, and there are a few ways that you can use them on your pages. First, let's see what happens with the default behavior of a background-image added through CSS.
Notice that the image is tiled (repeated). The first image is placed in the upper-left-hand corner of the container, and then it fills the space with the tiled image until it runs out. If the container is wider or taller than a full row or column of images, it will still add the image there, but will cut it off partially.
Background Images with CSS - Control Alignment
We know now that a background-image will fill a container in tiles, but we can tell the CSS not to tile the image. We can also control the alignment of those tiles or individual images with CSS, and you can include a background-color in the container as well.
Background Images with CSS - Background Patterns
There are a lot of websites that offer repeating pattern images that you can use on your website. Transparent Textures, Hero Patterns, and Subtle Patterns all have a lot of options. There are also CSS background websites like CSS Background Patterns and CSS3 Patterns Gallery.
Floating Content with CSS
Below, I have linked to two dog-related SVG files from the images folder in img tags (you can also paste SVG code directly into your HTML). Let's adjust the styles here so that the text appears to flow around the images, with one image on each side of the container.
What cute puppies! We can clear the float on this paragraph. Let's use a float for their main purpose, which is to display text that wraps around an image, side-by-side.
This is the text that we want to wrap around the dog house on the right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
The Display Property
The display property gives you a lot of control over the layout of elements on your pages. Many elements that are difficult to style because they display: inline;, you can change them to block with this property! Throughout this activity, we've seen the display property changed on elements to allow for the desired styling. In Module 5, we'll learn how to use this property to make grid and flexbox containers.
displayproperty values:- ⁕
inline - ⁕
block - ⁕
none - ⁕
inline-block - ⁕
list-item - ⁕
flexbox - ⁕
grid