Basic HTML and CSS Everyone Should Know

02/15/2022

Whether you’re a coder or not, some basic HTML and CSS knowledge is always a plus. While there are multiple website builders out there now that do all the heavy lifting, they’re not always perfect. Every once in a while, you’ll find a broken image. Or you’ll realize you want to re-format some text so that it’s centered on your homepage, but you don’t want it to apply to all the other images on the page. As far as web design goes, website builders generally work within templates.

From a user’s perspective, it means that when you change one thing, odds are it’ll also change other aspects of the webpage. For example, if you decide you want a header to be blue instead of black, the website builder you’re using will probably make all headers on your website blue. So having some very basic HTML and CSS knowledge will be helpful moving on. Plus, it’ll look good on your resume.

Header Tags

When building out the content on any of your website pages, you’ll need to have some headings. An easy way to do that with HTML is using what’s called header tags. There are six header tags, going from H1 to H6. The lower the number, the larger the font size. As a general rule, H1 tags should only be used once on a page, so it’s generally reserved for the page name. The reason why is because using more than one H1 tag can come across as spam to Google. So, it’s considered best practice to just use one. As for the rest of the header tags, you can use whatever size you think fits best for your page.

What Header Tags Look Like in HTML

Image Tags

When inserting an image with HTML and CSS, there are a few things to keep in mind. For starters, you might want to use stock photos that are free to use. If you’re creating your company website, the last thing you want is to run into some copyright issues. Secondly, you’ll probably want to place it in a specific position (left, center, or right) and resize it so that it won’t be a tiny image on the page or take up the whole width of your webpage. When putting an image in HTML, you’ll want to use what’s called image tags, which will require you to add a source code.

As complicated as it sounds, it’s actually quite easy to do. In simplistic terms, it means that the HTML code needs to pull the image from somewhere, whether it’s a file stored somewhere on your site, or the image link if it’s an image you found online. Additionally, you’ll want to add alt and class tags to help improve the page’s overall search engine optimization (SEO) and make it clear which element you’re editing when you move over to CSS. For this example, I’ve found a picture of a mountain on Pexels, a free stock photo site. So I’ve inserted the link to the image as the source and entered the word mountain in the alt tag and because I want to change the picture’s position later, I’ve named the class center.



To change the image’s overall position and size, you’ll have to add some code into CSS. Say you put your mountain image into HTML but you soon realize it’s too big and not centered. What you’ll want to do next is enter “.center {“ in CSS to start the process. After that, you’ll want to resize your image through percentages (rather than pixels or inches). That way, it’ll still be responsive when you look at the page on a mobile device. For this example, let’s make the image height half of what it originally is and the height 70%. To center it, you’ll want to set the left and right margins to auto and make it a block element with the display tag. And lastly, you’ll want to remember to close it with a “}” symbol.

Paragraph Tags

So say after you put your headings and images, you want to add some body text. In HTML, they’re called paragraph tags and it’s perhaps the easiest HTML you can learn, comparatively. All you have to do is start with a paragraph tag, insert whatever written content you want in there, and then close the tag. Simple as that. For the example above, I’ve just inserted some Lorem Ipsum (dummy text).


If you want to change the position of that text, you’ll do something similar to what you did with the image tags in CSS. Say you want it to not take up the entire width of the page so that there’s some white space on both sides. To do this, you’ll want to add some padding on both sides so that the text won’t take up the full width of the page. To do that, you’ll add the padding-left and padding-right tags to your CSS and add a percentage. For this example, I’ve set them both to 20%.

If you want to put in some extra HTML and CSS practice, CodePen is the perfect site to do just that. Plus, you can find some cool designs on there too with the full HTML and CSS for you to use on your own site. After that, you can add it into your own site, which most website builders support. In fact, PSPINC’s web building tool, WebdeXpress, as well as PSPINC’s blogging platform, Bloguru, supports HTML and CSS.

The last thing I’ll leave you with is this: always to close your HTML and CSS tags. For HTML it’s adding </> to the corresponding tag. For CSS, it’s simply adding “}” after all your tags for each element. If you don't have the time to inspect and add to your website's code or if you find it all too technical, consider letting PSPINC help by requesting a quote.

Pacific Software Publishing, Inc. 1404 140th Place N.E., Bellevue, WA 98007

PSPINC Creates Tools For Your Business

Pacific Software Publishing, Inc. is headquartered in Bellevue, Washington and provides domain, web, and email hosting to more than 40,000 companies of all sizes around the world. We design and develop our own software and are committed to helping businesses of all sizes grow and thrive online. For more information you can contact us at 800-232-3989, by email at info@pspinc.com or visit us online at https://www.pspinc.com.