Skip to content
Bootcamp C6

Common CSS Properties

Color

Section titled “Color”

You can use predefined colour names, RGB, RGBA, HSL or HSLA format for defining text, background or border colour.

Text Colour — color

Section titled “Text Colour — color”
<p style="color: tomato;">
  Lorem ipsum dolor sit amet consectetur adipiscing elit facilisi cum malesuada
  accumsan
</p>
<p style="color: dodgerblue;">
  Tortor tellus facilisis tristique dapibus vehicula sociis iaculis dignissim
  augue interdum purus euismod fermentum natoque
</p>
Toggle me!

Lorem ipsum dolor sit amet consectetur adipiscing elit facilisi cum malesuada accumsan

Tortor tellus facilisis tristique dapibus vehicula sociis iaculis dignissim augue interdum purus euismod fermentum natoque

Background Colour — background-color

Section titled “Background Colour — background-color”
<h1 style="background-color:DodgerBlue; color: #fff">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Toggle me!

Hello World

Lorem ipsum…

Borders

Section titled “Borders”

The css border property is defines the border width, style and colour of an elements border. The border width and style are required to see any visual output

<p style="color: dodgerblue; border: 2px solid lemongreen;">
  Tortor tellus facilisis tristique dapibus vehicula sociis iaculis dignissim
  augue interdum purus euismod fermentum natoque
</p>
Toggle me!

Tortor tellus facilisis tristique dapibus vehicula sociis iaculis dignissim augue interdum purus euismod fermentum natoque

border-width

Section titled “border-width”

The border-width property specifies the width of the four borders.

<p style="color: dodgerblue; border-width: 4px; border-style: solid">
  Tortor tellus facilisis tristique dapibus vehicula sociis iaculis dignissim
  augue interdum purus euismod fermentum natoque
</p>
Toggle me!

Tortor tellus facilisis tristique dapibus vehicula sociis iaculis dignissim augue interdum purus euismod fermentum natoque

Specific side widths

Section titled “Specific side widths”
<style>
  p.one {
    border-style: solid;
    border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
  }


  p.two {
    border-style: solid;
    border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
  }


  p.three {
    border-style: solid;
    border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
  }


  p.four {
    border-style: solid;
    border-top-width: 10px;
    border-right-width: 20px;
    border-bottom-width: 30px;
    border-left-width: 5px;
  }
</style>
<p class="one">Metus orci ultrices tempor platea ut pharetra mus accumsan.</p>
<p class="two">Metus orci ultrices tempor platea ut pharetra mus accumsan.</p>
<p class="three">Metus orci ultrices tempor platea ut pharetra mus accumsan.</p>
<p class="four">Metus orci ultrices tempor platea ut pharetra mus accumsan.</p>
Toggle me!

Metus orci ultrices tempor platea ut pharetra mus accumsan.

Metus orci ultrices tempor platea ut pharetra mus accumsan.

Metus orci ultrices tempor platea ut pharetra mus accumsan.

Metus orci ultrices tempor platea ut pharetra mus accumsan.

border-style

Section titled “border-style”

The border-style property specifies the type of border to be used.

Most used ones are: solid, dotted, dashed, none

Other styles are - double, groove, ridge, inset, outset, hidden

<style>
  p.one {
    border-style: solid;
    border-color: red;
  }


  p.two {
    border-style: solid;
    border-color: green;
  }


  p.three {
    border-style: dotted;
    border-color: blue;
  }
</style>
<body>
  <h2>The border-color Property</h2>
  <p>This property specifies the color of the four borders:</p>


  <p class="one">A solid red border</p>
  <p class="two">A solid green border</p>
  <p class="three">A dotted blue border</p>


  <p>
    <b>Note:</b> The "border-color" property does not work if it is used alone.
    Use the "border-style" property to set the borders first.
  </p>
</body>
Toggle me!

A solid red border

A solid green border

A dotted blue border

Note: The “border-color” property does not work if it is used alone. Use the “border-style” property to set the borders first.

border-radius

Section titled “border-radius”

This property adds a degree of roundness to the borders of an element

<style>
  p.one {
    border-style: solid;
    padding: 15px;
    border-color: red;
    border-radius: 5px;
  }


  p.two {
    border-style: solid;
    padding: 15px;
    border-color: green;
    border-radius: 10px 20px;
  }


  p.three {
    border-style: dotted;
    padding: 15px;
    border-color: blue;
    border-radius: 24px;
  }
</style>
<body>
  <h2>The border-color Property</h2>
  <p>This property specifies the color of the four borders:</p>


  <p class="one">A solid red border</p>
  <p class="two">A solid green border</p>
  <p class="three">A solid purple border</p>


  <p>
    <b>Note:</b> The "border-color" property does not work if it is used alone.
    Use the "border-style" property to set the borders first.
  </p>
</body>
Toggle me!

A solid red border

A solid green border

A dotted purple border

Note: The “border-color” property does not work if it is used alone. Use the “border-style” property to set the borders first.

Fonts

Section titled “Fonts”

We use fonts to determine how texts appear on a webpage and choosing the right font is important for setting the tone and user experience.

font-family

Section titled “font-family”

This is used to specify the font name and fallbacks

.p1 {
  font-family: "Times New Roman", Times, serif;
}
  • “Times New Roman” - This is the preferred font and the browser will try to get it from the users computer or external source (if specified)
  • Times and Serif - These are fallbacks fonts to be used if the preferred font is unavailable.

font-size

Section titled “font-size”

This property sets the text size. We use font sizes to differentiate between different types of texts such as headings and paragraphs.

font-size can take absolute (fixed) or relative (depends on surrounding elements) values.

The default font size for normal texts like paragraph is 16px

Default font sizes

Section titled “Default font sizes”

The default font-size for normal is 16px and this is the base used for defining other elements default font size

ElementCSS Font SizeCalculated Font Size (Assuming base 16px)
body16px16px
h12em32px (2 * 16px)
h21.5em16px (1.5 * 16px)
h31.17em18.72px (1.17 * 16px)
h41em16px (1 * 16px)
h50.83em13.28px (0.83 * 16px)
h60.67em10.72px (0.67 * 16px)
p1em16px (1 * 16px)
small0.8em12.8px (0.8 * 16px)
strong, b, em, i1em16px (1 * 16px)
blockquote1.17em18.72px (1.17 * 16px)
ul, ol, li1em16px (1 * 16px)

We will get more familiar with relative and absolute units as move on in the curriculum.

Text

Section titled “Text”

color

Section titled “color”

We use the color property to specify text colour

background-color

Section titled “background-color”

This property specifies the background colour of the text

text-align

Section titled “text-align”

The text-align property is used to set the horizontal alignment of a text. The default is left

<style>
  h1 {
    text-align: center;
  }


  p {
    text-align: right;
  }


  #second {
    text-align: justify;
  }
</style>


<h1>This is heading 1</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipiscing elit facilisi cum malesuada
  accumsan
</p>
<p id="second">
  Tortor tellus facilisis tristique dapibus vehicula sociis iaculis dignissim
  augue interdum purus euismod fermentum natoque.
  Eleifend consequat curae metus lectus parturient sodales est praesent justo, vivamus dictum vulputate aliquam egestas convallis porttitor in, tincidunt arcu vitae litora taciti leo posuere suscipit.
</p>
Toggle me!

This is heading 1

Lorem ipsum dolor sit amet consectetur adipiscing elit facilisi cum malesuada accumsan

Tortor tellus facilisis tristique dapibus vehicula sociis iaculis dignissim augue interdum purus euismod fermentum natoque. Eleifend consequat curae metus lectus parturient sodales est praesent justo, vivamus dictum vulputate aliquam egestas convallis porttitor in, tincidunt arcu vitae litora taciti leo posuere suscipit.

text-decoration

Section titled “text-decoration”

The text-decoration property is a shorthand for 4 properties:

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness

Here are simple examples to explain how the text-decoration property works as a shorthand for its four sub-properties:

1. text-decoration-line

Section titled “1. text-decoration-line”

This defines what type of text decoration is applied, like underline, overline, or line-through.

Example:

<p style="text-decoration-line: underline;">This text is underlined.</p>
Toggle me!

This text is underlined.

2. text-decoration-color

Section titled “2. text-decoration-color”

This sets the color of the text decoration (underline, overline, etc.).

Example:

<p style="text-decoration-line: underline; text-decoration-color: red;">
  This text has a red underline.
</p>
Toggle me!

This text has a red underline.

3. text-decoration-style

Section titled “3. text-decoration-style”

This defines the style of the text decoration line (solid, dotted, dashed, etc.).

Example:

<p style="text-decoration-line: underline; text-decoration-style: dotted;">
  This text has a dotted underline.
</p>
Toggle me!

This text has a dotted underline.

4. text-decoration-thickness

Section titled “4. text-decoration-thickness”

This specifies the thickness of the text decoration line.

Example:

<p style="text-decoration-line: underline; text-decoration-thickness: 3px;">
  This text has a thick underline.
</p>
Toggle me!

This text has a thick underline.

Combining with Shorthand: text-decoration

Section titled “Combining with Shorthand: text-decoration”

The text-decoration property can combine all four properties into a single declaration.

Example:

<p style="text-decoration: underline red dotted 3px;">
  This text has a red, dotted, thick underline.
</p>
Toggle me!

This text has a red, dotted, thick underline.

This shorthand example applies:

  • underline (line),
  • red (color),
  • dotted (style),
  • 3px (thickness).

This simplifies applying multiple text decoration styles in one line.

Margin

Section titled “Margin”

The margin property is a shorthand for four individual margin properties that control the space outside an element’s border. These properties are:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

margin-top

Section titled “margin-top”

Defines the space at the top of an element.

Example:

<div style="margin-top: 20px;">This div has a 20px margin on top.</div>
Toggle me!
This div has a 20px margin on top.

margin-right

Section titled “margin-right”

Sets the space on the right side of an element.

Example:

<div style="margin-right: 30px;">This div has a 30px margin on the right.</div>
Toggle me!

This div has a 30px margin on the right.

margin-bottom

Section titled “margin-bottom”

Specifies the space at the bottom of an element.

Example:

<div style="margin-bottom: 15px;">
  This div has a 15px margin at the bottom.
</div>
Toggle me!

This div has a 15px margin at the bottom.

margin-left

Section titled “margin-left”

Defines the space on the left side of an element.

Example:

<div style="margin-left: 25px;">This div has a 25px margin on the left.</div>
Toggle me!

This div has a 25px margin on the left.

Combining with Shorthand: margin

Section titled “Combining with Shorthand: margin”

The margin property allows you to set all four margins in one declaration. You can specify different values for top, right, bottom, and left, or use a single value to apply to all sides.

Examples:

All sides the same:

<div style="margin: 10px;">This div has a 10px margin on all sides.</div>
```


<details>
    <summary>Toggle me!</summary>
    <HtmlOutput>
        <div style={{ margin: "10px", border: "2px solid dodgerblue" }}>
            This div has a 10px margin on all sides.
        </div>
    </HtmlOutput>
</details>


**Vertical (top and bottom) and horizontal (left and right) margins:**


```html
<div style="margin: 20px 30px;">
    This div has 20px top and bottom, and 30px left and right margins.
</div>
Toggle me!

This div has 20px top and bottom, and 30px left and right margins.

All four sides different:

<div style="margin: 10px 20px 30px 40px;">
  This div has 10px top, 20px right, 30px bottom, and 40px left margins.
</div>
Toggle me!

This div has 10px top, 20px right, 30px bottom, and 40px left margins.

In the shorthand syntax:

  • The first value applies to margin-top.
  • The second applies to margin-right.
  • The third applies to margin-bottom.
  • The fourth applies to margin-left.

Using the shorthand simplifies setting margins for different sides of an element.

Padding

Section titled “Padding”

The padding property is used to create space around an element’s content, inside of any defined borders.

padding-top

Section titled “padding-top”

Example:

<div style="padding-top: 20px; border: 2px solid black;">
  This div has 20px padding at the top.
</div>

JSX:

Toggle me!

This div has 20px padding at the top.

padding-right`

Section titled “padding-right`”

Example:

<div style="padding-right: 30px; border: 2px solid black;">
  This div has 30px padding on the right.
</div>

JSX:

Toggle me!

This div has 30px padding on the right.

padding-bottom`

Section titled “padding-bottom`”

Example:

<div style="padding-bottom: 15px; border: 2px solid black;">
  This div has 15px padding at the bottom.
</div>

JSX:

Toggle me!

This div has 15px padding at the bottom.

padding-left`

Section titled “padding-left`”

Example:

<div style="padding-left: 25px; border: 2px solid black;">
  This div has 25px padding on the left.
</div>

JSX:

Toggle me!

This div has 25px padding on the left.

Shorthand: All sides the same

Section titled “Shorthand: All sides the same”

Example:

<div style="padding: 10px; border: 2px solid black;">
  This div has 10px padding on all sides.
</div>

JSX:

Toggle me!

This div has 10px padding on all sides.