Learn CSS quickly – 14 minute tutorial – Code along video

Learn CSS quickly – 14 minute tutorial – Code along video

Learn CSS Quickly - Code along tutorial video

CSS is the key to unlocking the ability to create more beautiful webpages. By learning CSS quickly, you can transform boring content into easily readable, better looking material for your viewers and do it in a timely manner. Follow this video tutorial above, or follow along below to get started on your CSS journey.

This tutorial will not cover actual HTML. So if you're still needing a refresher on coding HTML files, feel free to follow along to my tutorial which you can find here.

Learn CSS Quickly

What is CSS?

CSS stands for cascading style sheets and is the code you will use to modify your HTML files to specific values. In short, what a CSS file does it target an element of an HTML file and modify a specific visual property of it. 

Learn CSS Quickly - Let's get Coding:

First thing you're going to need to do is to open a text editor. The default text editor for Mac is TextEdit & for Windows it's Notepad. I suggest that if you're going to start coding, you should begin getting familar with a third party application as your main text editor. I personally love Atom Text Editor and that's the text editor I use for all my photos on the site of code. So if you like this style I totally encourage you to go to the link and download Atom. I know you won't regret it.

However, if you want to match up with more developers than just myself, a lot of people use visual studio code. It's great too and honestly, most text editors will do the same whenever you're just getting started.

    1. Go ahead and open up a folder with an html file inside it. If you need an html file, or just want to follow up with my example completely, feel free to get my file from Github which can be found here.

   2. Next, create a CSS file within this directory. 

Once you have an HTML file created in a folder, along with a css file, we can link them together in the next step and start to learn CSS quickly.

Linking CSS to an HTML File:

To link a CSS file to an HTML file, you will need to code a "link" tag into your HTML file that has an href = '{file location}' I've done this in the photo below:

Learn CSS Quickly - Linking CSS file

It's important to note something here. I made sure to create my CSS file in the same folder, or directory, as my HTML file. I did this so I could just use something known as a 'relative path.' Pretty much, I can just type the file name of the CSS file to reference it since it's in the same folder as the HTML file. If you were to put your CSS file into another directory, you would likely have to type the absolute URL, or a relative path to it. 

How does CSS work?

To work with CSS, we have to understand how it works. CSS works by redefining property values of specific elements on an HTML file. That's just a fancy way of saying, you tell CSS what you want to change on your HTML file first, then tell it what you want to change it to. Easy enough right? Whenever you right HTML without CSS, the web browser has a default way of displaying this visually whenever you render it into a web browser. CSS is just our way of overwriting these defaults to our own taste.

So let's look at an example. Let's say we want to change all paragraph text on an html document to a specific color instead of the default black. First, we tell the CSS file what we're targeting. In this case, we're targeting all contents within the html 'p' tag, paragraph tag, so first we tell CSS this information. Then we tell the file what property of this tag we want to change. For the color it's going to be as simple as the 'color' property. I've done this in the example below. 

Learn CSS quickly - Modifying paragraph text

So, walking through the above example, we have told the css file the tag we want to modify by typing the p and then the curly brackets. Then, we specified the property that we want to change and then the new property value.

Learn CSS Quickly - How to Select Specific Elements

But one thing you may notice is that when using selectors this way, you may modify elements you didn't want to. How often do you really want all your paragraph text to be the same on one webpage? Yet alone whenever you begin creating multiple page html sites. Let's figure out a better way to reference elements in an HTML file. 

Selecting HTML elements using Div classes

We can specify a certain paragraph element by placing it within a div class. Div classes are pretty much just little containers that allow us to target their contents more specifically, without targeting all of other similar elements on the html page.

Div classes are a non-unique identifier. This just means that you should feel free to use the same div container class multiple times throughout your html file if they are containing the same thing.  We'll use an example of div containers below. 

Selecting HTML elements using ID's

Another way to target specific elements on an HTML file, is to use an ID's. 

ID's are a unique identifier. They should only be used to target one element on an html file. 

Lastly, since ID's are a unique identifier to one element, they will overwrite any css code writen targeting that element within a div.  Say you've coded css to replace the font of all paragraph text, but you have one paragraph tag you want to be different, this would be the perfect place to insert an ID. Let's look at an example. 

Example of using a div container
Learn CSS quickly - Using a Div container

Here you can see we have used a div container to specifically target the elements at the top of our html page. We have named the class 'toppage' and have opened it with a <div class="..."> and closed it with a </div> on line 18. 

Targeting an element inside a div container on our CSS file:
Learn CSS quickly - Targeting a div container

To target an element within a div container, we type a period followed by the div container name. Next we put a space and then the html element we want to modify. In this example we're modifying the unordered list tag of our html document found within the div container of 'toppage'.

Example of using an ID to modify an HTML element:
LEarn CSS quickly - ID's

Here, we have used an ID to target one specific heading 3 element of our html file. This means that we can now target this element just by using the ID we specify. On this ID, we have named it 'tagline'

Targeting an element using an ID:
learn CSS quickly - ID identifier

Since we're using an ID in this case, we don't need to specifically call the element. This is because the ID only modifies the element it's attached to - not any others. We've aligned the H3 element to the left with the above code. This would overwrite any text-align CSS code given to the div container. 

We can target specific HTML elements, so what properties can we change?

There are so many properties for each different element and this is the beauty of CSS. You can design web pages exactly how you want them to look whenever a browser renders them. This page will by no means be an exhaustive list of all the properties you can change of each HTML element, you can find that list here.

But I will cover some of the most used items in this list that you should for sure add to your CSS arsenal before leaving this web page.

  • text-align:   Specifies how you want the text to be aligned, left, center, right. 
  • color:    Changes the color of the element, so this property is useful for text items (p, h1, h2, etc.)
  • padding:    increases the size of the actual element in the specific direction
  • margin:    increases the blank space around a specific element ( note the difference here between margin and padding. Padding increases the element size while margin increases the blank space around the element).
  • float:    places the element at the highest available space to the right or left on a webpage. This is useful for building pages horizontally rather than just vertically. 
  • font-size:   unbelievably, this is used to specify font sizes.  
  • width:    can specify the width of a given element in proportion to the web page. Say you want to align an img or a non text element, you can specify a width of 50%, with a margin to the left and right of 25%.

There are many many more properties, but these are some of the ones you will use everyday.

And that's it! you're well on your way to learn css. You know how to call specific elements on your HTML page, you know how to target the specific property, and you know how to revalue that specific property. 

Leave a Reply

Your email address will not be published. Required fields are marked *