DEV Community

Discussion on: 4 Things I Learned From Building My First Site Solo

View post
Collapse
 
yaser profile image
Yaser Al-Najjar • • Edited

Hi Calire,

I'm pretty sure it's been a lot of fun (I still remember my first days in programming... wooh it was very exciting 😃)

I always love to hear people first experiences cuz I'm mentoring new comers in (our programming academy)coretabs.net, so yeah bring us more of those posts!

I've been doing backend for long (about 8 years so far) that I didn't care to up my CSS and styling game.

Recently, I had to finish some work in CSS... I thought CSS was very weird, but I realized that I had to go through the basics to get things right.

Key notes:

  1. Know whether the element is a block element or inline element (put two of them in the document and if they're on the same line, they're inline elements), like this:
<a href="#">my link</a>
<a href="#">other link</a>

<p>my paragraph</p>
<p>my other paragraph</p>
  1. Use bg color as an indicator (instead of imagining how the element looks like).
<style>
    a {
        background-color: #ccc;
    }

    p {
        background-color: red;
    }
</style>

<a href="#">my link</a>

<p>whatever</p>
  1. Know how to manage that element, by knowing the (text styling techniques)[w3schools.com/css/css_text.asp] and by knowing about the (box model)[w3schools.com/css/css_boxmodel.asp]

As for aligning vertically to the center, just ensure that it's a block element (if not use display: block;), and use height and line-height of the same size... and there you have it right in the middle 😉

<style>
    a {
        background-color: #ccc;
        height: 50px;
        line-height: 50px;
        display: inline-block;
    }

    p {
        background-color: red;
        height: 50px;
        line-height: 50px;
    }
</style>

<a href="#">my link</a>

<p>whatever</p>

Now feel free to remove that ugly background color!

Collapse
 
clairemuller profile image
Claire Muller •

I was originally setting the line-height equal to height, but if the text is too long and wraps to the next line, it creates a huge space between the two lines. :(

Collapse
 
yaser profile image
Yaser Al-Najjar •

Ah, line-height is for one line text... here the multi-line way:

It's like converting this paragraph into a table (using display), so that we can use vertical-align

<style>
    p {
        background-color: red;
        width: 150px;
        height: 150px;
        display: table-cell;
        vertical-align: middle;
    }
</style>

<p>whatever stuff right here to go to the next line</p>