- Starting a new language: Forming your CSS document.
- Back to basi-css:The fundamentals of CSS structure and the jargon that comes with it.
- True colours: Intro to the importance of colour and how to add named colours, rgb, hex colour codes and hsl.
- Opacity: Adding a little more to your colours.
- Round Up: An overview of lessons I've learnt the last couple of weeks.
Here we are, entry three of the ‘Dear Developers’ series and so far I’ve explained why I’m learning to code, asked my stupid questions and have done the first basic few lines of code which are building the first page of my website.
I’ve been excited this week - not just because my website is currently looking as bland as a pile of concrete - but also because tailoring the way your elements look is much more exciting than just building the structure. In this entry I’m going to give you a quick run down of the fundamentals of CSS code and a glimpse into the spectrum of colour.
(After revising colours in CSS for the past week I find myself losing sight of who I am and writing out the word as ‘color’. It’s hard to grasp. )
Here’s a brief chapter layout if you want to skip some bits!
Starting a new language
I gave a brief overview in my first article, but just as a reminder, these Cascading Stylesheets are the central system which describes the presentation of your web page, including fonts, colours and layout.
To start styling your HTML there is the option to write some CSS code within the same document. However, it’s not really recommended as your work can start to get quite messy, and maybe a lil unnecessarily long. If you’re sharing your document with someone else, this might end up with your fellow developer might find your code difficult to follow.
Despite this being the case, you can still make a note of how to do it. To add CSS to your HTML document you add <style> opening and closing tags within the <head> element. All your CSS should sit within the <style> tags.
Like so:
Now for the right way! It’s recommended that you start a new document within Sublime (or ATOM) and giving it a name which wraps up in ‘.css’. You can see I’ve done that in the above image as well. This way you keep your two languages separate and your documents neat, tidy and easy to read.
So, how will the browser know that this CSS document refers to this specific HTML doc?
Simples, we link it! Slightly different to how we add hyperlinks in HTML - some familiar attributes popping up but a new anchor tag. The anchor tag is <link> which is self closing and there are three attributes to allocate to this element.
- Type: This refers to, you got it, the ‘type’ of document the browser will be reading. To link a CSS document, the value is always “text/css”
- Rel: This attribute refers to the relationship of the two documents and the value for this action is always “stylesheet”
- Href: You’ll recognise this one, this attribute requires the value that is the URL of the doc
Luckily, if you make your stylesheet within the same text editor as your HTML document and save it in the same place, you don’t have to worry about entering the entire link. Simply add the name of the doc as the value for href, so in my case “style.css”. (Shortcut: In Sublime if you type <link and hit enter, it fills out everything you need automatically.)
Back to basi-css
As you’d imagine, CSS has it's differences to HTML and a whole bunch of lingo that goes along with it. Let's shed some light on that here with a beautiful little infographic made by one of our lovely designers, Oleg.
The infographic above outlines the properties of a CSS rule. Here’s the essentials of what it’s made up of in a little more detail!
- A selector: This is the part where you state exactly which element you would like to style. Simply by beginning the rule with
pfor the<p>element,h1for the<h1>element,bodyfor<body>etc. - Curly braces: Similar to the tag function in HTML, the
{and}open and close CSS rules, which include a property and a value. - Property: This small phrase indicates what you will be changing about the element you selected. Such as font-family, font-size or colour.
- Value: The value of each property will provide in detail what should change in that element.
A few small pointers:
- Always add a space between the selector and the opening curly brace
- A value is always closed with a semi-colon
- A property along with its value is called a CSS declaration
- Start each new CSS declaration on a new line and with an indent - you can add several declarations to a rule!
- When you’ve completed the declarations and closed with the curly brace, this is called a CSS rule
- For easy reading leave a space between each CSS rule
So, just by adding a CSS rule as simple as this, you can start to see your HTML document show entirely differently in the browser.
I mean, I'm not going to sugarcoat it, changing the colour of my heading still leaves my website looking plain as hell, but we have to start with the basics right. This is something I feel is key to staying motivated, is that you can’t let the small steps demotivate you. They’re all part of a bigger picture. And to be honest, right now I’m less fussed about how my first website is looking but more on whether I understand how I actually got it to look this way.
"You can't let the small steps demotivate you. They're all part of a bigger picture."
True colours
However, things are about to get a little more interesting as we move on to the wonderful world of colour. My mother once told me that a great outfit will never consist of more than three colours, whilst that continues to be challenged in the fashion industry it seems to be the basis of a rule outlined by interior designers. The technique is known as the 60-30-10 rule refers to 60% + 30% + 10% proportion and is meant to give balance to colours used within a colour scheme.
"Colour is not something to be overlooked - it’s really not just a case of picking your favourites."
Each colour has it’s own connotations, both bad and good. Which is why it’s crucial to tie in a suitable colour which helps portray the message of your brand. If you’re launching a social network type thing and make the main marketing colours red, your users are probably going to be expecting to fall in love on it. Just saying.
For a lil’ more exposure on the matter, here’s some colour codes outlined by Wojciech Zieliński:
- Red: Passion, Love, Danger
- Blue: Calm, Responsible, Safe
- Black: Mystery, Elegance, Evil
- White: Purity, Silence, Cleanliness
- Green: New, Fresh, Nature
In CSS there are plenty of ways to throw some colour on it.
First up, it’s good to note that you can change the colour of the element using the color property and the background of the element using background-color.
Named Colours
These babies are real easy to grasp. There are 147 colours in CSS which are names and supported across most modern browsers in the most recent CSS language CSS3, which you are 100% not expected to memorise, don’t worry. (Although you might surprise yourself, the way I have with remembering the emoji clauses on Slack). There are plenty of sites, like this one, which give you the full rundown of the colours you can add to your css.
I'm using h1 as the selector for each of the following, just because. Here's how you'd attribute named colours:
RGB
This delightful colour system is based on telling the computer which amounts of red, green and blue are in a colour. With this combination, it gives you a wild colour palette consisting of over 16 million shades. Each of these three colours (R, G, and B) has the possibility of taking on a figure between 1 and 256. (Which gives you exactly 16, 777, 216 possible colours).
Here’s how to use RGB in CSS values:
The numbers which follow rgb in the brackets represent the value for each colour, red green and blue, in that order. Note that you can use rgb() for background colours as well. Remember to leave no space between rgb and it’s brackets.
Hex Colour Codes
You might be familiar with these. ‘Hex’ comes from the more technical term Hexadecimal. When you’re specifying an RGB color mixture, the values are in base 10 whereas the hex color codes use base 16, or hexadecimal base (hence the name).
Writing colours in this format means you get just the same number of possible colours as you do with using RGB. The two are actually very similar and you can convert back and forth between both RGB values and hex colour codes.
The same colour as the RGB value represents above would be written this way in a Hex Code:
Codecademy explains that if a hex color code is made up of entirely the same characters, the hex color can be abbreviated, like so:
HSL
Last but not least, there’s hsl, which stands for Hue, Saturation, and Lightness. Hue is what we understand as colour, but is the technical term for it - in hsl it’s represented on a colour wheel and can have values between 0 and 360. Saturation is the amount of grey in each colour, and it’s value is a percentage between 0%-100% (with 0% being the least amount of saturation and 100% the highest). Similarly, lightness is represented in the same way except it refers to the amount of white in a given colour, with 50% being normal.
You can use hsl colours in your CSS like this:
Opacity
Before I wrap up on my introduction to colour, let’s introduce opacity. It’s very common for developers to include opacity to their colour choice, however only RGB and HSL specifications can factor it in. Leaving hex colour codes and named colours out of it.
To factor in opacity, simply add a to the end of rgb and hsl. This a represents opacity and stands for ‘alpha’. The value of opacity will always be a number between and including 0 and 1, so you’ll often see it written as a decimal.
rgb and hsl can both factor opacity in. Hex colour code cannot.
So CSS offers rgba() and hsla().
In the example above, the alpha value has been set to 0.5 which indicates that the heading colour will be set to 50% of its normal opacity.
Round Up
There are some useful takeaways from this week’s lesson. The first being that it’s key to remember that many of the older browsers do not support RGBa, HSL or HSLa. There are ways around this, by simply introducing two CSS declarations with color properties, one with just rgb and the other with rgba. That way your website is accessible for everyone.
Even if you're a person who lacks in taste when it comes to colour, it doesn't matter! There are so many sites, like this one and this one, that designers use to guide their colour palettes and retrieve these 16 million colour spectrum. The internet is a beautiful thing.
"The internet is a beautiful thing."
I am finding that even at these early stages, I’m thinking differently when navigating around websites and browsers. Reminding myself of HTML elements that might have been used to control this and CSS elements that might have been used to create that. Already I feel like I have more questions to ask and have a new found respect for developers who sit there day in and day out at their screens writing and running new lines of code. It really takes it out of you! There is a lot of mental exercise going on here.
"I've found that sometimes there isn’t time to stick to the time allocations you’ve set yourself. The key thing is to not beat yourself up about it! If you’re enjoying it and want to learn, you’ll find an hour here and there, but there’s no pressure, and that’s the great thing about teaching yourself a new skill.
In learning CSS this week, I had the first experience where I felt a bit thrown or out of place. The hexidecimal colour codes with their being based to the round of 16 is not a sentence that really computes with me. I self declare that I am not a numbers person. I run from numbers and I’ve ran from them since I dropped maths at the age of 17. However, I am confronting it and trying to get my head around the things that I’m not comfortable with. So, for all the others that feel like that, I’m right there with you.
