The Power of CSS: Beginner’s Guide

4 min readSep 25, 2020

CSS(Cascading Style Sheets) is the code that styles the web content bringing our webpages to life with color and pizzaz. Don’t you find it amazing what a little color, border, or font change can bring to your applications? If you don’t have any experience, let me help you unlock your CSS potential.

Linking your HTML page to your CSS file

We create a stylesheet with a .css extension and include its link in the HTML document, like this:

<head>  
    <link rel="stylesheet" href="yourfilename.css">  
</head>

Be sure to change the filename.

Selectors

CSS selectors are used to “find” (or select) the HTML elements you want to style. We will go over the simple selectors (select elements based on name, id, class)

Element

Element or type selectors select ALL of a type of element.

h1 {  
    font-size: 20px;  
}p {  
    color: pink;  
}//CSS file

In the above snippet we have targeted the h1 element and given it a style attribute of:font-size: 20px; While also changing our p tag to color: pink;

2. Class

Another way of selecting HTML elements is by using the class attribute. In HTML, we can assign different classes to our elements. Each element can have multiple classes, and each class can also be applied to multiple elements as well. In the above example we are assigning our div a class of “container” and then in the CSS file we are calling the (.class) with (.)dot notation and then the name of the class (.container)then moving the text to be aligned.

3. ID

Like classes, we can also use IDs to select HTML elements and apply styling to them. The only difference between class and ID is that one ID can be assigned to only one HTML element. (#id)

Pro tips:

Classes or ID’s cannot start with a number.
Use lowercase for ID’s and class names, and hyphens (-) if needed to separate words.
Don’t forget the semi-colon after declarations.

CSS Color Values

Your browser can accept colors in many different ways:

Color name (ex. red)
Hexadecimal value (ex. #FF0000)
RGB value (ex. rgb(255, 0, 0))
HSL value (ex. hsl(0, 100%, 100%))

The 17 standard colors are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Property: Color

The color property changes the color of the text.

p {   
color: red;   
color: #ff0000;   
color: rgb(255, 0, 0); 
}

Property Values

Each property can have one or more comma separated values.

p { 
color: white; 
background-color: black; 
font-family: Arial, sans-serif; 
}

Property: Font-family

The font-family property defines which font is used.

p {   
font-family: "Times New Roman";     //Specific font name
font-family: serif;                //Generic name
font-family: "Arial", sans-serif; //"Arial", sans-serif;
}

Property: Font-size

The font-size property specifies the size of the font.

p {   
font-size: 12px;           //Pixels
font-size: 1.5em;         //"em"
font-size: 100%;         //Percentage}

Property: Fonts

p {   
font-style: italic;
font-weight: bold; 
font-size: 10px;
font-family: sans-serif;
 }

Or (shorthand)

p {  
 font: italic bold 10px sans-serif;
 }

Text Decoration

The text-decoration property is mostly used to remove underlines from links.

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Background Color

You can set the background color for any HTML elements.

div {
  background-color: pink;
}

Border Radius

This property allows you to add rounded corners to elements!

#corners {
  border-radius: 25px;
}

Text Align

A text can be left or right aligned, centered, or justified.

h3 {
  text-align: right;
}

Wrapping Up

Once you start to understand the basics you’ll be more comfortable to explore the different possibilities. Learning takes time and experience. Don’t be afraid to play around and make mistakes, as it’s all part of the process!