CSS is probably going to be the most complicated thing that will cross your path on your journey to making your own personal website. CSS can either make or break your site, but there isn't a wrong way to style your site.
CSS makes it possible to style your site in all sorts of ways, such as adding animations, colours, backgrounds, images and even more!
There are 3 ways to do CSS, and I'll explain all of them.
Inline CSS is probably the worst way to style your site, and you should only really use it when you want to change 1 thing. It would become tedious to style everything induvidually only to realise you don't really like it. I'd say avoid this one.
You can do it like this:
<p style="color:pink">Hi!</p>
This is the easiest and best way to style. It keeps everything contained in 1 document and it's easy to go back and change anything you'd like. I use this one all the time!
Your CSS is then contained in the "Style" tags that go under "head" like in the example below!
You can do it like this:
<head>
<style>
h1{
color: pink;
}
</style>
</head>
You can link an external .css file to your website. This is great when you've got 200+ lines of CSS and it is confusing you. Just a reminder that you need to upload this file to Neocities as well.
You can do it like this:
This goes in the <head> of your HTML!
<link rel="stylesheet" type="text/css" href=".css file">✩For the sake of this tutorial, I will assume you are styling inside of your HTML file or have an external file linked!✩
Colouring is one of the easiest things you can do in CSS.
h1{
color: pink;
}
To colour text, we use this line of code. Obviously you can make this whatever you want. The H1 is a placeholder, if you want your paragraph text to be pink, you'd do this:
p{
color: pink;
}
html{
background-color: pink;
}
HTML is used whenever you want to color something sitewide, you can also use body!
You can also add images as backgrounds in CSS, just like this!
html{
background-image:url("path to your image here");
}
h1{
border: dashed;
}
There are much more borders than just 'dashed' so here's a list of all of them! Try it out, find the one you like the most.
You can also specify how thick or thin a border is:
border: dotted thin;
OR
border: dotted thick;
Dotted thin
Dotted thick
To round the corners of your border:
border-radius=5px;
To add images to your border:
border: solid transparent
border-image: url("image path here") 30 round;
border-width: 15px ← Change this to suit your image
A div is a sort of bowl in HTML. It holds other code that you can style using CSS. This is helpful when you want to make something like a homepage and you need to make a lot of boxes. You can make one like this:
<div class="container">
<p>This is a container</p>
</div>
Your div can be called anything. I recommend giving it a name like "container" so you can style it as such:
.container{
background-color: pink;
border: dashed-thin;
color: white;
}
That CSS looks like this:
This is a container
Oh no! What if you wanted only the text to be white? Don't worry. It's easy to specify! Instead of putting: "color: white" into that container, let's do this:
.container{
background-color: pink;
border: dashed thin;
}
.container p{
color: white;
}
Now our container looks like this:
This is a container
Did you see what we did there? We specified that the 'p' inside of our container is white, not our border. We can do that for all sorts of things, such as: h1, h2, divs, etc.!
✩When referencing DIV's in CSS, we always place a full stop before the name of our div, specified in the "div class" inside of your body/HTML!
Example:
.(name of your div){}
OR
.(name of your div) p{}
When you code, you will realise that everything sticks to the left. What if you don't want that? There are 3 magical lines of code I will introduce you to, this is called centering with flexbox.
h1{
display: flex;
justify-content: center;
align-items: center;
}
OR
h1{
margin: 0 auto;
}
Margins add space around a div or thing in HTML. When we use 'auto' it will space it automatically in the middle.
.container{
margin: 24px
}
If you specify 1 value, in this case, 24 pixels, it will make it 24 pixels all around. You can use:
to specify a specific margin you want!
Padding does something similar to margin, but it just adds space on the inside.
.container{
padding: 15px
}
If a bright blue link isn't your style, it's very easy to change it. I'll show you how to change the colour on hover as well.
a{
color: pink}
What was done above is simply changing the colour.
But hover over that link and it's not pink anymore. We can use the :hover function in CSS to change that though.
a:hover{
color: red}
Now when you hover, it changes colour. In CSS, this combined code would look like this:
a{
color: pink
}
a:hover{
color: red
}
One of the easiest ways to find your fonts is by using Google Fonts. Just follow the instructions on their site and you're good! I use this literally all the time!
For Neocities, a lot of people use a layout generator. I use a couple. You can use some of the things we learned here to customise your layout!
CSS Grid GeneratorIf there's anything you'd like me to add or explain a bit more in-depth, ask in the main chat! I hope this helped! (❁´◡`❁)