Moving On! Learning to Style a Website from scratch
(without the help of a handy style toolbar)
Okay, secret: I have found my hidden passion. I have gone my whole life loving languages, loving writing and never realizing that I LOVE coding.
For the past couple of days I have been working my way through the CSS module in Codecademy. I found this one to be a bit more complex because there are so many possibilities with design.
As we learned in my previous post, CSS is a set of rules that apply to the HTML structure. and allows for the webpage to have a design and a layout.
The HTML file never changes and can be styled differently using different CSS files.
Usually, web developers will have a separate CSS file from the main HTML file. This allows the CSS file to be used to style a number of separate webpages without needing to re-code the style elements into the main HTML file for each web page.
There are a lot of CSS rules that allow styling of html elements.
A CSS rule is made up of:
A selector is the part of the HTML code that you want to style, for example h1, or all of the elements found in a div class section of the code (<div class="header")
A property is the design category that you want to change such as color, font size, or font style.
A value identifies the specific design element such as red, yellow, 12px, bold.
We can target the style of a particular section of the website (i.e. "class") by using dot (.). For example:
In the example above, the .header selector applies blue text colour to all html elements nested within <div class="header">.
You can also combine selectors to become more specific, in case you want all of the paragraph elements within the header to be coloured blue, but not other elements of the header.
There are a number of CSS properties available to style html elements. For examples, colour, font-family and font-size.
1) Colour:
CSS knows the names of 140 different colours, which is way more than most actual humans (before today I had no idea what colour chartreuse was). But colours occur on a spectrum and there are millions of potential colour options. What if we wanted "Facebook blue" or the exact shade of Christian Louboutin red? Both colours will have an RBG value of a hexadecimal number.
RBG (red, blue, green) Values range from 0-255 where 255 is the brightest. You might recognize is as looking something like this: RBG (25,93,140).
This same colour will also have a hexadecimal number, which ranges between 00 and ff, ff being the brightest.
In the case of RBG (25,93,140), its number is #195d8c and it looks like this:
And would look like this in the code:
2) Font-Family
There are three main font-families:
- Arial, Helvetica, sans-serif;
- Times New Roman, Times, serif;
- Courier New, Courier, monospace
Fonts can be either serif (meaning they have little decorative squigglies in the letters), sans-serif (meaning they are plain) or monospace (wherein the letters and characters are all the same width).
3) Font-Size
There are three different measurement systems for font size: pixels, ems and rems. The most common system is pixel.
There are many other properties available to change the style in CSS:
- background-color
- this property sets a background colour for an HTML element
- background-image
- sets image as background for HTML element
- border
- sets the width, style and colours of an HTML element's borde
- padding
- allows for space between the content (text) and the border
- ex: padding: 23px
- to have different padding around the border, you can use following properties:
- padding-top
- padding-bottom
- padding-left
- padding-right
- margin
- allows for transparent space around multiple html elements
- similar to padding, the amount of space available in a margin can be specified using:
- margin-top
- margin-bottom
- margin-left
- margin-right
- to allow for maximum space usage, you can set margin-left and margin-right to auto, which means the margin will take up as much space as possible.
- If you write 'margin-right: auto', the element will move to the far left of the screen. If you write 'margin-left:auto', the element will move to the far right of the screen.
- If you write 'margin-right:auto' and 'margin-left: auto', the element will be centered.
Using CSS in a Webpage
Ex:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
</head>
<body>
<h1> The Employability Project </h1>
<p> Rocking CSS </p>
</body>
</html>
where,
You can also specify a single font file for the entire website. In these cases, it is best to code this reference into the html code as well.
So there you have it, a distillation of everything I learned from Module 2 from Codecademy. I would really recommend you actually do their lessons instead of just reading my blog post though - because their lessons are laid out really well.
