Cascading Style Sheets? Tips for the Uninformed

4 min readJan 5, 2021

In our bootcamp, when we got to the topic of styling our websites they gave us a simple tutorial and told us to go scour the internet for other sources. The reason they did this was because it’s difficult to ascertain a way to teach everyone CSS when everyone is on different levels of knowledge on it. Second there are a ton of resources out there to go ahead and learn how to do almost everything with it, you just need to know what to google.

Now how can I give you enough tips that you can learn what to do on a moments notice? Well I can’t, but I can start you off to help you start running.

Rule 1# : Find a way to declare your element in CSS

There are 3 ways to call on an element to manipulate it in CSS.

By id: #final {
CSS Code Here
}By class: .className {
CSS Code Here
}and Finally by it's tag i.e. <span>, <h1> ,<img>h1 {
CSS Code Here
}

Out of those 3, the tag is the most general way to manipulate an element. Using this will manipulate every type of tag that falls under this tag’s name. So if you know for sure that you won’t be doing anything else by all means use this one!

The other two give you the benefit of choice, to be specific id and className allow you to declare specific elements. You can give every element it’s own id and/or className. Given that nature, it means you can use the specific name or id to be able to manipulate. It’s here where I do majority of my work in CSS work.

Rule #2: Experiment and Rule#3: Google

This rule seems a little strange to give as a tip, but I promise you this will be your best bet to learning as quickly as possible. Are you looking to make a border? Start typing border and see what CSS tries to guess you’re trying to do. You can google any one of those traits that CSS tells you and find out which one will benefit you

Google everything that you think you can do in CSS, most likely someone figured it out and wrote a blog in a digestible format for most novice users in CSS.

Rule #4 Knowing Where to Put the Code

I know I cheated with rule 2 and 3, but here is a more specific tip. When you start getting into nested elements in CSS make sure that you are putting your code in it’s proper place. Meaning if you create a Container Div to render in Cards then make sure your div is in charge of margins and how to display those cards. Your Cards should be in charge of how to display anything that goes in them; text, images, links, etc.

Rule #5 Declaring objects in specific Elements

Now you know where you are manipulating you items, time to manipulate general things that are in them. Let us say you have a Container that renders out multiple Cards, and those cards have buttons to render more details. To select those Buttons use :

.game-card button{ 
//^^Use this method to ask for all buttons in any game-cardsborder:0.1em solid #FFFFFF;
border-radius:0.12em;
box-sizing: border-box;
background-color: transparent;
color: black;
display:inline-block;
font-weight:300;
height: 75px;
width: auto;
margin:0 0.3em 0.3em 0;
padding:0.35em 1.2em;
text-decoration: none;
text-align:center;
transition: all 0.2s;
}

You can also declare an object for when you hover over it

.game-card:hover{
animation-duration: 3.5s;
animation-iteration-count: infinite;
animation-name: bounce-6;
animation-timing-function: ease;
box-shadow: black;
}@keyframes bounce-6 {
0%   { transform: scale(1,1)      translateY(0); }
10%  { transform: scale(1.1,.9)   translateY(0); }
30%  { transform: scale(.9,1.1)   translateY(-100px); }
50%  { transform: scale(1.05,.95) translateY(0); }
57%  { transform: scale(1,1)      translateY(-7px); }
64%  { transform: scale(1,1)      translateY(0); }
100% { transform: scale(1,1)      translateY(0); }
}//When you hover over the game card with a mouse it will bounce with this animation until you stop hovering over it.