Understanding how HTML works with CSS to make unique sites

Most of us know how to use our smartphones and computers and can understand how to navigate our favorite websites. But what we see on our screens is only surface level — so much happens behind the scenes to create an online environment that is tailored to a user’s experience. 

One of the most common ways to create a website is through HTML code using CSS libraries. Learning how to code a digital platform can be overwhelming no matter what you’re designing for. One of my professors described the HTML code as a box that contains lots of smaller boxes, and each smaller box has a different purpose. 

Let’s walk through the basics of why websites typically use both HTML and CSS and some of the ways you can use these tools to improve your users’ experiences when they’re interacting with your website. 

HTML, which stands for Hypertext Markup Language, is used to design pages that will be seen on the World Wide Web. This coding language ensures that your images and text are formatted correctly to be seen online. 

HTML will essentially give you the basics. Your text will show up on the page where it is supposed to but it will just appear as lines of black text on a white background. However, when you want to add the elements that make your page unique, such as color, fonts, spacing, images and more, you’ll need to incorporate some CSS or Cascading Style Sheets. 

To create a webpage that uses the design elements offered from CSS, you’ll need to have at least two documents opened in your chosen code editor, one for HTML and one for CSS. You can have a separate page for each design element if that helps you feel more organized, just make sure you reference the correct document in your master HTML code. 

If you’re going to design a site, I would recommend beginning with your HTML code as it really is the bones of your website. Make sure that you’re able to get those basics up and online and then let your creativity take over as you begin to add design elements.

Now that the basic format of your website is set up, it’s time to create your CSS “library.”  In a different document within the same code editor you’ll begin coding in CSS instead of HTML, and you should begin by connecting the two documents together. 

Linking the documents together at the beginning will make your life easier because you will be able to refresh your webpage and immediately see the effects of the changes you made, assuming your code is correct. This is also a great way to test if something is wrong with your code after each step instead of waiting until you have already completed all of your work. 

Some ways to use the CSS libraries to improve the UX of your website are to utilize the text sizes and fonts to draw attention to the important parts of your website. 

An easy way to find fun and unique fonts is by going to Google Fonts, when you select a font on this site they’ll give you the code that will allow you to put the font directly into your code editor. I would recommend keeping an easy-to-read font for longer sections of text to avoid your site visitors’ eyes becoming overwhelmed.

Another way to improve the UX of your website is by using customized colors instead of using generic shades. This will improve the overall aesthetic of your website, making it more appealing to look at. 

You can customize colors using the RGB model, which creates colors based on the amount of red, green and blue used to mix the color together. Online “color calculators” allow you to mix different colors by stating the number of the amount of each color you want between zero and 255. They then give you the proper format of the color that you can implement it right into your website code. For example, my favorite color at the moment would be listed as “rgb(161, 231, 155).” 

Understanding how HTML and CSS work together can be difficult to conceptualize; however being able to utilize both of them allows you to create completely customizable and unique sites.