How to Design Your Website with Style

As you’ve been building your websites, you’ve learned to use HTML to give it structure. You’ve learned to define headings, lists, paragraphs and images to make your website look the way you want. But usually just giving a website structure isn’t enough. You want to give it style to fully bring the content to life. The same website about fitness could have a sleek and simple style or a quirky and eclectic style and each would feel different to your user.

CSS

Web developers can control the style of a webpage using a language called CSS. CSS stands for cascading style sheets. CSS allows a web developer to define a specific set of style rules to apply to HTML elements on the page. Here’s how you can use CSS to create style rules for a simple webpage about fitness.

Style Rules

First you’ll write the CSS to turn all the paragraph text purple. To indicate that you want to apply a set of rules to all the paragraph elements, you write the name of the tag “p”, followed by an open, and then a close curly brace. Developers refer to a “p” here as the selector. The selector indicates the type of element that the style rule will apply to. Next, you need to indicate what about the paragraph you’d like to change. In this case, you want to change the color of the paragraph text.

This part of the rule is called a property. A property is followed by a colon. Finally you need to specify the value you want for that property. To make the paragraph purple, add the word “purple” after the property and finally add a semicolon to indicate the end of the style rule. The CSS that you just wrote is called a “Rule Set” because like the name implies, it’s a set of rules to specify a style for the selected element.

Multiple Properties

You can add multiple properties value pairs to the same selector to further control the style of our web pages paragraph elements. If you want these paragraphs to be purple and large, you can add the font size property to control the text size. Then specify a number value to set how large the font will be. Bulma CSS allows for all sorts of style rules and is easy to use. Fonts, positioning, size and colors—the more style rules you learn, the more you can make your web page tell the story you want.

Define Classes in CSS

Now that you have a basic understanding of style commands, you can learn how to define style classes that can be used throughout your document. This allows you to define a style once and use it repeatedly. The first step is to add page. These belong inside the section of your document. To define a style class for a tag, you can simply use the name of the tag itself and add curly braces to define the list of commands you will use to modify that tag. Whenever you use this method, the style commands you include in the list will apply to every instance of that tag in your page.

You can also define a custom class that only applies when it is invoked. Just like the style attribute, you can list out any number of style commands within a single definition. You can invoke the custom classes you define within the page by using the class attribute. This attribute can be applied to any tag and it will confer the properties assigned in the definition. In this case, the tag will not have any text decorations on the links within it.

Bottom Line

The main thing to keep in mind for your design is the real estate of a web page. The top left corner has the highest visibility, followed by the top of the page and the left side of the site. This is where you should concentrate your branding, which is how an audience identifies your page or your site.