Adding Text Content to your Webpage

When it comes to designing and building a webpage, it’s pretty important to have a section for your users to learn a little about you and the content of your webpage! It helps to give your users an inside look at what’s in store for them as they browse through your site. To add text content to your webpage, we will start by creating a three section text div. 

Which will initially look like this:

 

And by the end of this tutorial, will turn into this:

 

Creating your text div

Let’s start off by creating your text div! Give your <div> class=”Container” and an id=”TextFlexContainer”

<div class=”Container” id=”TextFlexContainer”>

This will create a div that contains all of your text content – and you can easily style it in your CSS stylesheet! I have labeled it TextFlexContainer because we will eventually make the contents of this container flexible, or easily responsive to screen resizing!

If you are unsure how to create a text div, check out my post on The Div Tag!

Then you are going to want to create the three <div>’s for each text section you want within your text div. This is called Nesting.

In my example, I want to have a “Story“, a “Who We Are” and a “What We Do” text section! So I will create three new <div> – one for each text section. You will want to nest these new <div>s within the opening and closing TextFlexContainer tags! This way, they will all reside within that div.

To recap: Nesting

Creating divs within divs is called nesting. 

Your TextFlexContainer is the parent container.

The <div>s within the TextFlexContainer are the children elements.

If nesting is a little confusing, check out my post on Nesting Elements!

Coding your Nested Divs

To get started, you’ll want to create the three Story“, “Who We Are” and “What We Do divs:

 

This is how I code out my three children <div>s within the parent TextFlexContainer.

<div class=”Container” id=”TextFlexContainer”>

<div id=”OurStory”> </div>

<div id=”WhoWeAre”> </div>

<div id=”WhatWeDo”> </div>

</div>

I’ve also added an <h1> tag, or a header 1 tag to each child div to add a title to each section! This title will help you see where the three divs start and stop!

Note: The h1 tag creates a title feature for your paragraph! There are 6 different <h> tags. You can style h1-h6 in your stylesheet!

<div id=”OurStory”>

<h1>The Story</h1>

<div id=”WhoWeAre”>

<h1>Who We Are</h1>

<div id=”WhatWeDo”>

<h1>What We Do</h1>

Again, with this code, your webpage will look like this:

 

Woohoo! Three text divs within the TextFlexContainer! Time to add some content! I will do this by adding a paragraph tag, or a <p> tag.

The structure of a paragraph, or <p> tag looks like this:

<p>Insert content</p>

So if I want to add a paragraph to each of my “Story”, “Who We Are” and “What We Do” sections, I will include a <p> tag within each <div>!

Le Example:

Which, when viewed in your browser, will look like this:

Styling your text divs

Time for the fun part! Styling your <div>s! Head over to your CSS Stylesheet.

New to CSS? Check out my post on Linking CSS Stylesheets!

We are going to style the <div class=”container” id=”TextFlexContainer> first, because this container is the parent of your other three text divs. Anything we do to the TextFlexContainer will apply to the other text divs until we style those divs independently.

TextFlexContainer Styling in CSS

There are a few things I want to do when I first begin to style my TextFlexContainer

  • I want to align my three text divs horizontally within the TextFlexContainer
  • Then I want to center my three text divs within the TextFlexContainer
  • Next, I’d like to give the TextFlexContainer a background color
  • Lastly, I want to give all font within the TextFlexContainer a fun color!

Let’s look at how I code this out:

#TextFlexContainer {

display: flex;
justify-content: center;
background-color: rgb(238, 221, 224)
color: rgb(69, 55, 0);

Breakdown of this CSS styling

First things first, recall that when you are identifying and styling an element with a specific id, you want to indicate to your CSS Stylesheet that you are doing so with the ‘#’ symbol before writing the id. If you were to identify this element by its class, you would indicate that by using a ‘.’. That’s why the beginning of the CSS Styling is #TextFlexContainer

#TextFlexContainer style features:

display: flex; – Your content within the TextFlexContainer element will be evenly spaced out either horizontally, vertically, or both based on the following style features

justify-content: center; – This feature tells your stylesheet to align all of the content within the TextFlexContainer horizontally.

Note: for vertically aligned content, you would use align-items.

background-color: rgb(238, 221, 224) – TextFlexContainer will have a pink background-color

color: rgb(69, 55, 0); – This gives a gold color to the font within TextFlexContainer

When viewed on your browser, it will look like this:

Alright! We are getting somewhere, woo!

The next thing I like to take care of is the styling the font – size, thickness, and font type.

Let’s take a look at how I am going to change up the font styling a little!

#TextFlexContainer font styling:

font-family: sans-serif; – I just learned that sans-serif means ‘without the strokes’ or without the little lines on the edges!

font-weight: 300; – How bold the font is! It ranges from 100-900, with 100 being the lightest and 900 being the boldest

Note: I also added a height to the #TextFlexContainer with the styling below:

height: 30%; – The #TextFlexContainer will take up 30% of the height of the webpage

When viewed on your browser, it will look like this:

 

Styling nested divs

Now it’s time to style all of the divs nested within the TextFlexContainer – id=“OurStory”, id=“WhoWeAre” and id=“WhatWeDo”

The easiest way to style each of the text divs at the same time(rather than styling them separately) is with the following selector in your CSS Stylesheet.

 

#TextFlexContainer > div{

}

WOAH. This is a weird looking style selector! I only recently learned about it, so I am so excited to share it with you!

What #TextFlexContainer > div{ } means is that you are selecting all of the divs that have the parent #TextFlexContainer. Neat!

Time to add a height and width to each div within the parent #TextFlexContainer!

#TextFlexContainer > div {

width: 30%;
height: 20%;

}

Remember, #TextFlexContainer > div indicates that I am styling all of the divs within the #TextFlexContainer

Therefore:

width: 30% – each div will be 30% of the width of the #TextFlexContainer

height: 20%; – each div will be 20% of the height of the #TextFlexContainer

And now your page will look like this:

Lastly, it is time to center all of the content within each text div.

 

#TextFlexContainer > div {

width: 30%;

height: 20%;

margin: 15px;

padding-left: 20px;

padding-rightL 20px;

text-align: center;

}

The newest style features added to #TextFlexContainer child divs are in bold

margin: 15px; – each div will have a 15px margin on the top/bottom and left/right

padding-left: 20px; – each div will have 20px between the text content and the left side of its div

padding-right: 20px; – each div will have 20px between the text content and the right side of its div

text-align: center; – the text within each div will be centered

And there ya have it! How to add text content to your webpage.


What types of content will you be adding?!

 

Subscribe to Tech Talk Code to get updates on new posts!

 

 

Leave a Comment!