Skip to main content
Example DocumentCSS RulesetsSelectorsClassesText ElementsPadding ElementsColor ElementsCommentsExtra: Centering Images

CSS Basics

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

Example Document

CSS
h1 { color: black; text-align: center; font-size: 26px; font-family: verdana; }
HTML
<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:

HTML
<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 without indentations:

CSS
html{color:red;}

You can also put styles in HTML elements:

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

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

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

Classes

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

HTML
<p class="text-red">

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

CSS
.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.

CSS
/* This is a single-line comment */ /* This is a multi-line comment */

Extra: Centering Images

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