DEV Community: Chukwuemeka, Samuel Chinaza

CSS - LAYOUT HIERARCHIES

Chukwuemeka, Samuel Chinaza — Fri, 10 Feb 2023 12:11:11 +0000

Creating layout with CSS can seem complicated at times and be a frustrating experience. But understanding everything about CSS layout boils down to one thing being 'relationships'.
How these layouts relate to each other seems to be the ultimate hack between understanding it and utilising it.

This article will deal with the most important part of dealing with CSS layout, which is relationship.
In CSS, layouts do not stay on their own. In one way or the other it must be related to one thing on the page thereby creating a working relationship.
The first relationship we will look at is somehow like a container-content relationship which can be easily illustrated with parent-child relationship.

For example, let us look at a parent-child relationship and see how the width and height affect each other.

html



<div class= "parent">

/* Children */
<h5>CSS - Layout Hierarchies.</h5>
<p>Content</p>

</div>

CSS styling

.parent-child{
width: 750px;
border: 1px solid black;
}

With the 750px, the width of the parents will sort of dictate the width of the children, or it can be said that the children are adapting to the parent.
This is different when it comes to the height of the parent. Often times people include a height parameter to the parent.

CSS styling

.parent-child{
width: 750px;
border: 1px solid black;
height: 450px;
}

But, it is expected that the children dictate the height of the parents because the bigger the width the smaller the height and vice versa. This is important because the contents need to be contained regardless of the width of the parent. In other words, the width of the child need to be set as auto.

CSS styling

.parent-child{
width: 750px;
border: 1px solid black;
}

. parent-child > *{
width: auto;
}

We will get into the relationship with the siblings as well but let's look at more relationship with the parents.
One of these is 'inheritance'. You can set a color on the parent and all the children/individual elements will inherit it specifically.

Another thing that gives people tough time is the relationship of margin. Understanding collapsing-margin is part of understanding relationships. The two options that solves the margin problem is the 'display:grid' or 'display:flow-root'. Another way is to set 'padding:block'.

When you look at the relationship between contents, which can be referred to as siblings, the relationship get more complicated when the contents are not the same. For example; when a div or an element has two contents. And one of the contents has an image header and explanation meanwhile the other contents has only a header. Styling this contents or siblings might be frustrating or by itself difficult styling both of them. One way to handle both siblings is to make sure both of them are of the same size. Then align them as flex if you don't want them to stay in column.

display:flex;

Or you can use the flex 1 option.

flex:1;

Conclusion
Understanding these relationships have a long way to help you deep dive into layouts styling in CSS. Whenever you run into a problem, try and figure out what is influencing things to result in the way they're behaving. There are lots of things going on between relationships of the contents of a page.

If this content was helpful to you, please like, share and also leave a comment for me.

You can contact me on LinkedIn, Twitter, or checkout my GitHub profile.

50 Keyboard Shortcuts that will make you a Visual Studio Code Pro.

Chukwuemeka, Samuel Chinaza — Wed, 08 Feb 2023 09:55:46 +0000

Visual studio code (VS Code) is one of the most popular IDE and text editor that most software developers use. It provides support for many languages and frameworks. And it's open source and free to use.

This article contains 50 Keyboard Shortcuts that every developer need to know for easy programming. It'll help you save time and and make using Vs Code easy for you.

Shortcuts and what they do.

ctrl+ N: Open a new file.
Ctrl + S: Save file.
Ctrl + Shift + S : Save as.
Ctrl+ X: Cut line.
Ctrl + C: Copy line.
Ctrl + F4: Close file.
Ctrl + K then Ctrl + W: Close all.
Ctrl + Shift + T: Reopen closed editor.
Ctrl + Enter: Insert new line or Insert line below.
Ctrl + Shift + Enter: Insert line above.
Ctrl + Shift + N: New window/Instance.
Ctrl + Shift + W: Close window/instance.
Ctrl + K then P: Copy path of active file.
Ctrl + Home: Go to beginning of file.
Ctrl + End: Go to end of file.
Home: Go to beginning of line.
End: Go to end of line.
Ctrl + K then Ctrl + C: Add line comment.
Ctrl + K then Ctrl + U: Remove line comment.
Ctrl + /: Toggle line comment.
Shift + Alt + A: Toggle block comment.
Ctrl + T: Show all symbols.
Ctrl + G: Go to line.
Ctrl + P: Go to file.
Ctrl + F: Find.
Ctrl + H: Replace.
Ctrl + Spacebar: Trigger suggestion.
Ctrl + .: Quick fix.
Ctrl + K then M: Change file language.
Ctrl + =: Zoom in.
Ctrl + -: Zoom out.
Ctrl + F4 then Ctrl + W: Close editor.
Ctrl + Shift + .: Replace with next value.
Ctrl + Shift + /: Replace with previous value.
Ctrl + K then F: Close folder.
Ctrl + \: Split folder.
Ctrl + Shift + \: Jump to matching bracket.
Shift + F8: Go to previous error/warning.
Alt + Right arrow: Go forward.
Alt + Left arrow: Go back.
Alt + Enter: Select all occurrences to find match.
Alt + Up arrow: Move line up.
Alt + Down arrow: Move line down.
Shift + Alt + Up arrow: Copy line up.
Shift + Alt + Down arrow: Copy line down.
F12: Go to definition.
F11: Toggle screen.
F2: Rename symbol.
Tab: Emmet expand.
F8: Go to next error/warning.