Ultimate CSS Basic Fundamental Guide For Beginners

Let me confess: I don’t have any IT background and I started off with zero knowledge in CSS.

But I learned a little bit when trying to style my website (and under the guidance of my IT expert brother).

W3Schools is my go-to resource when trying to learn CSS (and I’ve referred to it throughout this entire article). I’ve picked out a few CSS which I think are important and fundamental. Hopefully, they’ll be helpful just as they did for me!

Disclosure: Some of the links below are affiliate links. I will earn a small commission, at no extra cost to you, if you purchase through these links. Your support encourages me to continue blogging and help with the costs of hosting this site. Thank you!

CSS Syntax

Let’s start from the basics.

A CSS rule consists of a selector and a declaration block.

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons and declaration blocks are surrounded by curly brackets.

So in this CSS rule below, the selector is h1 which means that you want to style heading 1. There are 2 declarations. The first declaration is styling color to blue while the second declaration is styling font size as 12px. It’s straightforward and easy to understand, right?

CSS Selectors

Here are some CSS simple selectors. Read the CSS Selectors tutorial for more in-depth explanation.

CSS Colors

You can specify colors in a few ways:

Predefined Color Names

Bear in mind that CSS and HTML support 140 standard color names. For instance,

• Orange
• Violet
• LightGray
• Tomato
• MediumSeaGreen

RGB

You can also specify color with RGB value using the formula “rgb(red, green, blue)“.

• rgb(255, 0, 0) = red (red is set to highest value while others are set to zero)
• rgb(0, 0, 0) = black
• rgb(255, 255, 255) = white

RGBA

RGBA is an extension of RGB with an alpha channel (which specifies the opacity for a color). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all). It uses the formula “rgba(red, green, blue, alpha)“.

So rgba(255, 99, 71, 0.2) will be more transparent than rgba(255, 99, 71, 0.8).

HEX

In CSS, a color can be specified using a hexadecimal value in the form of “#rrggbb“. rr (red), gg (green) and bb (blue) are hexadecimal values between 00 (lowest value) and ff (highest value).

• #ff0000 = red (rr is set to highest value of ff while others are set to lowest value of 00)
• #000000 = black
• #ffffff = white

CSS Margins

Margins are used to create space around elements, outside of any defined borders.

CSS Padding

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

CSS Height & Width

As the names suggest, the CSS “height” and “width” properties are used to set the height and width of an element. Note that these properties do not include padding, borders or margins. They set the height/width of the area inside the padding, border and margin of the element.

CSS Text Alignment

With WordPress Editor, you can easily align the text in whatever way you want. In fact, I can vertically align text and images in Elegant Themes Divi.

But just in case you can’t align text in the tool you use, you can consider using CSS to align your text. Here are some CSS text alignment and direction properties:

CSS Text Indentation & Spacing

Whether you want to indent the first line of a text, specify space between characters in a text, specify space between lines or specify space between words in a text, here are some CSS properties you can use:

CSS Font

Here are CSS font properties to adjust your font:

CSS Links

Seen this before?

<a href=”http://w3schools.com”>This is a link</a>

Note that this is HTML which you can use to add a link.

However, you can’t add a link using CSS. CSS is used for styling.

Links can be styled differently depending on the state they are in. Here are the 4 links states:

CSS Lists

With CSS, you can beautifully style your lists.

• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

Here are CSS list properties that you should be aware of:

CSS Opacity

I’ve briefly touched on opacity under Colors previously.

But do you know that you can use the opacity property together with the :hover selector to change the opacity on mouse-over?

In fact, you can also create a transparent box!

CSS !important

Here’s a bonus tip: Use !important where relevant and necessary!

The !important rule in CSS is used to add more importance to a property/value than normal. If you use the !important rule, it will override ALL previous styling rules for that specific property on that element.

Now It’s Your Turn

Do you have a better grasp of CSS now?

For more hands-on practice, you can try styling your website via WordPress Theme Customizer (Appearance > Customize).

If you still have trouble styling your website, you can hire a CSS expert from Fiverr Pro. Or use a WordPress theme that includes drag and drop visual builder like Elegant Themes Divi~ If you’re using Elegant Themes Divi (which I strongly recommend), do consider using a child theme like Divi Lover to ensure that changes made to the code aren’t erased when there are updates to the parent theme, Divi.