How to Make Design Changes in CSS (Cascading Style Sheets)

Christopher Doyle • January 2, 2024

A website is one of the first things users or customers will look for when researching your business.

Your website's design can either catch a user's attention or drive them away. Creating a visually cohesive and user-friendly site is essential to guaranteeing a successful website user experience.

Cascading Style Sheets (CSS) is a language that applies visual design styles across HTML elements. The benefit of using CSS is time it can save you. Rather than manually adding style attributes to individual HTML elements, CSS allows you to apply styles across elements on your site with just a few lines of code. You can use CSS to adjust the design across your websites on WordPress, Duda, Squarespace, and more.

For example, let's say we want all of your H1 tags to be bolded, 18pt font, and blue. You can quickly implement that new design across all H1 tags with CSS code. You can also changes other style elements such as background colors, margins, padding, and more. See the examples below.

Let's say we want all paragraph elements to use a royal blue text and to be aligned to the left. To do this, we would start with identify the tag we want to design for, which is p.

Next, we can add styles to them. In this case, we would use color for text color and text-align for the alignment. Make sure to add a semicolon between each line. Now, your paragraph elements will look like this:

This text is blue and left aligned on a white background

In this next example, you have a button and want to adjust the text to be maroon. You also want to change the background color to be pink and round the corners, while also adding some padding. Just like with the last example, we'll start by identify the element we want to style, which is button in this case.

Next, add the styles, and see how your button design has changed.