How to CSS on an existing project. From a noob perspective.
So you’ve got this application you’ve made and everything functions just like you’d like but it doesn’t look to good yet. Okay so where do we begin.
First things first we need to know how to target our HTML elements on the page. Well how do we do that? CLASSES and IDs! Classes and IDs are probable the best way for you target anything on your DOM.
Assuming you do not have a CSS class already there are one of two ways we can incorporate one. One is you can add a “style” tag within your header.

or you can add a link to the CSS file using a “link” HTML tag within the header.

Once you have have the set up done this is where the fun starts. I have created three divs in my index.html file with some content inside I would like to print and there will be a link to it below.

You’ll notice some differences between the “div” tags.
- The first one does NOT have an ID or CLASS.
- The second div HAS a CLASS but does NOT have ID.
- The third one HAS an ID and NO CLASS.
What’s going on? Why are attributes missing? Worry not, this will all make sense soon. The “class” and “id” tags are going to help us target those “div”.
CSS
Now I’m going to go into my style tag and target all of the “div” tags and make the background color red.

and now if you refresh you HTML page it will look like this.

Yep, if you simply put an HTML tag which in our case was “div” you target all of the “div” elements. and within the curly brackets you can type in what style you would like to change for that particular tag. Pretty Neat. How do I know what I can change?
This link has a bunch of them: HTML Style
But wait now our “Yellow & BOLD!!” and “Green” are also red. Let fix that.

In my style tag I have put “.yellow_bold” to target classes named “.yellow_bold”. With that being said anytime you want to target a html class name wether its a h1, p, or any tag you need to put a “.” in the beginning. Now if we refresh our index.html page it will look like this.

Noice!!!

2 down 1 to go.
Now we need to target our ID tag. In order to target our ID tag we need to use a “#” followed by the ID we want to target. Like so

after refreshing our index page it will look like this.

Awesome! There is still tons more to learn from CSS but this was a quick introduction.
There are tons of other ways of targeting other elements https://www.w3schools.com/css/css_attribute_selectors.asp
