I get asked quite frequently how to create certain blog features… such as floating navigation buttons that stay in place as you scroll down the page.
I haven’t yet created any tutorials for this sort of thing because I really want to walk you through the basics before you go searching for a code to copy and paste into your site.
Copying and pasting a code is a quick and easy way to *hopefully* get an effect you want, but if you don’t fully understand what’s going on in the code, more often than not you will end up implementing it wrong and causing other issues.
Somebody else’s code has usually been tailored for their own website and won’t necessarily work properly for you.
So, before I dive into topics such as “how to create social media buttons that stay in place as you scroll” (or, in web developer terms: a fixed element), there are some things you need to learn beforehand.
Hand in hand with HTML
CSS and HTML work together like a team.
Before you can create any CSS styles, you need to have an HTML page created.
Once an HTML page is created, you can go in and apply your styles to whatever pieces of the code you wish.
The DIV Element
The <div> tag is one that is used often when creating HTML pages.
<div> means a division of a page, or in other words a section or block of something.
Think of it as a container that holds a certain selection of other elements.
DIVs are used to create website layouts and position most elements of a page.
To create a single DIV without styling, all you need to do is this:
<div>your block of content</div>
That just told your website to take your block of content and place it into one nice container.
It looks like this (I made the background grey so you can see the container properly):your block of content
ID Selectors
In the Introduction to CSS for Beginners, I went through the different types of selectors.
If you haven’t read that post yet, do that now.
An ID selector is basically a name you give to a certain HTML element that you can call upon in your stylesheet.
As you learned in the Introduction, an ID selector should be applied to a single, unique element.
So, say we wanted to style that DIV code above. Let’s change the width of the container.
First, we need to apply an ID selector to the code, so we can call it from inside of our stylesheet:
<div id=”content”>your block of content</div>
All we are doing here is adding a selector called “content”.
Now, if we create an external stylesheet and add this new ID selector to it and apply a custom width, the inside of our .css file should include this:
#content {
width:200px;
}
The # sign is always used to call a specific ID selector, so we called upon “content” with “#content” and followed the basics I outlined in the introduction.
Now our DIV looks like this with a width of 200px:your block of content
.
We can also change the height:
#content {
width: 200px;
height:100px;
}your block of content
.
and add some padding around the inside borders so that the text doesn’t touch the edges, and a 2px border around the whole thing:
#content {
width: 200px;
height:100px;
padding: 10px;
border: 2px solid;
}your block of content
.
You can see that just by adding new properties to the selector in the CSS file, we can tell that DIV to do whatever we want.
For a complete list of other CSS properties you can use, check out this CSS Properties List.
Now that you know how to create a DIV element with specific styles applied to it, you should have a basic understanding of what it is and what it does.
We use DIVs in many, many applications so a basic understanding of this is essential if you want to move onto controlling other features and creating those fixed navigation links/social network buttons.
In the next CSS tutorial I will explain how to do this.
I hope this tutorial gave you a bit of insight into what goes on behind the scenes of your blog/website and that you will try creating some simple div elements yourself!
Feedback is always welcome below!
