Gyancode

A free library of HTML, CSS, JS

Search This Blog

Friday 31 March 2017

CSS Font Sizes

In this tip, you will learn how to specify a font’s size with CSS.

Being a practical nerd, I will not waste time talking about all the various methods for declaring font sizes with CSS … instead I will concentrate on the two widely used ways and then briefly explain the differences. First, the two main methods:

By pixel

By em

What is the difference between and EM and a pixel?

Pixels are an absolute measure of a font’s size and an EM is a relative measure – that means the actual pixel size of the font (as they appear on screen) set with EM’s, can fluctuate. This makes using EM’s trickier. So the nerd answer is NOT to use EMs!

Let’s look at a quick EM example anyway:

<div style="font-size:1.2em">
So the above would cause the fonts to be about 20% larger than the baseline font size – thus 1.2em. I am not going to go into all the nerd details about EM’s because I think pixels are the way to go.

Thursday 30 March 2017

Height:100vh doesn't work correctly with content in the div

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Height:100vh doesn't work correctly with content in the div</title>
</head>
<style type="text/css">
    .intro { color: #fff;height: 100vh; background: url('yourimage.jpg') no-repeat center center; background-size: cover;  position: absolute;bottom: 2em; }
    p.hello {margin: 30px; }
    .page1 {color: #fff; height: 100vh; background: beige; }
    .page2 {color: #fff; height: 100vh; background: black; }
</style>

<body>
    <div class="container">
        <div class="row">

            <div id="intro" class="intro">

                <div class="text-center">
                    <p class="hello">
                        Intro text is coming soon!
                    </p>
                    <div class="col small-col-12 intro--buttons">
                        <p>
                            Buttons coming here.
                        </p>
                    </div>
                </div>

            </div>

            <div id="page1" class="col col-12 page1">
                <p>Tekst test</p>
            </div>

            <div id="page2" class="col col-12 page2">
                <p>Tekst test.</p>
            </div>

        </div>
    </div>
</body>
</html>

Wednesday 29 March 2017

Height for Full Screen Div?

I have a DIV element that needs to fill the entire screen until the user scrolls and reveals the content. So essentially remain at the viewports height.

Here is what I did and it works, but it’s only compatible with newer browsers.

.section-full {
height:100vh;
min-height:100vh;

}

Tuesday 28 March 2017

Changing the Font to All Caps with CSS

While text in general is hard to read when written in all caps – and considered the electronic version of yelling – using CAPS for emphasize is a handy tool.

Headers are a place where capitalization is frequently used. And to assure that your header is displayed uniformly throughout the site without having to worry about actually writing in all caps, just use CSS:

h1 {
text-transform: uppercase;
}


With this, everything that has the h1 tag applied, WILL APPEAR IN ALL CAPS.

Another interesting text-transformation property is "capitalize"

h1 {text-transform: capitalize;}


With This, All Your Words Will Begin With A Capital Letter!