Skip to main content
Example Document CSS Rulesets Selectors Classes Text Elements Padding Elements Color Elements Comments Extra: Centering Images

CSS Basics

Made by: CodingHome.
Published by: AT Products LLC.
Source (Mozilla) Web Resources

Example Document


h1 {
  color: black;
  text-align: center;
  font-size: 26px;
  font-family: verdana;
}

<p style="font-size:10px">

To put CSS files in HTML, use:

<link rel="stylesheet" href="style.css">

To put CSS code in HTML, use:


<style>
  .class {
    color: red;
  }
</style>

CSS Rulesets

Selector

p {

Property

  color: red;

Declaration

}

Properties - With these, you can style a HTML element, like for example; color.
Property Value - This chooses one of the possible options for a given property, like red for color.

You can also write CSS like:

html{color:red;}

You can also put styles in HTML elements:

<h1 style="font-color:white;">

You can also select multiple elements with commas at once like...


h1, h4, h6, h2 {
  color: red;
}


Classes

Think of classes like custom HTML elements, they can be applied in HTML:

<p class="text-red">

Classes begin with a dot or period (.) to begin the selector.


.text-red {
  color: red;
}


Selectors

There are more ways to select elements and classes apart from their name. Here's some common ones:

:hover
- Applies the CSS rules if the element is selected.
:first-child
- Selects the first child element if it is inside a parent element.
:last-child
- Selects the last child element if it is inside a parent element.
:nth-child(n)
- Selects elements based on position, replace n with a number.
:focus
- Selects elements if it is focused, usually by using the TAB. 
:has(+ element)
- Selects the element if the selected element is before it.

Text Elements

font-size: 10px;
- Text size, can be in pixels.
font-family: verdana;
- Fonts
text-align: center;
- Can align to the left side, right side, or in the center of the webpage. 
text-shadow: 3px black
- Shadow of text. It can be in pixels and colors.

Padding Elements

padding-top: 50px;
- Separation. It can be top, left, right, and bottom in pixels.
margin: 50px;
- A margin. It can be in pixels.
border-width: 5px;
- Border width. Can be thin, medium, thick, or just pixels.
border-style: dotted;
- Border style. Can be dotted, dashed, solid, double, groove, ridge, inset, outset, none, or hidden. Can also be colored.
width=500px;
- Width of the element. It can be pixels or percentages.

Color Elements

color: red;
- The color of the element, can be hexadecimal, or RGB.
background-color: white;
- Background color of the element.

Comments

Comments are commonly used to explain the code and may help when you edit the source code later and are ignored by browsers.

A CSS comment starts with /* and ends with */, and no changes are needed to make it multiple lines.


/* This is a single-line comment */

/* This is
a multi-line
comment */


Extra: Centering Images


img {
  margin: 0 auto;
  display: block;
}