Cascading Style Sheets? Tips for the Uninformed

A code-hikers’ guide to CSS

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.

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.

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

Seriously, I use it for Everything

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.

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.

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-cards
border: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.
All CSS baby

These are just the basics but should take you a long way. In order to not bulk this blog up, I may release a second part getting into more specifics.

Happy Coding

Sources:

Full of Blogs of Specific cool CSS stuff — http://csstricks.com

Responsive Buttons — https://fdossena.com/?p=html5cool/buttons/i.frag

W3Schools, a resource of arguments involved in CSS code — https://www.w3schools.com/

MDN Web Docs, another resource about code structure — https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store