I began to hyperventilate when my web dev instructor started his lecture on CSS. It seemed so hard and complicated, and I had no idea where to start or how to do it, even after watching his video tutorials over and over again. I then went to Code Academy’s website and started their online tutorial on CSS and now I feel like a million bucks! It seems MUCH easier to add your CSS onto a separate stylesheet rather than putting it all together onto one page, and trying to figure out how everything will look. I love the idea of it being separate, and from now on, I think I will use their method. In order for the 2-page method to work, it’s VERY important that I use this tag: <link type=”text/css” rel=”stylesheet” href=”stylesheet.css”/>
This will ensure that my HTML links to the CSS on the stylesheet next to it. It basically connects the two together.
I learned about all the different types of font-families, colors, styles, backgrounds, etc. and can apply them easily to any HTML. I learned that you can remove the underline on a link by using code: text-decoration: none, and I also learned that you can use backup fonts just in case you choose a font style that someone’s computer is not compatible with. This is simple, you just add a comma after the font-family, and then type in your other font preference, and when someone’s computer does not show that font, it will automatically display the next font you chose. I love it!
Here’s a few examples of what I created using CSS:
And I also learned how to make a button! You first use tags, and on your CSS stylesheet, you can add any type of styling that you want. In order to get those awesome rounded corners, you add a “border radius” to your CSS, and add whatever number you want, depending on how rounded you want your corners to be.
Here’s how the button turned out (yes, it’s a little basic, but hey I’m a beginner!).
And if anyone is ever interested in learning how to add your CSS to the same page as your HTML, you simply use the tag <style></style> and add your CSS in between the tags instead of linking your HTML to your CSS stylesheet page. Woohoo!