CSS basics

June 7, 2022

When you hear "website making" it's usually HTML that first pops into your mind. But the truth is HTML only does 50% of the job, that is to mark down the content of the page. The other 50% is done by CSS or Cascading Style Sheets for long. CSS gives HTML pages its beauty. HTML is the mannequin and CSS is its dress (that analogy works I think).

Just so you know, expertise in website making consists of 20% HTML skill and 80% CSS skill ^_^ In this article, I hope that I will be able to teach my readers the basics of CSS~

Blog contents

Open the images in a new tab to see better. Click "Edit on Codepen" to open Codepen embeds in a new tab


How to apply CSS to your HTML file (inline, internal, external)

Inline

Inline styling is CSS written in the HTML file using the HTML attribute style=""

See the Pen Inline CSS by Heart (@candy_unicorn133) on CodePen.

It applies CSS directly to the element, and only the element it is attached to. It's called inline because it's written within the lines of your HTML file.

This method is the worst way to apply CSS, because it will crowd your HTML, making it hard to read. And if you want to have multiple elements to have the same styles, you would have to re-write it on every element, thus making your HTML file even harder to read.

Inline styling can be used if you need to apply only a few styles (1-3), and if the styles are unique to the element and will only be used once. It should also be noted that inline CSS can't be overwritten.

Internal

Internal styling is CSS that is written in the HTML file within <style> tags

See the Pen Internal CSS by Heart (@candy_unicorn133) on CodePen.

The <style> tags can be written in the <head> and <body> tags. There can be multiple <style> tags in an HTML file.

Internal styling is the more organized way to apply CSS to your HTML. All the styling will be kept in the same place, keeping your HTML file clean and easy to read.

External

External styling is CSS that is written in a separate ".css" file. It needs to be linked to the HTML file using the tag below (written inside the <head> tag).

<link rel="stylesheet" href="[css file path].css">

HTML file on the left, CSS file on the right

With external styling, you can use a single CSS file on multiple HTML files.

I use this method the most because I like to have my HTML file open on one side and my CSS file on the other (like in the picture).

I hear that external styling should be used only if you want to re-use the CSS on other pages, and that internal styling is the most optimal way to apply CSS. But for me I like to use external styling even if the CSS will apply to only one page. (given that there will be a lot of declaration blocks)

Overwriting styles

One thing to note about CSS is that it overwrites itself. Not being aware of this may cause a few problems.

Result

Here, the containers are blue because the rules for it is in the <style> tag, which comes after the stylesheet link.

Let's put the link tag after the style tag

Result

The external CSS overwrote the internal css


CSS syntax

element {
	property: value;
}

You call this whole thing a "declaration block" or a "rule"

  • selector - declares to which element the rules will apply to. It precedes the two curly brackets "{}" that will hold declarations
  • property - what property of the element will be changed
  • value - the new value of the property
  • property: value; - a line of CSS is called a "declaration". Declarations are contained between the "{}"

Example below

See the Pen CSS syntax by Heart (@candy_unicorn133) on CodePen.


CSS selectors

This tutorial will demonstrate the basic CSS selectors only

element, element - multiple elements

You may assign a declaration block to more than one element. Use a comma to separate them.

element element - descendant selector

Selects all elements that are inside the parent element

element > element - direct child selector

Selects only the direct children elements

element:hover - hover pseudo-class

CSS declared in the :hover pseudo-class will activate only if the user is hovering over the element that it's attatched to

element:active - active pseudo-class

CSS declared in the :active pseudo-class will activate only if the user is clicking down the element that it's attatched to

Demonstrations given below. Click "edit on Codepen" to be able to interact with the code

See the Pen CSS selectors by Heart (@candy_unicorn133) on CodePen.

Read about more CSS selectors here, and pseudo-classes here.


Classes and IDs

Classes and IDs are useful HTML attributes that allows you to apply CSS to only the elements that have it. It helps keep CSS code organized and understandable, and makes applying styles to elements easy.

Demonstration

See the Pen Classes and IDs by Heart (@candy_unicorn133) on CodePen.

A period . is used to select classes in CSS. Example: .pink-bg

An octothorp or hashtag # is used to select IDs. Example: #blue

Class and ID names can only have the characters a-z, A-Z, 0-9, - (hyphen), _ (underscore) in them. They have to be at least 2 characters long.

Class and ID names are assigned using HTML attributes class="" and id="" respectively. One may add multiple classes or IDs by separating them with a space. Example: <p class="pink-bg red"> This <p> element is assigned both pink-bg and red

Classes vs IDs (Classes > IDs)

You may have heard "classes can be assigned to multiple elements, while IDs can be assigned to only one" and that is true, for Javascript that is. In CSS, it's pretty much irrelevant. However I still recommend using classes instead of IDs for CSS.

So what's with IDs?

Their main use is in Javascript. IDs can also be used to create an anchor link, which makes it important to not use an ID on more than one element. Having multiple elements with the same ID for CSS is allowed but it's bad practice, so don't do it.

IDs also have a higher priority than classes; meaning they can overwrite classes. Do what you will with this information.


Inspect element

Press 'F12' or right click > 'Inspect element'. Something should pop up and it should look like a huge mess of nerd stuff.

Well congrats because you are a nerd now. Inspect element is a developer tool that you will find very useful. You can use it to find the problems in your code, temporarily edit your code to see what it would look like if you did this and that, and you can also use it to observe and study other people's layouts.

I won't explain everything about it because it has a lot of functions. I'd like you to find out on your own through exploring or research.


That's all for Heart's CSS basics tutorial. More coming soon maybe...