Part 2 - CSS
Styling with CSS
CSS is the language used to style websites.
It defines the visual representation of the content. For example colour, margins, borders, backgrounds, position in the page.
What can I do with CSS?
You can change the colour, position, dimensions and presentation of different elements.
Anatomy of a CSS rule
Here’s an example CSS rule:
body {
color: hotpink;
}
This rule would set the text colour for the body to a nice shade of hotpink.
There are three parts:
- A
selector, which select the elements this rule applies to. In this example, theselectorisbody. - One or more
properties, which define what’s the rule changes. In this example, thepropertyiscolor. - A
valuefor eachproperty. In this example, thevalueishotpink.
selector {
property1: value1;
property2: value2;
}
There are two ways you can use CSS to style your page:
- using the style tag to write your CSS “inline”, that is directly in your HTML file
- using the link tag to load your CSS from an external file
Element: Style
A
<style>tag lets you write CSS directly inside your HTML.Task 13: Add some inline CSS
Jazz up your site with some CSS. Inside the
<head>element add a new<style>element like the following:
<head>
<title>Apply for a meowing permit</title>
<style>
body {
background: hotpink;
color: cyan;
font-family: cursive;
}
</style>
</head>
Too much? Play around with the values until you find something you like.
Have a look at this website to help you finding your colours!
Element: Link
The <link> tag lets you load CSS from another file. This is easier to
maintain and can be reused across several pages.
Task 14: Replace inline CSS with external CSS
Replace your style tag with a link tag like the following:
<head>
<title>Apply for a meowing permit</title>
<link rel="stylesheet" href="style.css">
</head>
This includes the CSS file from the project.
So, you need now to create a second file called style.css next to your index.html file.
Inside, we have to apply some classes.
Applying styles with classes
Often you don’t want to apply a style to every element, but just to certain ones that mean something to you. For example, you might want to make one heading use a big font and another one somewhere else on the page use a small font.
Classes allow you to label certain elements. You can then target them in your CSS by using the class name prefixed with a dot. For example:
HTML
<h1 class="top-heading">Apply for a meowing permit</h1>
CSS
.top-heading {
font-size: 100px;
}
Task 15: Add classes to your HTML
Try to add classes to your HTML with the parameters you like and reload the page in your browser to see what happens:
class="width-container"(to your outermost div)class="top-heading"(to your main heading)class="img"(to your image)class="body-text"(to your paragraph)class="link"(to your a tag link)class="form-global"(to both of the divs outside your labels and inputs)class="label-input"(to both of your labels block)class="label-text"(to both of your labels text)class="input-text"(to both of your inputs)class="button-validation"(to your button)
Bonus :
* class="button-validation:hover" (to your button when hover to change the state)
Summary
Once you’ve done all the tasks, you should have some HTML that looks something like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Apply for a meowing permit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="width-container">
<h1 class="top-heading">Apply for a meowing permit</h1>
<img class="img" src="images/cat-meow.png" alt="An angry cat">
<p class="body-text">The ministry of cats is trying a new pilot. Angry cats can apply for a
meowing permit so they can meow whenever they like. It’s not yet clear how
this permit will be enforced.</p>
<a class="link" href="https://en.wikipedia.org/wiki/Meow">More information about meowing</a>
<form class="form-global">
<div class="label-input">
<label class="label-text" for="cat-name">Cat name</label>
<input class="input-text" id="cat-name" name="cat-name" placeholder="Cat name...">
</div>
<div class="label-input">
<label class="label-text" for="cat-age">Cat age (human years)</label>
<input class="input-text" id="cat-age" name="cat-age" placeholder="Cat age...">
</div>
<button class="button-validation">Apply for a permit</button>
</form>
</div>
</body>
</html>
And your CSS should look like something like that:
.width-container {
max-width: 100%;
}
.top-heading {
font-family: sans-serif;
font-size: 3em;
color: #383e42;
text-align: center;
}
.body-text {
font-size: 1.5em;
font-family: sans-serif;
color: #383E42;
margin: 1em 6em 1em 6em;
text-align: center;
}
.img {
max-width: 100%;
border-radius: 1em;
border-color: #383e42;
}
.link {
display: flex;
justify-content: center;
font-family: sans-serif;
font-size: 1em;
}
.form-global {
margin: 0 2em 0 2em;
}
.label-input{
display: flex;
flex-direction: column;
width: 100%;
margin-top: 2em;
}
.label-text {
font-family: sans-serif;
font-size: 1.3em;
color: #383e42;
}
.input-text {
width: 100%;
display: inline-block;
padding: 12px 20px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 1em;
}
.button-validation {
width: 100%;
background-color: #4CAF50;
color: white;
font-family: sans-serif;
font-size: 1.2em;
padding: 14px 20px;
margin: 2em 0 2em 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button-validation:hover {
background-color: #450049;
}
And your website should look something like:
This webpage contains a heading, some body text, two forms and a button.
If things don’t look quite right, or if you’ve got any questions, ask us and we should be able to help you out.