– is a general CSS tag that indicates that what follows is a separate section [aka division] in the HTML document; using
it makes it easier to distinguish individual sections on the page visually
You’ll also notice that some of the other tags [which we already know] look to be a bit more complex, with multiple CSS classes assigned to them. For example:
...
The classes assigned to the text-uppercase text-white font-weight-bold.
These classes have been created by Bootstrap and by the Creative theme’s developer. The good news is that you too can use them freely when creating a website with HTML and
CSS.
Quite frankly, you can customize any tag you add to your page’s structure by assigning any number of classes to it.
If you want to see the complete list of the classes available, you can open the main creative.css file that’s in the css subdirectory of the Creative theme.
Getting a grasp of all these classes can seem intimidating at first, but it’s actually way easier than it looks.
For example, one of the classes assigned to some of the paragraphs in our index.html
file is font-weight-light. When you jump into the creative.css file and ctrl+f looking for that class name, you’ll see that it simply sets the font-weight parameter like so:
.font-weight-light {
font-weight: 300;
}
Modifying the default texts in the index.html file is very simple. Just find the tag that you want to edit and change what’s between the opening and closing tags.
For example, to change the main headline, just change this:
Your Favorite ...
To something like the following:
Admire my HTML website!
You can do the same to all the
paragraphs and other tags on the page.
What’s important is that you can also add new paragraphs freely. For example, we can take the paragraph that’s already on the page, make a copy of it and paste it right below the original paragraph; like so:
Start Bootstrap can ...
Paragraph 2
Now, with the texts taken care of, let’s replace the image that’s in the background.
This is a bit more complicated to do since it requires us to go into the CSS stylesheet file and do the modification there. As you can see in
the HTML code of the Masthead section, no tag would indicate including an image to the page in any way. This is all done via CSS.
When you take another look at the whole block of code handling the Masthead section, you’ll see that it’s assigned to a class called masthead. This line of code handles the class assignment:
The masthead class is the one that puts an image in the background of the whole block.
Let’s open the creative.css file again and look for the “masthead”
class:
header.masthead {
padding-top: 10rem;
padding-bottom: calc[10rem - 72px];
background: linear-gradient[to bottom, rgba[92, 77, 66, 0.8] 0%, rgba[92, 77, 66, 0.8] 100%], url["../img/bg-masthead.jpg"];
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
}
This code does all kinds of fancy things to our image [like adding an overlay, shading, etc.], but the important part is this: url["../img/bg-masthead.jpg"]. This is the line that indicates where to find the background image. It’s going to be in the img subdirectory.
To change this background image, take any image of your own, copy it to the img subdirectory and then copy and paste its name in place of the original bg-masthead.jpg file. In short, change this: url["../img/bg-masthead.jpg"] to this:
url["../img/YOURFILE.jpg"].
3. Customize the Other Blocks on the Page
As you go through the index.html file, you’ll notice that there’s a lot of different sections already on the page. We have a section for the navigation, and about a block, some services, a portfolio, a call to action, a contact block, and a footer.
While there’s different content in all these sections, the sections themselves are similar in structure. They all have roughly the
same set of HTML tags – just different CSS classes assigned to them.
The best way to modify the page to fit your needs is to go through the blocks one by one and experiment by changing things around.
Apart from modifying the texts, you can also move whole sections around [the parts between the
With that being said, there are two quite
basic modifications that we haven’t talked about yet. Let’s cover these next:
9. Fine-Tune Colors and Fonts
Changing colors or fonts is very easy to do in HTML and CSS. The simplest thing you can do is assign some in-line styling to an HTML tag. For example:
Red text
In HTML, colors are represented by their hex values; “#FF0000” is red. Here’s a table of all the other
standard colors.
A better way to assign colors is to do it via the CSS stylesheet. For example, to get the same effect as the code above, we could put this in our CSS stylesheet:
p.red {
color: #FF0000;
}
And then use the following piece of HTML code in the main document:
Red text
That second method is basically how things are done in Bootstrap.
To change the color of any text on the
page, first find the tag responsible for styling that text, and then go into the stylesheet and modify the corresponding class, or create a new class.
Here’s an example; say you want to change the color of the header saying “At Your Service.” Currently, it’s black, and this is the code handling it:
At Your Service
To change its color, the best way is to create a new class called, say, .text-orange and set the color value there, like so:
.text-orange {
color: #f4623a !important;
}
* The !important will make sure that
this color setting will overwrite any other color setting that came before it.
Now, we can go back to our header, and change its code to:
At Your Service
With these changes, the header will now be orange:
About
We’re going to change it to this:
About
This is something we haven’t talked about yet, but the href parameter. The text
of the link – the clickable part of the link – will be the text between the opening and closing
When you refresh the homepage now, you’ll see your new link pointing to the about page.
Further Reading
At this stage, you’ve basically built yourself a simple website consisting of two pages – a homepage and an about page.
What you should do now is rinse and repeat by creating new pages, tuning them up, adding content to them, and
then linking everything from the navigation menu.
Other things worth doing as you’re going through these steps is further learning HTML and CSS principles, going through the checklist, and also learning Bootstrap and its structures and classes. Some resources for that:
- HTML5 cheat sheet
- CSS cheat sheet
- Javascript cheat sheet
- HTML tutorial
- Bootstrap tutorial
- Bootstrap cheat sheet
Mastering Bootstrap, highly likely the best path currently available to building optimized and beautiful websites with HTML and CSS.
If you have any questions about creating a website with HTML and CSS, don’t hesitate to submit them in the comments.
How do I create a simple HTML website?
Follow the steps below to create your first web page with Notepad or TextEdit..
Step 1: Open Notepad [PC] Windows 8 or later: ... .
Step 1: Open TextEdit [Mac] Open Finder > Applications > TextEdit. ... .
Step 2: Write Some HTML. ... .
Step 3: Save the HTML Page. ... .
Step 4: View the HTML Page in Your Browser..
How can we create a simple website using HTML and CSS and JavaScript?
Learning objectives.
Create a basic web page using HTML..
Apply styles to page elements using CSS..
Create themes using CSS..
Add support for switching between themes using JavaScript..
Inspect the website using browser developer tools..
Is HTML and CSS enough to create a website?
Together, HTML and CSS are enough to create a basic website. However, if you want to create more complex websites, you may need to learn additional coding languages such as JavaScript or PHP.
Can I build my own website using HTML?
HTML is the standard markup language for creating websites and CSS is the language that describes the style of an HTML document. We will combine HTML and CSS to create a basic web page. Note: If you don't know HTML and CSS, we suggest that you start by reading our HTML Tutorial.