Web Application Development Lesson 2 - CSS
In the last lesson, we learned about HTML and created a very basic layout. Towards the end of that lesson, I gave you guys some code which I said was some magic, this code gave the layout some colour and changed its appearance.
In this lesson, we are going to talk about this magic code CSS and how it makes your website 100x better.
What is CSS
CSS is a language created to tell documents how to be presented to the user. In other words, it sets the documents, Styles, layouts etc.
A standard document is this case is made up by using a markup language, HTML is the most common markup language. CSS takes your HTML and makes it pretty and presentable to the end user. Without CSS you would be giving your user a website that looks like a word document with no formatting at all. Which isn't very nice.
CSS Basics and what you can do with it
Lets dive right into some code here.
Open up a new document, If you're using Pycharm, start a new project, once it is created, create a new html file, call it index.html and put the code below into that HTML file.
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
The above code is some simple HTML which is creating a heading Hello World! and has a paragraph of "this is my first CSS example". Now here is where the magic CSS comes in.
We are going to take the h1 and p tags and do some cool little tricks with them.
Create a new file, this time we are going to create a CSS file, on Pycharm right-click on the project, click new and select stylesheet, name this main.css. This will give you an empty screen. In this screen type the following code.
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
Now if you run this code, by moving your mouse to the top right-hand side of Pycharm, and selecting your browser, you will see this screen.
As you can see nothing has happened!! It is still just plan text on the screen. Why has that happened?
This is because we need to tell our index.html that there is a CSS file which it needs to link to.
The way we do that is fairly simple.
In your head tag at the top of your index.html file. type in this
<link rel="stylesheet" href="main.css">
Now rerun the code in your browser and you will see somethings have happened.
You can now see that the heading text is blue, the background of the heading is yellow and has a black border, and finally, the paragraph text is red.
So how did this happen?
In CSS we called h1 gave it some curly brackets, and put some code in there. What this does is takes all of the h1 headings from index.html and gives them the properties that we set.
Below I have commented what each of these properties have done.
h1 {
color: blue; // color sets the color of the text for this element
background-color: yellow; // background-colour sets the color of the background for this element
border: 1px solid black; // border sets a border around the element.
}
The problem here is, now we have set certain properties for h1 tags, any h1 tag created on index.html will now have the same properties. Sometime we will want to have different CSS rules for the same tag but in a different place on the same page. There is a nice way to do this, tags in HTML can include a class, a class will let you give CSS rules to that class element only.
For example, let's say we had two headings and we wanted them to be a different colour and the second heading doesnt want a border or a background color.
Below is the same HTML code from before, but there are a couple of changes, in frot of the h1 tags I have placed class="This can be any name you'd like"
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="first">Hello World!</h1>
<p>This is my first CSS example</p>
<h1 class="second">This is a second heading! </h1>
</body>
</html>
Now heading back to our main.css replace h1 with first, then underneather the curly bracket create a new CSS rule called second followed by { }. An important thing to note is, with classes you must add a fullstop to the front of the CSS rule. It should look like this.
In second type the following
.second {
color: orange;
}
Now run your code, what you should get is a second h1 tag with no background colour or border, but it will have orange text.
Notice the first hello world heading is the same as it was before? Cool so now you have a really basic understanding of how CSS works with HTML.
I encourage everyone who is new to CSS and HTML to play around with it and try to make simple layouts.
Hopefully this has given you guys a basic but helpful look into what CSS is and how it can be used.
As always thanks for reading!