Lesson: Your First Styled Webpage

CSS is defined by a collection of style properties. To style an HTML element, you use the attribute “style”. The value of this attribute consists of one or more styling properties defined by “property:value;” as demonstrated in the example below. Note that you can add the style attribute to any html element.

The example below depicts the use of multiple styling properties for one HTML element.

Adding the style as attribute for an HTML element is refered to as inline style (more on that in the next lesson).

1. Default Style

All HTML elements have some default style. For example, paragraphs are in black, h1 headings have large fonts and links are underlined. Using CSS allows us to overwrite the default style of elements.

2. Adding Color

One example of style property is color. There is a range of CSS colors that are supported by all browsers. To add color to a paragraph element you need to use the style attribute and define the desired color as demonstrated in the code below.

The code below renders a green heading.

2. Background Color

A link path should be defined in the href attribute as disccused in the previous section. A path can either be absolute (full web address with https://www….) or relative (without https://www…). In most cases, an absolute path is used to link to resources provided by other websites whereas relative path is used to link pages within the same website. An example of absolute and relative path is provided below.

5. Putting it all Together

The code above will generate the output below on any web browser.

5. HTML Links Practice

Time to put yourself to test with these HTML Brealine practice exercises.

5. It’s Good to Know!

• list of html elements
• list of IDEs