HTML Styles course lesson

Web design is a realm of boundless creativity, and the power to bring unique styles to life is at your fingertips. With HTML, you have the ability to transform the appearance of web elements, from the colors and fonts to the overall layout and visual effects. By mastering the art of applying styles in HTML, you'll unlock the potential to create visually captivating and personalized web designs.

Delve into the fundamentals of applying styles to HTML elements. You'll learn how to customize text and background colors, adjust font properties, and even explore techniques for crafting responsive layouts that adapt gracefully to different screen sizes. By understanding the principles behind styling in HTML, you'll gain the skills needed to create aesthetically pleasing and cohesive web experiences that resonate with your audience.

Exercise #1

HTML and CSS

HTML is a markup language that allows us to create and structure web content. However, its limitations were apparent even in the early days of the internet — no means to style the content, except for some basic text and background colors. So a new markup language was invented to be used alongside HTML — CSS, short for Cascading Style Sheets. It's called "cascading" because when a style is applied to one element, it automatically applies to all the elements nested inside it.

Nowadays, we use both HTML and CSS to create webpages — to structure and style content, respectively. CSS allows us to control text color, font, size, the spacing between elements, elements' position and layout, background images, colors, how the website looks on different devices and screen sizes, and more.^[1]

Exercise #2

Using CSS

There are 3 different ways to add CSS to an HTML document:

• Inline style uses the style attribute inside HTML elements

• Internal style uses a <style> element in the <head> section

• External style uses a <link> element to link to an external CSS file^[2]

The most common way is to use external styles, which we'll cover in a separate course. In this lesson, we'll cover inline styles as they're easier to demonstrate and can give you a good taste of CSS.

Exercise #3

Text alignment

Now that you understand a bit about inline CSS style syntax, let's take a look at examples.

Let's say you want to set a paragraph's alignment to be centered by default. The text is usually aligned either to the left or the right depending on the language's default script direction. Use the property text-align and choose the value center. left and right are the other possible values of this property.

Exercise #4

The style attribute syntax

Writing code gives the browser commands about how to display your content. When applying an inline CSS style to an element, you need to communicate 3 things to the browser:

• The fact that you wish to change the element's style

• What style property you want to change

• What value of the property you wish to set

Technically, you can write it out in the following way. In the start tag, add an attribute style followed by an equals sign (=). Next, describe the property you want to set in the following order:

1. Open quotation marks

2. Indicate the property (for example, color)

3. Put a colon

4. State the property's value (for example, blue)

5. Put a semicolon

6. Close the quotation marks

Pro Tip: Make sure not to miss any of the punctuation signs — without them, browsers won't be able to display your page correctly!

Exercise #5

Text color

By default, browsers display the entire text as black unless stated otherwise. To change your text color, add the attribute style to the text element tag, followed by an equals symbol (=), and use the property color.

There are 3 different ways you can set a color:

• By name — for example, "blue" or "crimson"

• By hex value — for example, #0000FF

• By RGB value — for example, rgb(0, 0, 255)

While there are over 140 color names that all browsers support,^[3] a more professional approach is to use the hex or RGB values.

Exercise #6

Background color

The default background color is transparent, meaning that most browsers will use a white background if you don't specify otherwise anywhere on the page.

You can apply the background-color property to pretty much any element: set the page background in the <body> element, or set the text background in text elements like <h1>. Similar to adjusting text color, you can use different types of values to set the background color: color name (orange), hex value (#FFA500) or RGB value (rgb(255, 165, 0)).

Exercise #8

Font family

If you don't specify the typeface, aka font family of your text, browsers will use the default one. Default typefaces depend on the browser and operating system. For example, in Google Chrome on Windows, it's Times New Roman. If you want to use a different typeface, apply the style attribute to the text tag and use the property font-family.

One way to set a typeface value is to use a specific font family name, like Arial, Verdana, and Tahoma. Another way is using one of the 5 generic CSS font names: serif, sans-serif, monospace, cursive, and fantasy. In that case, the browser will provide one font of the chosen category it supports.

Exercise #9

Padding

If we imagine that all HTML elements are encased in invisible boxes, the paragraph's padding would be the space between the textual content and the box border. By default, this space is zero, meaning that the border lies where the content ends. Some elements have extra space outside the border called the "margin" — for example, paragraphs and headings.

But what if you wanted to set custom space between the content and its border? You can totally do this by using the property padding inside the style attribute. Set the value of the padding you desire in pixels, and you're good to go!

Exercise #10

Border width, style, and color

By default, elements' borders are invisible. However, CSS allows you to specify border width, style, and color. The easiest way to change the element's border style is by using the border property. It's a shorthand that allows you to set all 3 properties at once.

You can set all 3 values inside the border property: width, style, and color. It doesn't matter if one of the values is missing. For example, to set a solid 1-pixel border around a section of a page, use the style attribute in the <div> tag with the value "border:1px solid;". If you don't specify the color, the border color will match the text color.

Exercise #11

The color property

The easiest way to set a color with CSS is using color names. However, this doesn't allow for flexibility because there are only about 140 supported colors, and any designer knows that's not nearly enough. A better option is to use hex or RGB color codes as they allow you to use over 16 million colors, which is a totally different ballgame.

Exercise #12

The font size property

Many CSS properties allow for different value types, and the font-size value is no different. The easiest way is to define your text's size is to use pixels px — an absolute unit that always remains the same no matter what.

But if you will be changing the document's default font size, you probably want all your elements to stay proportionate to one another. That's where relative units em and rem come into play, being equal to the font size of the parent and root element (<HTML>), respectively. For example, if you set a <h1 style=" font-size: 2rem;">, your headings will always be twice as big as the body text, no matter what text size you set on the document.

Exercise #13

The text-align property

If your default language uses a left-to-right script, the default alignment will be left. To change this, set the text-align value to the right.

Other values this property can take are center, which centers the text, and justify, which stretches the lines so that they all have equal width, like in a newspaper.

Exercise #14

The background color property

You can apply the background-color property to pretty much any element, not just text. Using this property in the <body> tag will set the background color for the entire page.

Remember how HTML elements are similar to boxes? Setting the background color for an element will change the color of its whole box, including the borders.

Exercise #15

The padding property

CSS offers different ways to set padding size. If you are using the padding shorthand property with one value, it will set the same padding size for all 4 sides. For example, "padding: 25px;" will make padding on all sides 25 pixels.

However, there are ways to set different padding values for every side. You can write 4 values for the padding property that will respectively define the top, right, bottom, and left padding. For example, "padding: 25px 50px 75px 100px;". However, this method can get really confusing, so another option is to use individual padding properties "padding-top:25px;", "padding-right:50px;", "padding-bottom:75px;", and "padding-left:100px;".