How to use style sheets for your website #HTipT #126

Your website has to have consistency with the look and feel of each page. Developing a style sheet will keep all your choices clean and clear.



Video Transcript:

Hi, I’m Alia Vryens and I’m the Microsoft Word Wizard here at the Auspicious Arts Incubator. This week I’m actually shifting my main focus from Microsoft Word tips and looking at website design. Last time I was on here for Hot Tip Tuesday I talked about styles and how to use your style sheet in Microsoft Word. Today we’re going to look at a similar thing but this time for your website.

One problem in talking you through this is that there are so many different ways to build websites. It’s going to be hard to visually show you examples of what I mean for everything but we can still do this. Our Hot Tip Tuesday site is built in WordPress and it’s one of the most popular platforms for us artists to make things in. That is what I’m going to be using today to show you things. Just so you know if you’re not using WordPress that principles that I’m going to talk over are still really relevant and even though things might look a bit different in your world. Keep all of this in mind because it’s really important.

Styles, when we look at the Word document in my last tip we had Heading 1, Heading 2, Paragraph or Normal or Body Text. These things also actually exist in website land. We talked last time about how making these things Heading 1 and Heading 2 not just aesthetic but also functional and this is really relevant for websites.

Let’s look at an example of some pages in our Hot Tip Tuesday site. This text has been marked as Heading 1. This text has been marked as Heading 3 not Heading 2 for reasons, just trust me and this text is paragraph text or body text. Why is it important to mark all of these things out? Take a look at the front page of our website. We have so many Hot Tips. At this stage we’re like over 120 or something. Each Hot Tip is actually a different page so by making sure that everything is labelled correctly as heading one or paragraph text. I know that it’s going to look the same on every page. It’s going to be consistent and that is really important for good web design.

I’ve told WordPress like I said in your case it might be a different website building platform in the backend which bits of the page I watch. This is what the text editor for WordPress looks like. Just like in word I can highlight part of the page and then use the style dropdown to set it to what it should be.

On the aesthetics of things there’s a lot we could talk about in terms of good website design but a couple of the best practices to keep in mind, pick one or two highly colors and generally stick to them. Pick up to two fonts and stick to them. Also dont assume you’ll always remember everything that you have chosen because you’re like oh yes, I totally got this. Then in a few months’ time you’re running around trying to figure out what it was that you did. My suggestion is to make a little notepad or Word document on your computer and just write the fonts and the colors that you’re using and save it somewhere you can refer back to.

The way to note down colors, there’s a few different ways that you can write them down but hex color is the most commonly used by website builders. What the hell is hex color? That’s all right. I’ll go over it. Hex color codes are the # symbol followed by six characters. When you’re looking around for things that is what you’re looking for. For example black is always #000000 and white is always #FFFFFF. There’s going to be all kinds of different combinations for different colors.

How you find the color codes and all of that hit me up in the comments and I’ll talk you through your specific situation because it’s going to be different for everyone so I can’t go over it all but like I said, style sheets isn’t just thinking about aesthetics it’s also functional.

Do you know much about website SEO? It’s okay if you dont. Just know that Google and other search services really like websites that have clearly defined headings and paragraph text. If you design your site well your website will appear more often when people are searching for things that are like you. I think I’ll ask Craig to do a Hot Tip about this sometime in the future and talk more about what SEO is and how to make your website rank better. When it comes to all of this I know a little bit but he knows a lot so let’s leave that to him.

That’s it. That’s my Hot Tip for this week. Leave me a comment with any questions that you have or suggestions or other things that you would like me to go over and make sure you subscribe to our Hot Tips and check out our website at

Share with:


Leave a Reply

Your email address will not be published. Required fields are marked *