Cascading Style Sheet (CSS) property options have expanded continually over the years so that there are now hundreds to choose from. For a complete list, see W3Schools. However, like HTML tags, there are only about a dozen that you will use regularly. In this chapter, we'll just apply these to the style attribute of an HTML element to see their effects.

background

Set a background color using a common color name:

<p style="background: pink;">An example paragraph.</p>

An example paragraph.

Set a background color using rgba notation:

<p style="background: rgba(200,200,200,1);">An example paragraph.</p>

An example paragraph.

Set a background color using hexadecimal notation:

<p style="background: #e5e5e5;">An example paragraph.</p>

An example paragraph.

color

Set the font color of text using a common color name:

<p style="color: blue;">An example paragraph.</p>

An example paragraph.

Set the font color of text using rgba notation:

<p style="color: rgba(40, 40, 220, 1);">An example paragraph.</p>

An example paragraph.

Set the font color of text using hexadecimal notation:

<p style="color: #2222ee;">An example paragraph.</p>

An example paragraph.

font-family

Set the font of the element:

<p style="font-family: Courier, 'Times New Roman'; background: pink;">An example paragraph.</p>

An example paragraph.

Please note that the font-family property can include multiple values separated by a comma. This is done so that if a user's browser does not have the desired font installed, it will revert to using the next identified font. Also notice that Times New Roman is in a single quote. This is done because that font name has spaces within it, which would otherwise confuse the value.

height and width

Set the size of the element:

<p style="height: 80px; background: pink;">An example paragraph.</p>

An example paragraph.

<p style="height: 80px; width: 50%; background: pink;">An example paragraph.</p>

An example paragraph.

float

Set the alignment of an element on the page. This is useful for creating columns, inset images, and so forth.

Float an image to the right of a block of text:

<img src="https://edtechbooks.org/content_images/elearning_hacker/rickroll_4k.jpg" style="width: 50%; float: right;" class="img-fluid">
<p>An example paragraph. An example paragraph. An example paragraph. An example paragraph. An example paragraph. An example paragraph. An example paragraph. An example paragraph.</p>
<p style="clear: both;"></p>

An example paragraph. An example paragraph. An example paragraph. An example paragraph. An example paragraph. An example paragraph. An example paragraph. An example paragraph.

Please note that the float will not stop on its own. Rather, you need to include an element after the floated object that includes the property-value pair clear: both; to prevent subsequent elements from being affected by the float. Options include left or right.

padding

Padding represents the amount of space between the edge of an element and the text or other content inside it.

Set the padding of all four edges:

<p style="padding: 40px; background: pink;">An example paragraph.</p>

An example paragraph.

Set the padding of the y-edges and x-edges separately:

<p style="padding: 20px 40px; background: pink;">An example paragraph.</p>

An example paragraph.

Set the padding of each edge separately, moving clockwise:

<p style="padding: 10px 20px 30px 40px; background: pink;">An example paragraph.</p>

An example paragraph.

margin

Margin represents the amount of space between an element and its surrounding or parent element.

Set the margin of all four edges:

<p style="margin: 40px; background: pink;">An example paragraph.</p>

An example paragraph.

Set the margin of the y-edges and x-edges separately:

<p style="margin: 20px 40px; background: pink;">An example paragraph.</p>

An example paragraph.

Set the margin of each edge separately, moving clockwise:

<p style="margin: 10px 20px 30px 40px; background: pink;">An example paragraph.</p>

An example paragraph.

text-align

Set the horizontal alignment of an element:

<p style="text-align: center;">An example paragraph.</p>

An example paragraph.

Options include left, right, center, and justify.

border

Set the border size, color, and type of the element:

<p style="border: 1px black solid;">An example paragraph.</p>

An example paragraph.

Do the same with a larger, dashed border:

<p style="border: 4px pink dashed;">An example paragraph.</p>

An example paragraph.

Please note that borders are heavily overused and introduce unnecessary complexity and cognitive load. So, only use borders when they are necessary.

border-radius

Make all the corners of the element rounded:

<p style="border-radius: 10px; padding: 8px 16px; height: 80px; background: pink;">An example paragraph.</p>

An example paragraph.

Make each corner rounded in different amounts, moving clockwise:

<p style="border-radius: 10px 20px 30px 0; padding: 8px 16px; height: 80px; background: pink;">An example paragraph.</p>

An example paragraph.