So you have your website/webapp built and ready to go, but it just looks like a bunch of plain text and maybe some pictures on a white screen, how do we get it to look awesome like all the other websites we visit? This is where styling comes in! You can style your project by using a CSS style sheet. First create a new file titled style.css, then if you are doing a simple JS app, you can link to the style sheet in your index.html file by adding the following tag in between the <head></head> tags in your file:
<link rel="stylesheet" href="styles/style.css" media="screen" charset="utf-8">With the ‘href’ pointing to where the style sheet we just created is located in your project folder. If doing a React app, in your index.js file simply import it at the top like so:
import './style.css';Now that our website can see the style sheet, lets begin making it look pretty! The first thing I always do is choose a background color, you can do this by using the following code:
body {
background-color: rgb(85, 189, 189);
}The color can be in the form of RGB values or names (like ‘blue’). If you are using VS code, hovering your mouse over the color will pop up a color chart allowing you to simply click on the color you want with sliders for shade and opacity!
Next lets learn a little about how CSS works, if you want to pick a certain section or sections of your project to style, you can choose them by using the class or ID names. To choose a class, you type it like so with a dot at the front of the classname:
.results {
border: 3px solid green;
}This selects the div with the classname ‘results’ and adds a solid green border to it, allowing search results to stand out to users!
To select an element through its ID, use a hashtag instead:
#createPlaylist {
margin-left: 40px;
}This chose the div I had created with an id of “createPlaylist” that contains all the elements needed to create a playlist and moved them on the screen 40px from the left edge!
You can also select all elements just by using the elements name like so:
h1 {
text-align:center;
}This will take all large headers used in the app and center the text to the screen.
If you have many different divs/elements that you want to style the same, like have them all centered, you can just add the classname to them like so:
<div class="navbar">
...
</div><div class="welcome-pic center">
...
</div><div class="bio center">
...
</div>
then the CSS:
.center {
text-align:center;
}will center both the welcome and bio divs, but not the navbar.
CSS can be used along with Javascript to add cool features to your website, like displaying and hiding different things as the user interacts with the site. In my playlist app I use Javascript to add the ‘hidden’ classname from a that will hide elements from a user who is making a playlist:
makePlaylist.addEventListener('click', (e) => {
...
sidebar.classList.add("hidden");
});Then, the CSS for hidden:
.hidden {
display:none;
}makes it to not display anything!
This is just the start of all the cool things you can do with CSS, check out the tutorials at the W3 school to learn how to take your app to the next level with great styling!