CSS for beginners…
This short tutorial is meant for people who want to start using CSS and have never written a CSS stylesheet before. It does not explain a lot of detail about CSS, it just explains how to create an HTML file, a CSS file and how to make them work together. I will be using VSCode for this example.
First things first. We need a .html file. Open a new page in whatever editor you are using, (VSCode in my case) and in your terminal you can type ```touch name.html```to create a html file. Once you’re in that file we need the basic structure of an html document.
This is the most basic start for a html page.
<!DOCTYPE html> is obvious, this is telling your document to expect html. Next you need open and closed html tags <html></html> to place all of your code in. Within the html open tag is the language you want to use e.g. English<html lang=”en”>. Next is the <head> tag, not a lot is done here for now. A quick way to see if you’re up and running though is to place a <title> tag within the head and give your website a name e.g. <title>CSS for beginners</title> now if you open your html file in a web browser you will see your text in the tab. You can type ```open name.html``` to open up your html in the browser. I use a VSCode extension called live server, once running it updates automatically without the need to refresh the browser to see progress.
Next is the <body> tag, this is where pretty much everything lives, anything put in here will render to your webpage.
Awesome there’s words on a webpage! congratulations you’re a web developer…kinda, but it looks a little boring. Time for css to style this bad boy right up.
There are three ways to use css:
1. Inline
As you can see inline is exactly as it sounds. The css styling is within the opening h1 tag. This is the most immediate and easy way to style your html content but it can get quite hard to read if you are trying to add a lot of style.
2. Internal
Internal is definitely a more tidy way to add style still within the .html file but again, it can get messy if you have a lot of style.
3. External
The best way to uss css is with an external stylesheet. a dedicated file just for styling then this stylesheet could be used on many html pages…
This requires a <link> to the style.css file in the head of your .html file…
below is the output of all that styling…
There are valid reasons for all three options of css, inline is good for a quick style property like centering the text etc. and internal can help speed up the styling process, is useful sometimes for small projects to see everything on one page and can then be cut and pasted into an external stylesheet later on.
This is not the prettiest looking webpage so lets rework some stuff in our two files to make a realish looking page…
This is very simple styling for maybe a welcome page that we could then put an enter button or something to link to another page.
With the enter button…
Below are both the .html and .css files…notice I placed both h1 and h2 tags in a div and gave it a class name of “font”. Now I can style two elements in the same way by using .font in my css file.
As you can see it doesn’t take much html or css to get a decent start and it is super fun to play around with. Keep adding content to your html and play around with the css. Enjoy!!
