Containers from GreenShift have a vast amount of settings available. Most of them are CSS styles applied to specific blocks. A CSS style (aka setting) is like the paint of a house, the placement of the doors and windows, and the size of the house. You can change them to any shape, color, or place wherever you want to.
There are 5 container settings in particular that you’ll be using almost all the time. Beginners and CSS gurus alike use these settings. They help you create a nice-looking house where all your content will live.
- Width — the amount of screen width used
- Height — the amount of screen height used (unexpected, huh 🤔?)
- Background — the color of the container
- Spacing — margin space on the outside of the container, padding space on the inside of the container
- Border — a visible fence around the container
These 5 settings allow you to create almost everything you see online. Each setting uses measuring units similar to a meter or foot. Units in web design and -development determine the size of an element, like a container. Let’s go over the available units first before exploring the 5 settings.
Width and height
Width and height are two fundamental attributes defining elements’ size and layout on your webpage. These elements can be anything from the entire webpage to a container page section to individual components like images, text boxes, or buttons.
Width
This refers to the horizontal space that an element occupies on a webpage. It is usually defined in units like pixels (px), percentages (%), or viewport width (vw). Using percentages or viewport units can make the website more responsive, meaning it will adapt to different screen sizes. For example, setting an element’s width to 50% would make it occupy half of its parent container, regardless of the actual screen size.
Height
refers to the vertical space a web element takes up. It is typically defined in pixels, percentages, or viewport height (vh). For instance, if an image’s height is set to 300px, it will always be 300 pixels tall, regardless of the screen size. However, if its height is set to 50vh, it will occupy half of the viewport height, making it responsive to different screen sizes.
Example of width and height
Below you’ll see a container with a purple border. This is set to 100% width, which gets the width of my post content container, and I set a height of 300px, meaning to purple border container will be 300 screen pixels in height.
Inside the container with a purple border is another container with an orange background. I set the width and height to 50%. As you can see, the orange container is half the size.
In web design, it’s crucial to balance the width and height of elements to maintain a clean, organized layout. Proper use of these attributes can significantly enhance the user experience, making the website look good on both small mobile screens and large desktop monitors.
Lastly, it’s important to note that while you can explicitly set the width and height of an element, it’s often better to let the content within that element dictate its size when possible. This approach can help to prevent issues with overlapping content or empty space.
Background
The background setting for a container can be used to modify its appearance. With the background property, you can add color, images, gradients, and even animations to the backdrop of your container, significantly enhancing the visual presentation of the content inside the div.
- Background Color: You can use the background-color property to specify a background color for your container div. For example, “background-color: blue;” will make the background color of your div blue.
- Background Image: The background-image property allows you to set an image as the background of your container div. For instance, “background-image: url(‘image.jpg’);” will set the specified image as the background.
- Background Repeat: If the image you used for your background is smaller than your div, it will repeat by default. Using the background-repeat property, you can control this repetition. “background-repeat: no-repeat;” will prevent the image from repeating.
- Background Position: The background-position property is used to specify the position of the background image. You can define specific values in pixels, or use keywords like “top”, “center”, “bottom”, “left”, “right”.
- Background Size: The background-size property can be used to specify the size of the background images. “background-size: cover;” will scale the background image to be as large as possible so that the background area is completely covered by the background image.
- Background Gradient: CSS also allows you to create a gradient background where you can transition between two or more colors. For example, “background: linear-gradient(red, yellow);” will create a linear gradient from top to bottom starting from red to yellow.
Spacing
When designing a webpage, spacing is a very important. It impacts the overall aesthetics and functionality of your site. Adding spacing can increase the breathing room every element has. Key elements of spacing on the web layout are padding and margin, which are used to create a well-structured and readable webpage.
Let’s start with Padding:
Padding is the space that surrounds an element’s content inside a container. It is the space between the content and the border of the container. For example, if you have a text box and want to give some space between the text and the edges of the box, padding comes in.
Next, let’s talk about Margin:
Margin is the space outside the element, between the element and the other elements around it. It is used to create space around elements outside of any defined borders. In simple words, while the padding is the inner space, the margin is the outer space of a container.
Both padding and margin are essential to create a balanced, well-spaced layout. They can make your content more readable and navigable, providing a better user experience. While they may seem similar, remember that padding is the space inside the container between the content and the border, while the margin is the space between the container and other elements.
This is a work in progress based on another article.
Let me know if you already have some questions I could seek to answer or tips on improving this article!
Border
TBD