CSS Basics

So you have the basics for HTML, now it's time to make that boring Content filled with colors and style!. CSS stands for Cascating Style Sheets. That means You can make layers on top of layers of colors and designs. You can format your content to fit whatever you want your website to look like. In this website i'll just briefly show you how to...

  1. Link your CSS file to your HTML
  2. Change Background Color of your website
  3. Change Font Styles
  4. Change Font Sizes
  5. How to change the diplay of your List Items
  6. How to Center your texts

With That said lets learn some CSS!

Linking CSS to HTML

So we talked about a bunch of different tags in the HTML part of this website. The one I'm going to teach you about is out <link> tag. Your Link tag is what you'll need to link together your html and css files together. So before we add any link tags we're going to create a folder called myfirstwebsite. Then click and drag your HTML file into the new folder. Now we're going to make a new file called "styles.css". The ".css" is going to tell the browser it's a CSS file just like the ".html" is going to tell it's an HTML file. so now in your html code, in between your header tags just below your title tag, youre going to type <link>rel="stylesheet" type="text/css" href="styles.css" </link>. To break down what you just put into your html. The rel shows the relationship between files, by saying it's a "stylesheet it'll import a stylesheet. The type tells us what type of link it is...in this case it's a text/css file. and the href is the actual linking between files. The link tag is different than some of the tags we talked about before. This tag does not need a closing tag(</ >).So your html should look something like this now.

html with link tag

In the next Section we'll check and see if we linked our CSS file with out HTML file.

Change Your Background

We now linked our CSS file with our HTML file. Great! now it's time to see if it was successful! Go to your css file and type (body{ background-color:blue;}. your CSS should look like this.

CSS file with background-color

What we did is we targeted our body html element and told the browser to change the background color to be Blue. To see if your link and your css is correct, open your html file to the browser and you're website should be blue now!

the website is now blue

You can change the color to anything you'd like! Heres a link for more colors you can choose from! Just copy and past the HEX color and past it next to the background-colo.(ex: #FF5733)

CSS color select

Font Styles

Awesome! We changed the background color! Lets try changing The h1 tags color! Just like before when we targeted the body tag and told the browser to change the background to blue, we're now going to target the h1 tags and change the color to...any color you'd like. Start off by deleting the last thing we did in order to see things more clearly. Now type in h1{color:red;} Your css should look like this.

css text color

Refresh your website page and your Website should look like this now!

Website with color text

You can also change the font by typing the h1 tags or p tags in and typing "font-family:" then whatever font you'd like! type in under your color: red; "font-family: sans;" your css should look like this!

css font family

Now refresh your page again and you should see this!

Website changed font family

Font Sizes

Just like the font family we can change the font size. To change a text size you'll need to target that tag and then type (whatever tag you'd like I chose the p tag){font-size:2em;}

CSS font size

Refresh your page and you should see something like this.

Website with changed font

You can check out the different fonts and font sizes here

List Item Display

Lets try changing the look of the List Items we have at the top of our page. Just like changing the colors and fonts, You have to target the li tags. So if we want to change the bullet points, or hide them we have to type (li{list-style:none;} That will hide the bullet points in the li items. If you want to change the look of the Bullet points click here! If you typed in my example your css should look like this!

css li items

Now your website should look like this!

websites with changed li elements

Go and try different list styles!

Centering Your Texts

Now to talk about centering your website. Almost anything you build is based off of the center of something, either it be you building a house, or building a website. In order to center your text all you'll have to do is target the html tag and add { text-align:center;} for my example I'm going to target my h1 elements and center them.

Center CSS

Now my h1 elements are centered and my website should look like this!

h1 elements center

To select all text either type *{text-align:center} or body{text-align:center;}

css all center

Your website will be all centered

Website text centered

Continue To Learn!

This website was to show you the very basics on building your first basic website. I encourage you to keep learning more about programming! The more you practice the more you're going to want to learn and keep creating! Treehouse.com , Codeacademy.com, W3schools.com, and Youtube.com are great websites That will teach you a lot about how websites are created and a lot about different programming languages. So with that all said good luck!