Did you know that when you format your text in WordPress you may be adding or changing the CSS in your page? CSS stands for “cascading style sheets”. This computer language is responsible for making your webpage look pretty! This includes changing fonts, colors, and spacing. CSS is made up of 2 parts:
- Selector – which identifies what to style.
- Declaration Block – which defines how to style it. These are made up of a property and a value.
Coloring Headings & Paragraphs
By default, the text within paragraphs and headings are black. In order to change this, identify which part of your HTML code that you would like to stylize (such as p or h4). Then, define how to style it in your CSS code using the property color: followed by any color of your choice and a semicolon. This could look something like:
This Heading is Orange
This text is pink.
h4{
color: orange;
}
p {
color: pink;
}
This Heading is Orange
This text is pink.
In this example, h4 and p are the selectors, color: is the property, and orange; and pink; are the values.
Stylizing Specifics
Sometimes, you may want only part of a paragraph to be styled. This can be done by adding classes into your HTML code. To do this, add <span class=”name of your choice”> before the section of text you wish to stylize and </span> where you want these stylizations to end. In your CSS code, use the selector .name of your choice { followed by any declaration blocks that you wish to be applied to that section of text. Some properties that you can use are color:, font-weight:, and text-transform:. All together, this would look like:
This is a very long paragraph of text. This sentence is important, so it is green and bold. This sentence is not.
HTML
<p> This is a very long paragraph of text. <span class=”important”>This sentence is important, so it is green and bold.</span> This sentence is not.
</p>
CSS
}
.important {
color: green;
font-weight: bold;
}
This is a very long paragraph of text. This sentence is important, so it is green and bold. This sentence is not.
More About Colors and Images
There are only a handful of named colors that are recognized by CSS. You can find those here. In order to apply any other color to your website, you’ll need to identify them using hex codes. You can use sites like canva or color-hex to explore and generate color palettes with corresponding hex codes. To apply these colors, just insert the hex code as a value in place of a named color, as shown in the examples above.
In addition to changing text color, you can also change the background of your text or entire webpage. In order to do this, as usual, first identify which part of your HTML code that you would like to color. To change the entire background, use body. Then, define how to style it in your CSS code using the property background-color: followed by any named color or hex code of your choice. This could look something like:
This Heading has a Light Purple Background
This text in this paragraph is dark indigo. The entire background of this page is a shade of yellow.
CSS
h4 {
background-color: #D4BBDD;
}
p {
color: #5E376D;
}
body {
background-color: #F7E951;
}
This Heading has a Light Purple Background
The text in this paragraph is dark indigo. The entire background of this webpage is a shade of yellow.
Trackbacks/Pingbacks