CSS is Awesome!

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:

Screen Shot 2015-08-26 at 6.41.26 PM

Screen Shot 2015-08-27 at 6.27.50 PM

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!).

Screen Shot 2015-08-27 at 6.27.44 PM


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!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s