Skip to main content

Styling HTML Elements

Styling HTML​

Styling in HTML is done using Cascading Style Sheets (CSS), which is a separate language used to describe the presentation of HTML documents. Here are some common ways to style HTML elements using CSS:

  1. Inline styles
  2. Internal styles
  3. External styles

Before we look at the different ways to style HTML, let's take a look at the different types of CSS properties.

CSS Properties​

CSS properties are used to define the look and feel of an HTML element. There are many CSS properties, and they can be used to define the following:

  • Colors (background, text, border, etc.) i.e. color: red, background-color: blue, border-color: green
  • Fonts (size, family, weight, etc.) i.e. font-size: 20px, font-family: Arial, font-weight: bold
  • Borders (width, style, color, etc.) i.e. border-width: 1px, border-style: solid, border-color: red
  • Layout (position, size, margin, padding, etc.) i.e. position: absolute, width: 100px, height: 100px, margin: 10px, padding: 10px
  • Transitions (animation, duration, timing, etc.) i.e. transition: all 1s ease, transition-duration: 1s, transition-timing-function: ease
  • Transformations (rotate, scale, translate, etc.) i.e. transform: rotate(45deg), transform: scale(2), transform: translate(10px, 10px)
  • Display (visibility, opacity, etc.) i.e. display: none, opacity: 0.5
  • And many more...

Inline Styles​

Inline styles are used to apply a unique style for a single HTML element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

The following example uses inline styles to change the color and font of a paragraph:

index.html
<p style="color: red; font-size: 20px;">This is a paragraph.</p>

This will produce the following result:

This is a paragraph.

` }} border="1" style={{border: "1px solid black", padding: "10px", color: "black", backgroundColor: "white"}}/>

Internal Styles​

Internal styles are used to define styles for a single HTML page. To use internal styles, add the <style> element inside the <head> element of the page. The <style> element can contain any CSS property.

The following example uses internal styles to change the color and font of a paragraph:

index.html
<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: red;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>This is a paragraph.</p>
  </body>
</html>

This will produce the following result:

This is a paragraph.

` }} border="1" style={{border: "1px solid black", padding: "10px", color: "black", backgroundColor: "white"}}/>

External Styles​

External styles are used to define styles for a group of HTML pages. To use external styles, create a separate CSS file with a .css extension and add the <link> element inside the <head> element of the page. The <link> element must have a rel="stylesheet" attribute to define it as an external style sheet.

The following example uses external styles to change the color and font of a paragraph:

index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>This is a paragraph.</p>
  </body>
</html>
styles.css
p {
  color: red;
  font-size: 20px;
}

This will also produce the same result as the previous example

This is a paragraph.

` }} border="1" style={{border: "1px solid black", padding: "10px", color: "black", backgroundColor: "white"}}/>

CSS Selectors​

CSS selectors are used to "find" (or select) the HTML elements you want to style. There are many types of selectors. Here are some common selectors:

  1. The * selector selects all elements
  2. The p (tag) selector selects all <p> elements
  3. The #intro (id) selector selects the element with id="intro"
  4. The .intro (class) selector selects all elements with class="intro"
  5. The h1, h2, h3 selector selects all <h1>, <h2>, and <h3> elements
  6. The div p selector selects all <p> elements inside <div> elements
  7. The div > p selector selects all <p> elements where the parent is a <div> element
  8. The div + p selector selects all <p> elements that are placed immediately after <div> elements
  9. The [target] selector selects all elements with a target attribute

The * Selector​

* {
  color: red;
  font-size: 20px;
}

It will select all elements on the page and apply the style to them.

caution

It is possible to use the * selector to select all elements on a page. However, this is not recommended, because it will slow down the page.

The p (tag) Selector​

p {
  color: red;
  font-size: 20px;
}

It will select all <p> elements on the page and apply the style to them.

The #intro (id) Selector​

#intro {
  color: red;
  font-size: 20px;
}

# is used to select elements with a specific id. Here, the id of the element is intro. It will select the element with id="intro" and apply the style to it.

note

id is a unique identifier for an element. It is used to identify a single element. The value of the id attribute must be unique within the HTML document.

The .intro Class Selector​

.intro {
  color: red;
  font-size: 20px;
}

. is used to select elements with a specific class. Here, the class of the element is intro. It will select all elements with class="intro" and apply the style to them.

class is very common in HTML and CSS. It is used to identify elements with the same properties. The value of the class attribute can be used on multiple elements.

tip

Above I showed you the basic selectors, now I will show you the combination of selectors.

The h1, h2, h3 Selector​

h1,
h2,
h3 {
  color: red;
  font-size: 20px;
}

It will select all <h1>, <h2>, and <h3> elements on the page and apply the style to them.

note

You can also use any other selector in place of h1, h2, h3.

h1,
h2,
h3,
p,
div {
  color: red;
  font-size: 20px;
}

The div p Selector​

div p {
  color: red;
  font-size: 20px;
}

It will select all <p> elements inside <div> elements on the page and apply the style to them.

The div > p Selector​

div > p {
  color: red;
  font-size: 20px;
}

It will select all <p> elements where the parent is a <div> element on the page and apply the style to them.

The div + p Selector​

div + p {
  color: red;
  font-size: 20px;
}

It will select all <p> elements that are placed immediately after <div> elements on the page and apply the style to them.

The [src] Selector​

[src] {
  color: red;
  font-size: 20px;
}

It will select all elements with a src attribute on the page and apply the style to them.

note

You can also use any other attribute in place of src.

[src],
[href],
[target] {
  color: red;
  font-size: 20px;
}

CSS Colors​

CSS colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, or HSLA values.

p {
  color: red;
}

RGB - Red, Green, Blue

p {
  color: rgb(255, 0, 0);
}

HEX - Hexadecimal

p {
  color: #ff0000;
}

HSL - Hue, Saturation, Lightness

p {
  color: hsl(0, 100%, 50%);
}

RGBA - Red, Green, Blue, Alpha

p {
  color: rgba(255, 0, 0, 0.5);
}

HSLA - Hue, Saturation, Lightness, Alpha

p {
  color: hsla(0, 100%, 50%, 0.5);
}

CSS Backgrounds​

The background of an element is the total size of the element, including padding and border (but not the margin).

The following example uses the background-color property to specify the background color of a paragraph:

p {
  background-color: red;
}

background-image property is used to specify an image as the background of an element.

p {
  background-image: url("img_tree.png");
}

background-repeat property is used to specify whether the background image will be repeated, and how.

p {
  background-repeat: repeat-x;
}

The following example uses the background-attachment property to specify whether the background image is fixed or scrolls with the rest of the page:

p {
  background-attachment: fixed;
}

The following example uses the background-position property to specify the starting position of a background image:

p {
  background-position: right top;
}

The following example uses the background property to specify all the background properties in one declaration:

p {
  background: url("img_tree.png") no-repeat right top;
}

CSS Borders​

The border of an element is the border that goes around the padding and content of the element.

The following example uses the border-style property to specify the style of the border:

p {
  border-style: solid;
}

The following example uses the border-width property to specify the width of the border:

p {
  border-width: 5px;
}

The following example uses the border-color property to specify the color of the border:

p {
  border-color: red;
}

The following example uses the border property to specify all the border properties in one declaration:

p {
  border: 5px solid red;
}

CSS Margins​

The margin of an element is the space outside the border of an element.

The following example uses the margin property to specify the margin of a paragraph:

p {
  margin: 50px;
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
}

margin: 50px 100px 150px 200px is equivalent to:

margin-top: 50px;
margin-right: 100px;
margin-bottom: 150px;
margin-left: 200px;

CSS Padding​

The padding of an element is the space between the border of the element and its content.

The following example uses the padding property to specify the padding of a paragraph:

p {
  padding: 50px;
}

padding: 50px 100px 150px 200px is equivalent to:

padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;

CSS Height & Width​

The height and width properties are used to set the height and width of an element.

The following example uses the height property to specify the height of a paragraph:

p {
  height: 100px;
}

The following example uses the width property to specify the width of a paragraph:

p {
  width: 100px;
}

CSS Outline​

The outline of an element is a line that is drawn around an element, outside the border.

The following example uses the outline property to specify an outline for a paragraph:

p {
  outline: 5px solid red;
}

CSS Text​

The following example uses the color property to specify the color of the text:

p {
  color: red;
}

The following example uses the text-align property to specify the horizontal alignment of text:

p {
  text-align: center;
}

The following example uses the text-decoration property to specify the decoration of text:

p {
  text-decoration: underline;
}

The following example uses the text-transform property to specify the capitalization of text:

p {
  text-transform: uppercase;
}

The following example uses the letter-spacing property to specify the space between characters:

p {
  letter-spacing: 3px;
}

The following example uses the word-spacing property to specify the space between words:

p {
  word-spacing: 30px;
}

The following example uses the line-height property to specify the space between lines:

p {
  line-height: 30px;
}

CSS Fonts​

The following example uses the font-family property to specify the font for a paragraph:

p {
  font-family: "Times New Roman", Times, serif;
}

The following example uses the font-size property to specify the size of the text:

p {
  font-size: 20px;
}

The following example uses the font-style property to specify the style of the text:

p {
  font-style: italic;
}

Conclusion​

CSS is a language for describing the presentation of Web pages, including colors, layout, and fonts. This doc has covered the most important properties and selectors. There are many more properties and selectors in CSS, but you can learn about them later.