SpaceHey CSS layouting from absolute scratch

Hi! I wanted to teach my partner (guy that wasn’t raised by computers unlike me) about CSS since he’s been interested in it for a while, so I’m making an approach on teaching him everything while keeping in mind that he’s (and maybe you too?!) not too tech savvy! I’m teaching him spontaneously, but I’m redoing every little session we have in document format so he can have it as reference, and as a bonus, you can have it too!

Although this tutorial is aimed specifically for SpaceHey, I think it’d be a great introduction to CSS and HTML for beginners (but I think it’ll also benefit intermediate and advanced students, tbh). I learned most of CSS by theming instead of making something from scratch. Whenever we have a blank canvas (it being an empty HTML we’d have to fill ourselves, without any styling and having to do it all from scratch…) we tend to get overwhelmed. I found that SpaceHey would be the easiest site to theme, since it lets us change almost anything. However, take this as your introduction and when you feel extra confident you can do something on your own, go for it! Not to sound like a 🤓, but CSS is actually really fun. (just a bit dangerous for ADHD. remember your basic necessities and that the passage of time exists.)

Glossary (Or what are these things)

Source: https://www.w3schools.com/ (Amazing site to learn)

General

Combinators

Root

It is the top-level element in the hierarchy. This means that it’s the parent of every other element. As an IRL example, take a plastic container. Throw in a few 3 small containers inside. And inside those containers throw even smaller ones. The biggest plastic container is the root, or the parent of every child container.

What we would need beforehand

For reference, I’ve mostly used Edge. There are some variations between browsers (most obvious being Firefox) but you should be fine with any. However, I’ll be giving examples from an Edge perspective.

Now, the first thing we’ll absolutely need is: Live CSS editor, and it does just that: https://github.com/webextensions/live-css-editor

Why would we need it? It’s an extension that when you click on it, it’ll show you a little window with a text box so you can add your own CSS, and it’ll immediately preview on the page.

There’s also something that accompanies the Live CSS editor: Disable Content-Security-Policy https://github.com/PhilGrayson/chrome-csp-disable

This extension helps when we are adding external image links to our Live CSS editor window - we won’t be making use of it in most of this guide, but in the last section we’ll learn how to add images as backgrounds, etc… We will have to click on this little Disable Content-Security-Policy icon on our extensions bar or either images won’t preview. Don’t worry, it’s not that your links are broken! By default, some browsers don’t let you add external image links to a local preview of the site for security, but this extensions disables that restriction. Don’t worry again, it’s not “dangerous”, we’re only using image links from image hosts that are completely safe. (My favourite: https://imgbox.com/)

The next thing we’ll need is a blank, layout-less SpaceHey profile.

If you’re not just starting on SpaceHey, I recommend having a side account (which you’ll set as private) just for layout testing where we won’t have a layout at all, and when we do, we’ll test it there first instead of our main account.

Some things I also recommend adding to this blank profile: Some dummy text in every field you can (status, mood, interest, about me, etc…) AND at least 2 comments and 2 replies in the same comment. This is so we can style those too!! If you don’t have comments, the comments table won’t show up at all. You can add these comments yourself. I also recommend having at least two friends (which you’ll already have, if you haven’t deleted SpaceHey and An from your friends list.)

Whenever you get these at hand, let’s start with the next section.

Colo(u)r Scheme Introduction

In CSS, there’s a pseudo-class called ":root". This points to the root element, and in HTML, the root element is always, of course, html (<html>). We’ll mostly use it to store something interesting about CSS, which is variables.

Variables are a way of adding a name to a property value, so you don’t have to type it over and over if you ever wanted to change it en masse.

(Optional) I didn’t understand that!

How do variables work? You have a text where you’ve written a lot, but there’s a few instances of the word “apple”. They’re scattered all over the text, so if you ever wanted to replace every “apple” word with the word “pear”, you’d have to look through the entire text and manually replace every “apple” to “pear”. (let’s ignore the replace function of every text editor for now)

So, how variables work is that instead of typing “apple” in your original text, you’ll go something like… “fruit”. Or to be more realistic as to how variables work, “var(--fruit)”. At the top of your text, you’ll write a new line that points that –fruit = “pear”. So every instance where you’ve typed “var(--fruit)”, would be replaced with “pear”. If you changed the –fruit to be equal to “apple”, then it would also replace every instance of var(--fruit) to “apple” instead. apologies for autistic explanation

SpaceHey uses variables like how everyone else does: for Colour schemes. Do you see that dark blue at the top, where the logo is? Or the light blue in the links bar? Or the orange in some headings? SpaceHey uses variables to colour these. So our first step in layouting will be changing these variables.

First thing we’ll do is point at :root. How so? Grab your Live CSS editor extension by clicking on its icon from the extensions bar so the window shows up. You should have something like this:

The window itself will already give you a hint on how it works, so let’s do just that! Like I said, let’s point at :root.

What will we do here? We’ll change the variables of the SpaceHey colour scheme to the colours we want. How do we even know which variables they are using? Well, we’ll use a really useful tool that we should start familiarising ourselves with from the start. Right click the page and click “inspect”, or “inspect element”, might depend on each browser. For Edge, it’s just “inspect”.

Developer tools will show up. Or DevTools. It’s a window with a lot of information… This’ll show you how the HTML is structured, but will also show you the CSS either on the side or bottom of the window. It depends on the browser and also how you set it up (I think). But what we’re looking for is the CSS tab, or “styles”. Scroll to the bottom, or near the bottom of the CSS window until you come up with a colourful array, which will be the colour scheme. That’s how you’ll find it on any site that has a colour scheme. But I’ll of course show it to you here for reference:

That’s the SpaceHey colour scheme! Now, there’s a lot of colours so… Where are these supposed to go? I’ll show you:

This looks crazy, but if you analyse it’ll make sense. In written form:

--gray : for the background color.
--logo-blue : The dark blue at the top and the title text for the interests section.
--darker-blue : The blue for most links.
--lighter-blue : The light blue for the links bar and the contact and interests border & heading.
--even-lighter-blue : for the background of the title in the interest section.
--lightest-blue : for the background of the description of the interest section.
--light-orange : for the headings of blurbs, friends and comments and also the background of the user in the comments table.
--even-lighter-orange : for the background of the comment in the comments table.
--dark-orange : for the heading text in blurbs, friends ,comments, etc.

You might see a few more in the screenshot of the DevTools, but some of these aren’t used on the actual profile page. Also, there aren’t any variables for some stuff that we’d like to change too… Like, the white background of the main box, or the “count” colour (which is a red, but doesn’t use a variable so we’ll have to manually change), or the overall text, or the text colour of the friends’ icon… We’ll tackle these in the next section, but for now, let’s get something done.

What we’ll do is change these colours. Let’s say we wanted to change the background colour. (If you want an image… We’ll do that later on too. Step by step !!) What would we do?

Go into our Live CSS editor window and inside our :root, we’ll add the variable we want to change, in this case, –gray is the background colour. Then, after a colon (:) we define the colour we want. I want it pink and cute so… I’ll go with just “pink”!

You can see it changes immediately. A reminder: this won’t take effect on the profile at all and it’s just a preview for testing purposes, when we’re done and satisfied with the preview is when we’ll stick this into our profile in between <style></style> elements.

For colours, you can use all of these: Source: CSS Colors - GeeksforGeeks

You can see that the first method is “color names”, but how do we know which colour names CSS supports? This is a great page for colour names, which includes them being separated by hue and even some cool palettes: CSS Named Colors: Groups, Palettes, Facts, & Fun

For Hex or RGB colours, you can just google “color picker”, and get an interactive color picker where you can choose your desired colour and copy the code for it.

So, if we already made our background pink, but we want to also make the top dark blue bar a “lightcoral”, what do we do now?

We’ll add a new line, of course, and add the variable name of the top bar, which in this case is “--logo-blue”. And after a colon (:), our desired colour.

**Don’t forget to add a semicolon (;) after every line!** If your code doesn’t preview, then you probably missed a semicolon!!

Now… What would you do next? Using the references I gave you as to which variable is which colour in the profile, complete the rest of the colour scheming and then move on to the next section, where we’ll change colours to the elements that don’t have a variable.

The HTML hierarchy and your first properties

How does your colour scheme look? Does the white in the main box maybe look off?

For mine it fully doesn’t. But we’ll change it slightly either way for demonstration purposes.

What if you had, instead of mine… A dark themed layout? What if you wanted the box being dark?

First, we’ll have to learn how the Spacehey HTML works. In HTML, we have some named elements that we use for accessibility (screen readers, etc) these being “main”, “header”, “nav”, “footer”, etc…

These will all be inside the “body”. And the body will always be inside the “html”. Spacehey uses “nav” “main” and “footer”. So, a summarised layout of the Spacehey’s profile HTML would be like this:

Of course, inside nav, main and footer there are a lot more other elements that we’ll slowly learn.

(Optional) But also… What is this “container” div?

Let’s say we had a site we created from scratch in HTML. But we wanted to make it a little less wide, since by default all divs will take 100% of the width of the parent (this being the body, if you placed all your nav, main and footer into the body directly.). But if we wanted to make it, say, 50% of the width of the screen so there’s a little peek to the background (just like Spacehey is) it would be a pain to make each one of our nav, main, and footer have a 50% width. Plus it will cause issues in the long run. A solution to this is making the parent of all these elements a 50% width… But we can’t do that to the body, it doesn’t support it and it just would have a lot of issues. Our last alternative and the best one would be to just create a new element and call it container… And contain everything inside, while setting it as 50%. All the children will take the parent’s width, so it’ll work perfectly. This is exactly why SpaceHey has a container, like most other sites structured similarly will probably do too. Oh, and as a tip that you’ll probably not use yet, is that to center your container after setting it as 50% width, you’ll have to margin:auto; it. There’s a joke going around CSS beginners that it’s so hard to center a div… It is not!!! Just margin auto it. Pleas

So, if we wanted to change the white background we see there… We’ll have to style “main”. So let’s add that selector! Remember to close the :root brackets with a “}”, and then we can add our main selector in a new line. Like so:

Now, for the property we’ll need to change the background color… Yeah, it’s “background-color”. Change it to whatever you’d like, but I’ll temporarily change it to black to demonstrate something.

You might have seen that our text is absolutely gone. Because the text is black, just like the background. If you chose something different but still dark, the text would be a bit hard to read. (I wish more people had this in consideration, I’ve seen amazing layouts but they’re just… Straight up unreadable and it just makes people like us give up as soon as we open those profiles LMFAO)

So what property should we add to change the text color? If you guessed “text-color” or something similar you’re absolutely wrong because it’s just simply “color”. This is apparently because it’s used aside from text-only too, like if an element had a border with an unspecified color, it would grab the value you set as “color” too, alongside the text color.

So, if I wanted a readable text in a black background, I would personally set the text as white.

However I don’t want to. I want a cutesy gay layout so I’m going with something like this:

It’s alright so far. But it feels like it needs something else.

Maybe a border?

We should definitely add a border. But! Personally I’d put a border on the .container element. So how do you do that, and how do borders work?

Well, the “border” property, in its shorthand form, has three values: colour, style, width. These can be in any order, be it style, width, colour… width, colour, style… etc etc. But what do these stand for? Colour is obvious, it can be a colour name, hex code, rgb, etc… Width is the width of the border in pixels (example: 1px, 2px, 3px…). And the style, has to be one of these:

Source: https://www.w3schools.com/

So, as an example, I want an lightcoral 4 pixels wide solid border on my container. You might be able to do this by yourself by now, but if not, here’s a hint:

Add your own border!

But now… Why does it extend to the ugly footer there? Shouldn’t the footer have a background too? Why does it look off? 1. Because we selected the .container, and footer is one of its children. 2. No, for some reason in SpaceHey, the footer doesn’t have a background because it expects the body background to be a gray which would match with the footer, so we have to add one ourselves. 3. We’ll fix all of the odd stuff in the next section.

Annoying Things You Should Banish

First of all. Please, get rid of the ugly blue shadow on the links of the nav bar.

To do this, we’ll have to learn what does the “nav” element nest inside in the SpaceHey HTML layout.

Nav has two children: .top and .links

As you might have guessed, .top is the (originally) dark blue bar where there’s the logo, and .links is where we have our links. That’s the element we’re looking for, but if we select .links…

And add the property we’re looking for to remove the shadow (text-shadow:)

It just won’t work. Why?

So, .links is actually a parent of multiple elements, since it’s an “ul” (unordered list) element, and inside of “ul” elements we have a lot of “li” (list item), which is what’s happening here. We’re targeting the .links, (ul element), which is responsible for NESTING the links, and it doesn’t handle the styling for the links.

Inside each “li” element we also have “a” elements, which is the actual HTML element for clickable links. So that’s what we’re looking for, since it’s what has the shadow on it. So how do we select it?

Maybe? No!! No don’t do that!! That will select every “a” element in your page. So if you wanted to add a shadow to other link elements, this’ll create lots of conflicts. That’s why we Specify. How do we specify which element we want to point at? Like, just these links above on the top bar and no other link? We specify them by their parents (can be sub-parents, not only direct ones). So, if the hierarchy of the links is like this:

<nav>
          <div class=”top”>
          …
          </div>

          <ul class=”links”>
                    <li>
                              <a href=”link.com”>A Link!</a>
                    </li>
                    <li>
                              <a href=”link.com”>A Link!</a>
                    </li>
                    <li>
                              <a href=”link.com”>A Link!</a>
                    </li>
                    <li>
                              <a href=”link.com”>A Link!</a>
                    </li>
          </ul>
</nav>

We can easily go:

...right?

Only that we shouldn’t. Since .links is repeated somewhere else on the profile… You see the footer? There’s also a .links in there. It doesn’t have a shadow… but what if we wanted to alter the shadow there in the future too? We’ll have to be even more specific. We want to select the “a” elements inside “.links” element that’s only inside the “nav”. So we’ll be direct:

And that’ll be enough!

So let’s do just that. Banish the text shadow. Or… We can also change it.

Text-shadow, like border, has multiple values. This one has 4 though.

X position, Y position, blur radius, and color.

All of those are self-describing. This is the default shadow code for the SpaceHey nav .links a: text-shadow: 0 0 7px #095DC3;

So it isn’t a offsetted shadow, and has 7px of blur with the colour of #095DC3.

We can keep it simple and just do the same but alter the colour, like so:

Or, don’t add a blur at all and instead offset it for a cool effect:

What if we wanted a (kind of) full outline though? We can add multiple shadows, separated by comma. I like to do this:

As you can see, I give each shadow a new line break to keep it organised, and for every one of those values, I alter the values to be negative, positive, negative and positive, and positive and negative. That gives you a basic outline for text. If you chose a darker colour that contrasts better with the text colour it would look way cooler than mine.

Now that our links are cool, I’ve been wanting to mention something else too. I’ve been working until now by using my partner’s profile, but you might be editing yours in a logged in perspective. That means, you might be seeing “[edit]” links all over the place and instead an “edit your profile” button on the gray border where it says “ is your Friend.”.

I like to delete all of these, including the “ is your Friend.” thingy. Aside from getting in the way when you’re editing, (and in the Edit Your Profile thing, being hideous) you’ll be previewing your profile by how others might see it if you deleted these little links. So how do we do it?

These elements are called .edit-link, and .profile-info respectively. So I’m gonna do this with them:

“display:none”.

You can see I've separated them with commas: that’s how you would apply the same property to two elements at the same time. Let’s take advantage of that once again, because I’m going to tackle the footer now.

I’ve mentioned how it’s by default transparent and merges with the background… Which for the layout I’m doing, looks really ugly. So how about we give it a background?

As we’ve learned, to change the background colour we go “background-color:”, but if I want it the same as my “main” background… I’ll simply delete the background-color property from my main, and create a new selector with “main, footer” and add that property in there. Like so:

Butttt I want it also to have the same text colour as my mainnnnnn.

There!! We’ve efficiently saved. Uhhhhhh. Like 3 lines of text.

There’s another thing though… Why does the footer still look weird? I want it to merge with main!! Why is there spaces in between it and main?

When we don’t know why an element is doing something, we can go into DevTools again, (or inspect element), click This little button

And then select the element we’re puzzled about to inspect their CSS properties, in this case, the footer.

Ohh… Looks like the culprit is the margin. So we’ll fix that.

We’ll set the margin to 0. And of course, since we’re not changing the margin of the “main”, we’ll add a new selector for the footer only.

And done!

There’s a last thing we’ll change in this section: Some other elements that don’t have a variable but have an ugly colour we want to change.

One being .count (the element for numbers in the friends tab and comments tab).

And, this one’s a bit more specific (and slightly annoying): .profile .friends .person p

Images

A last extra section - Changing stuff to images!

For example, let’s imagine you wanted an image for the background. Just like the property “background-color”, there’s the property “background-image”. This is the way that property is used:

Where “link” is our image link. Like mentioned in the first section, my favourite image host is: imgbox - fast, simple image host to organise my graphics in galleries if needed.

However, there’s a specific way to use it, that people get confused on. For an image link to work on your code, the url has to end with an image extension. (For example: .png, .jpg, .jpeg, .gif…) so when we first upload an image to imgbox, it links us to a page to preview the image. It is not the direct link. So we need to grab the direct link. Let me explain with this image of a cat:

1. We’ll upload it to imgbox and be presented with this screen. On content type, we’ll set it as Family safe considering our content is family safe… I hope. This doesn’t matter much, it’s for organisation. Thumbnail option also doesn’t matter. Enable comments neither. Gallery option might be useful if you create an account so you can create galleries to organise your graphics for future use. But if you don’t care about this all, any option doesn’t matter so you can just start the upload.

2. Now it’ll get us to this page:

Ignore all the text in the text boxes, I know it can be tempting! But that doesn’t work, it’ll share the thumbnail instead of the full image. So what we need to do is click our image (on the little thumbnail!)

3. It’ll get us to this new page:

“Oh! So I just copy the link in the url bar?” No, it wouldn’t work since we can see the url doesn’t end with an image type (png,jpeg,jpg,gif,etc…) so what we would do instead is right click the image being previewed and then copy link. Now, when we paste it on our code we can see it ends in an image type:

“https://images2.imgbox.com/ec/c8/6B3oaDVQ_o.png”

Now, back to our property! “Background-image”.

We can apply this property to wherever we want a background image. For example… Want a big background on your profile, behind the main box like this?

We’ll let’s just do that! As you can see in the Live CSS editor window, we’ll target the body, and set a background image.

Your image doesn’t show? Well, as we can remember in the “things we need” section, you need to make sure you have the Disable CSP extension, now, find it in your extension bar and click it. When it’s active, it should colour up. (in purple). Now reload the page and re-open Live CSS editor and your image should show up.

Still doesn’t? Make sure your link is inbetween the parentheses. And make sure your link ends up in .png, jpg, jpeg, gif, etc.

Now if it shows up, but you think it’s looking ugly… continue to the next step.

Background image properties

Now, is your image repeating like the above example but you instead want it spanning across the entire page? Use the property “background-size: cover”

In this property, instead of “cover” we can add “fixed”, for it to be the same size and position when we scroll down the page. Alternatively, you can also use percentages, 1% to 100% to change your image size to a specific size.

Now, does it look weird that it’s not centered? For example, I’d like my cat’s face right in your face!

We’ll use “background-position:center”.

Yay!! And we’re done! Remember you can use these properties on anywhere, so if you want to change the background of the main box to, say, a cute, light pattern that doesn’t distract your eyes from the text you can use these properties but instead on the “main”, or anywhere else you’d like an image background.

Wrapping Up For Now

Now, the code you’ve got on Live CSS editor, youll copy all of that and paste it inside <style> </style> tags on your profile. For example...

There we have some basic Spacehey HTML/CSS lessons! Remember that you can ask anything under here or in my messages.. I’ll be glad to help!