Lesson 3: CSS Basics

This lesson will go over the very basics of CSS, like adding color to your website, changing the font using Google Fonts, and styling certian parts of your website with classes and ids.

So what is CSS, anyway? While HTML is responsible for the content that goes on your website, CSS, which stands for Cascading Style Sheets, is responsible for the style and look of your website. Using CSS, you can make your page immensly better looking and more user friendly. It, along with HTML and JS, is one of the three cornerstones of web design.

*example of 2d4u with and without css file.*

So, lets start with the basics on how to set up your css file. Most websites have a CSS file seperate from their HTML one. This way, instead of copy and pasting your whole CSS script every time you create a new page of your website, you can just copy and paste the link to the CSS file, which is a lot easier, especially if you have many pages on your site. If your website is made with our glitch template, then it will come with a preset CSS file for you to use. it will be called style.css. If you aren't using our template for some reason, then you can go ahead and make a new file in whatever program you are using and title it whatever you want, as long as it ends with ".css".

Now its time for the fun part! CSS is actually a pretty basic language, so once you learn a few rules, you will be able to do pretty much anything with it!

In CSS, you work with and style the different HTML tags in your website. To style a tag, you will write the tag out as just its name, and then accompany it with a starting and ending bracket. Usually, the ending brack will have its own line at the end. This does not affect the programming, but programmers like to do this to keep the file organized and not messy looking.

We will start with the body tag, because it is one of the most important tags and it can do the most. but this into your website:

body {

}

Once you are done with this, it is time to fill in these brackets with content. If you are on glitch, you will notice a little triangle appear. If you hover over this, it will say "rule is empty." This is because there is nothing inside the brackets. Thats what we will fill in now! A good, simple thing to start with is changing the background color. You will do this by using the "background -color" property. This way, you can change the background color to whatever you want. Add the text "background-color:" on the first blank line inside of your brackets. It should now look like this:

body { background-color: }

You must now decide what you want your background color to be. It is possible to do this by naming the color as the name that you know it as, for example, "blue," but this only works for basic colors. Most proffesional programmers will use what is called "hex codes" to tell your browser what color it should present on the web page. There are many different ways to find hex codes, but one of the easist, and the one I personally use, is using the color picker that Google provides. To access this, go to a new tab and search "color picker." You should get a result that looks like this:

*Image of googles color picker*

Once you get this, mess around with it until you know how it works and then choose whichever color you would like. Once you have found the color, choose the first code you see that is to the right of the screen. It should look something like this:

*example of hex code google color picker image*

For the sake of this lesson, we will be using a blue color with the hex code #4286f4. This is just an example though, you can use whatever color you like.

What you will do now is insert the hex code for your color right after your "background-color" property. It should look like this:

body { background-color: #4286f4 }

You are now almost done! A really small but very important finishing touch is adding a semicolon (;) at the end of each line. This way, it lets your browser know that you are finished with this line and it essentially "ends" it. If you do not do this, nothing below the line that you haven't added a semicolon to will work. Your finished product should look somethink like this: body { background-color: #4286f4; } Now you know the basics of how CSS works! This basic format will work for pretty much anything in CSS, except for fonts, which require an extra step. If you want to work with another HTML tag, just remember the basic format: tag { css-property: data; } If you ever need to use a property that you don't know the name of, you can reference w3 schools "CSS Reference" page, which provides a complete list of all CSS properties. There is a link to this at the bottom of the page. If you find that page useful, it would be good to bookmark it for easier access. More advanced CSS lessons are coming soon!

Continue your CSS journey:

CSS Reference Page