Styling Semantic HTML

HTML is the language used to structure web pages, and semantic HTML is an essential part of web development.

Alexander Juul Jakobsen

WordPress Developer for over 10 years

---

Semantic HTML helps developers create well-structured, accessible, and maintainable web pages. To make these pages visually appealing, developers must be styling semantic HTML using CSS.

CSS is a styling language that allows developers to control the visual appearance of web pages. By using CSS, you can enhance the semantic meaning of HTML elements, making them easier to read and understand. In this post, we will explore how to style semantic HTML elements using CSS.

Styling Semantic HTML

Headings

Headings are essential for structuring content on web pages. HTML provides six levels of headings, from <h1> to <h6>. Each level has a specific semantic meaning, and developers should use them accordingly. To style headings, developers can use the font-size property to adjust the size of the text, and the font-weight property to control the boldness of the text. For example, the following CSS code styles all the headings on a page:

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

Links

Links are essential for navigating web pages. HTML provides the <a> element to create links. To style links, developers can use the color property to adjust the color of the link, the text-decoration property to add or remove underlines, and the hover pseudo-class to change the style of the link when the mouse hovers over it. For example, the following CSS code styles links on a page:

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Lists

Lists are used to organize content on web pages. HTML provides two types of lists, ordered and unordered. To style lists, developers can use the list-style-type property to control the style of the list markers, and the padding property to adjust the spacing between the list markers and the list items. For example, the following CSS code styles an unordered list:

ul {
  list-style-type: disc;
  padding-left: 2rem;
}

li {
  margin-bottom: 0.5rem;
}

Other Elements

Semantic HTML provides many other elements, such as <p>, <div>, <span>, and <article>. To style these elements, developers can use CSS properties such as background-color, border, padding, and margin. For example, the following CSS code styles a <article> element:

article {
  background-color: lightgray;
  border: 1px solid black;
  padding: 1rem;
  margin-bottom: 1rem;
}

Styling semantic HTML elements using CSS is an essential part of web development. By using CSS properties such as font-size, color, and list-style-type, developers can enhance the semantic meaning of HTML elements and make them visually appealing. Remember to use semantic HTML appropriately, and use CSS to enhance the visual appearance of web pages.