Instagram

Follow Me!

Career Code Technology

An Intro to Coding, Understanding CSS

August 1, 2017
csscoverphoto

Coding, a set of instructions that we give to the computer to make it do what we want it to do. But to me it’s more than that. It’s a skill that empowers me to work from anywhere and to turn my ideas into reality. “Techie” is not a word I would use to describe myself, and I promise you don’t have to be “techie” either to learn how to code. Coding is hard, just like learning a new language is hard, it takes focus, determination and hours of practice, but if you put in the work there is no reason why you can’t learn. Each language is different, it has different vocabulary, and grammar rules called syntax. HTML is the language that internet browsers read, it’s a markup language that is used to build the structure of your webpage. CSS is what makes HTML look good. CSS is a little more confusing than HTML but it’s also a lot more fun. In order to understand CSS you will need to understand HTML because these two languages work together, so if you don’t have a good handle on HTML check out my Intro To Coding, Understanding HTML post. Ready to make the internet look beautiful? Here we go!

CSS stands for cascading style sheet (you don’t need to memorize this, but in case you wanted to look really smart at trivia night, your welcome!) This means that the browser will read your style sheet from the top down. As a general rule we write our most generic styles at the top and get more specific as we go down our style sheet.

Just like HTML is made up of tags and elements, CSS is made up of rules, selectors, properties and values and we write our rules insides of { } curly brackets. There are two main parts to a CSS rule; The selector tells the rule which element(s) to apply the styles to. In our example, we are targeting all the h3 tags. We will go more in depth on different ways to target elements later on but for now know that this is how we specify which elements on the page get styled.
The declaration is where we define our styles (write our rules). Inside the curly brackets { and } we include both a property and value to make up our rule. In our example, the property is color and the value is blue. We can include as many rules (properties and values) inside the declaration as we want. We need to end each rule with a semicolon.

Before we go any further I should tell you where you need to write these styles. There are three different places you can write CSS but the most correct way to write it would be using an external style sheet. This also helps to keep things clean and neat as our websites get bigger and bigger. You will have to create a new file in your text editor and label it something like style.css (you can call it whatever you want, it just needs the .css) save this file in the same folder as your index.html file and link to it in the head of your HTML document using the link tag. <link rel=”stylesheet” href=”style.css”/>.

Let’s go over some different ways we can target HTML elements, First, like in the example above, we can call the HTML element by it’s name. h3 or p for example. This will target all of the h3 elements or all of the paragraphs on the page. That’s great for writing general styles but what happens if I only want to target one paragraph on the page? Then we need to get a little more specific. This is where classes come in. Remember attributes? Something we can add to an opening HTML element to give the browser more information about this element. This is where the class attribute proves useful. We can call an element by it’s class name, so if I wanted to target one special paragraph on the page to be styled different I could give this paragraph a class name of something like “special” and call it using the class name by saying .special (dot special) or p.special (p dot special) and then write my rules inside of curly brackets. The first selector .special will call all elements on the page with the class of special. The second selector p.special will call all paragraph elements on the page with the class of special. I can also call an element by it’s ID name using a hashtag so if we gave the paragraph an id of special instead of a class of special I would call it using #special or p#special. What if we want to be specific but we don’t want to give every single element a different class name? This is where descendant selectors come in handy. We can target a specific child selector by first identifying it’s parent. For example. I want to target all the paragraphs in the section with a class of special. I could say section.special p and then write my rules. Or if I wanted to target the anchor links inside of my navigation in my header I could say: header nav a and so on. As a general rule, try not to go more than 3 levels deep with parent/child or descendant selectors (think inception).

A little note on naming classes and ids, you cannot use any spaces or special characters, so use a dash – an underscore _ or camelCase, pick one and be consistent. Classes and ids are case sensitive, so if you’ve used a capital in the naming of a class or id you will also need to use that capital when calling the class or id later on.

I feel like this is a good place to talk a little bit about CSS inheritance – this means that certain styles will get passed down from parent to child. That’s great because it means if we want the same colour font on the entire page we don’t have to apply that colour to every single element on the page, would could write the rule for the colour once on the body and then it will be passed down to all of the other elements nested inside the body (ie all of the elements on the page).

Are you with me so far? Great! Okay, what happens when we write two rules for the same element? Which one gets picked. The short answer is the most recent or most specific one. Remember that CSS stands for cascading stylesheet, and the browser reads the stylesheet from the top down. So if i were to write a rule to change all the paragraphs to red, and then underneath that rule I wrote a rule to change all the paragraphs to purple, the paragraphs would be purple. However, if I wrote a rule that said to change all the paragraphs with a class of special to green and underneath that I wrote a rule that said to change all of the paragraphs to orange, the paragraph with the class of special would still be green because it is more specific. Make sense? Let’s go through a few more examples.

The first one, even though the p rule comes second the first one still wins because it is more specific.

We’ve been talking a lot about rules changing colours so it’s important to mention that in CSS colour is spelled wrong. They forgot the u (silly Americans) so when you are defining colour in css drop the u and use color. While we are on the topic of colour I’ll mention that there are 6 ways to define colour in CSS, let’s go through the most common 3. We can simply call the colour by its name; red, green, blue. CSS also accepts fancy colour names like honeydew and lavender. The next way (and most common among web developers) is by using a hex code. This is a hashtag followed by a six digit alphanumeric value. It looks something like this #BADA55 (real colour). Finally, we can also call a number by it’s RGB(A) value. RGB stands for red, green, blue, and the A refers to opacity. The numbers in the RGB value determine how much of each is added. So the RGBA value for solid black would look like this rgba(0,0,0,1). We can define colours of fonts as well as background colours in CSS.

The next thing we will discuss is typography. You can make a website look pretty good or bad depending on what font you choose. But typography is more than just fonts. We also have the ability to define, letter spacing (the space between letters) and line height (the space between lines) You can also remove or add underline, overline or strikethrough, you can right-align, left-align or centre text, etc. Back to fonts, we now have something called webfont available to us. Why is this so special, because when we spend hours and hours deciding what font we want to use we want to make sure that our user can see it. Before webfonts a user wouldn’t be able to see a font if it wasn’t loaded on their computer. This means that we had to use font stacks that were websafe, meaning a high percentage of users were likely to have them installed on their computer. We now have access to web fonts. Unlike web safe fonts, web fonts are not pre-installed on the user’s computer. The fonts are downloaded by the user’s browser while rendering the webpage, and then applied to your text. This means that everyone viewing your website will be able to see your fancy fonts.

The last thing that we will go over with CSS is units of measurement. A monitor uses a measurement called pixels. But there are a number of ways to declare measurement on your webpage. I’ll point out the two that I use most often. I usually use pixels when defining font size and percentage for almost everything else (this helps when writing styles for responsive design). You can apply padding or margin to add space to any element on your page. Margin will add space to the outside of the element and padding will add space to the inside of the element. An easy way to remember this is; padding protects your insides. There are a lot of different rules you can write in CSS to make your webpage look exactly the way you want it to but for now this should be a good start.

Some great places to practice these skills:
Mozilla Thimble – an online free text editor
CodePen – it’s an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets.
Code Academy – an online platform that teaches you how to code for free.

Or if classroom learning is more your style, why not come to Bali and spend 10 days learning to code with me? Come and join me at the Institute of Code where I am currently teaching. Our intensive web-dev course will teach you HTML, CSS, and JQuery. You will also learn how to use Github and the static site generator Jekyll. Our immersive environment is a refreshing approach to education. By putting you in a comfortable environment with nutritious food, inspiring mentors, small class sizes and giving you all the resources you need you will be able to focus on learning intensively for ten days and you will walk away with the knowledge of how to build a website from scratch as well as a portfolio site which you will build as your final project.