I and the other cohorts have reached the end of Week 3 of the Command Shift course. This week was all about CSS, and there was a lot! I'll be covering the CSS module this week and some more of it at the end of week 4. As always, if you'd like more info on the course, please reach out to me or head to commandshift.co
Styles and CSS
So what is CSS? It is an abbreviation for Cascading Style Sheets, and it's what we use to style our websites and apps. If HTML is the bones of the website, then CSS is the skin that covers it. At its simplest CSS allows us to change the colour of text, resize images and add borders to elements. CSS is very deep in terms of what it can do and how much there is to learn so I'll cover a few of the basics in this article, and how the course helped to simplify this for us.
Firstly, we need to apply our CSS to our HTML and there are a couple of ways we can do this: Internal Style Sheet, Inline Style Attribute and External Stylesheet.
Internal Style Sheet
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<style>
h1 {
color: red;
}
</style>
<h1>Hello World</h1>
</body>
</html>
All we need to do on this is write our CSS within our Style tags directly into our HTML.
Inline Style Attributes
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 style="color: red;">Hello World</h1>
</body>
</html>
Another way of writing the styles that we want directly into the elements. This would change the colour of our h1 to red.
External Style Sheet
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Here we have created a separate file called 'styles.css' and linked it at the beginning of our HTML doc so that everything that follows will be affected by the CSS link. This is the cleanest way of implementing our CSS and our styles will be affected even though we're creating them in a separate document.
Now that we've linked our CSS, let's start making our page look good!
Simple Selectors and their Layout
In CSS we need to connect the elements we want to edit in our stylesheet and we do this with our selectors. Below is a selector layout
h1 /*Selector linking it to our h1 */{
color /*property */ = red; /*value */
}
This is how we type out our code for our CSS. The example above will change our h1 to the colour red.
#navbar /*linking an ID*/{
position: absolute;
}
.container/*linking a class*/ {
background-color: blue;
}
Above is how we link a specific ID to a stylesheet. It is represented by a # and the second line is how we link a class which is represented by a period before the name. This allows us to edit specific elements with these attributes.
* {
padding: 0;
margin: 0;
}
The * is a universal selector. It's used to select everything on a page and is usually used to reset the padding and margin of the site. More on that in another article.
These are just some very simple and basic selectors that we can use in CSS.
The course so far
So, how is the course going overall? Pretty well. I have been enjoying styling my portfolio this week and will continue to refine it this coming week. I have been asking a lot of questions during the CSS portion as there is just so much to cover, and it's been extremely enjoyable. I feel a lot more comfortable with CSS now than I have in the past. This final foundations week is going to cover more CSS as well as us presenting our portfolio at the end of the week, then it's onto JavaScript.