
Table of Contents
When designing the front-end of a website, the line between development and design can often be blurred. It's ultimately the front-end developer’s job to take the designer's vision and translate it into the HTML and CSS calls that bring it to life on a web page. However, having a firm understanding of fundamental CSS concepts will aid the designer in creating a layout that is more efficiently and accurately translated into front-end code.
This post is not a full overview of everything that CSS is capable of. Rather, it's an introduction to the basics of how things work. A guide to help designers understand the tools that will ultimately render their creation for users.
What You Need to Know About CSS Concepts for Design
Understanding Positioning in CSS
Every design relies heavily on the positioning of objects within the space. CSS provides developers with several ways to position the elements of a design: static, absolute, relative, and fixed. The terms will likely sound familiar to anyone who has done design work. So, we'll just briefly go over how they work in CSS.
- Static – By default, HTML elements are placed in the order presented in the HTML code. The incredible power of CSS comes from the ability to change this positioning. But if you choose not to, then you can use static positioning. This is the default if no other positioning type is given.
- Absolute – Need to put your elements in a precise location? The absolute positioning type might be what you're looking for. With values for left, right, top, and bottom, this positioning style will place the object at the exact pixel value given. Absolute positioning disrupts the normal flow of the document. So it can get unwieldy to work with if not used carefully or used with too many elements.
- Relative – This positioning type uses the exact four directions that absolute positioning does. The difference here is that the object will now be positioned relative to its parent rather than in absolute terms. We'll learn more about parents and children in the next section.
- Fixed – A particular type of positioning used for creating watermarks or similar elements that should stay put in an exact location. It is similar to absolute positioning, except that fixed positioning will not scroll along with the page.
Using Parents and Children
CSS concepts of parents and children play an essential part in website design. Imagine you have a box with some text at the top and a button at the bottom. It would be inconvenient if you had to modify all three of those elements every time you wanted to reposition the box. Instead, you can make the text and the button the children of the box, and they'll automatically move wherever the box does.
Just like in humans, CSS elements have a hierarchy of relationships. For example, you could place several of our button/text box examples into a large box. The small boxes would be children of the big box. The text and buttons would be children of the small box. When the big box moves, the text and button move because their parent box moves, and they move with it.
The root element of your layout is the page itself. Every element that you add to the page is a descendant of the page in some way. It may be a child element, or it may be the child of a child. This type of nesting can occur as frequently as you would like to facilitate complex designs that can be easily modified.
Setting Object Spacing
In CSS concepts for design, empty space is a powerful tool. Without sufficient empty space, everything is bunched together, and the design looks either cluttered or monotonous. Creating space to add style and interest to your design in CSS can be done in two ways: margins and padding. They both provide the similar functionality of creating spacing but behave in completely different ways. So, it's essential to understand the distinction between the two.
- Margins – Spacing that is external to an element. Let's go back to our example of several small boxes inside of a big box. If you add a margin of 5 pixels around all sides of the small boxes, there will be a gap between them. The small boxes do not grow; they simply push other objects further away to maintain personal space.
- Padding – Padding is internal to an element. If we were to set the padding of our smaller boxes to 5 pixels instead of the margins, the small boxes themselves would grow. There would be more space between the edge of the small box and its children. However, there would be no space between the small boxes themselves.

Aligning Elements with Flexbox
Direction
The direction property determines how the elements will be stacked. Check out the values below:
- Column – Stacks items vertically, from top to bottom.
- Column-reverse – Stacks items vertically, from bottom to top.
- Row – Stacks items horizontally, from left to right.
- Row-reverse – Stacks items horizontally, from right to left.
Wrapping
To aid in creating responsive designs, the flex-wrap property will allow objects to wrap around should they run out of space. The values for this include set to wrap or no wrap, with the default being not to wrap.
Justification
Just like the text on a page, elements in a flexbox can be justified. To do this, Use the justify-content property to do this. The values of flex-start, flex-end, as well as center, are similar to left, right, and center justification in most software.
- Space-around– Places an even amount of space on all sides of the elements.
- Space-between – similar to space-around. Except the first element will be positioned as if it were set to flex-start, and the last element will be positioned as if it were flex-end.
Alignment
Justification shows how the elements align in the flexbox. But if your elements are not all the same size, you need a way to determine how they are aligned relative to each other. Similar to justify-content, the align-items property has values of flex-start, flex-end, as well as center. These will align elements, so their starting points align, their ending points align, or are centered. Two additional values provide extra control over the alignment:
- Baseline – This value aligns objects according to their baseline, which isn't always the center point.
- Stretch – This value stretches all the objects, taking up the same amount of space.
Conclusion
Along with HTML, CSS is the foundation of how website designs become a reality. The best designs will be made by designers who have some idea of the tools that front-end developers will be using to implement their designs and the technological constraints they'll be working under.
Now that you're armed with knowledge about these fundamental CSS concepts, you'll be able to better design your websites around how they are put together by the development team. Do you need more information and ideas about CSS concepts and webpage design? Visit our website today to learn more!