(Part 1 of 2 - Jump to Part 2)
For some who have spent the majority of their time working in backend development, CSS can be a daunting thing to dive into, it's true. "What's a <div> and why do I care about it anyway?" The truth, however, is that the difference between plain data and a properly stylized webpage is staggering.
But where to start? There are some basic principles that are important for any aspiring web developer to understand about implementing CSS. I'll cover some of those basics in the following posts.
Step 1.1:
As the best place to start is generally the beginning, let's dive right into creating a webpage layout using CSS. First, we'll imagine a block of content. In html, that block will generally be a <div>, and we'll assign it a class="class-name" in order to style it. In the CSS file, we'll give that .class-name {} some styles: a background: color;, a width: value;, and a height: value;.
(Note: the font-size: value; and the text-align: center; are fairly obviously there just for the content text; setting the line-height: value; to the same value as the <div>'s height: is an easy way to center the content text vertically.)
CSS & HTML:
Browser:
Step 1.2:
Next, a basic assumption is that we'll want more than one such content box on the webpage. We can copy and paste that <div> in the HTML file, but we'll want to make sure that there's a buffer between the content boxes on the webpage, so let's add a margin: value; to the CSS as well.
CSS & HTML:
Browser:
Step 1.3:
Now more content is being displayed, but there's still a lot of wasted real estate on the webpage, since we're only displaying content one-dimensionally. We can change this in a few ways, but one of the primary ways is through the display: inline-block; style, which will cause our content <div>s to display similar to words in a sentence. As many <div>s as possible will display from left to right on the line before word-wrapping to the next. This is also useful as it means that the webpage will react to resizing quite nicely.
Since the display: inline-block; style acts much like text words/sentences, it should be no surprise that it will respond well to the text-align: center;, so let's add that to the body CSS. As an added bonus, we can factor it out of the <div>'s class, since it will be inherited from the body now.
CSS & HTML:
Browser:
Step 1.4:
Wonderful! The content is already starting to look fairly respectable; it reacts to page resizing well and we can add additional iterations of this type of content very easily. But most webpages don't exist simply to display one type of content, so a very common next step is to enclose the content array in a CSS "wrapper". This will allow the grouped content to interact well with other content on the webpage.
Let's add a <div> around the content <div>s along with a new .wrapper-class-name {} style in the CSS file. Since the body element already has the text-align: center; style, we can make sure this wrapper <div> is centered on the webpage even if its width: value; is set to less than the full page width by simply using the margin: auto; style, which will apply any excess space to either side of the <div>.
CSS & HTML:
Browser:
Great! Now that our content is grouped in a wrapper <div>, it'll be more manageable when dealing with additional content on the page. Content wrappers are an extremely common practice, and you'll quite often find pages that have multiple content wrappers grouping together many different content types.
In my next blog post, I'll go into the next part of CSS basics which builds upon the current example and covers a few more important details.
Stay tuned!
(Part 1 of 2 - Jump to Part 2)
Top comments (0)