Sunday, February 23, 2014

Digging in to CSS Code: This is getting serious!

Courtesy of http://www.slate.com/articles/life/family/2012/05/training_wheels_don_t_work_balance_bikes_teach_children_how_to_ride_.html

Learning code for Web Design has just become a little more complicated. It's like the first time you rode a bike without the training wheels. CSS (Cascading Style Sheets) is like riding the bike of HTML (HyperText Markup Language) without those training wheels! Don't get me wrong. It's not that learning CSS is difficult. The crux of the matter lies in the intricate details of each aspect of a webpage. For example, think about the way boxes of information appear on a website such as www.myciti.com. When looking at this page, you will notice a grey box at the left that allows the user to sign on to his or her banking or credit card accounts. That box is more than just a few lines.

CSS allows the web designer/developer to shape the way the box looks and add color and depth. Oh, and let us not forget "padding". Yes, padding is another detail needed to ensure that text and windows within that box are spaced correctly and evenly. The web developer also has to type in code that will set margins, width, height, font type, font size, and even the way the box and the elements in the box will "float" on the page. Float refers to the position of that box in relation to other elements of the web page. So, your CSS code may look something like this:

#content{
 display: block;
 width: 960px;
 margin-top: 15px;
 float: left;
 background: #ffffff;
 border-radius: 10px;
 border: 6px solid #638e22;
 padding: 15px;
 margin-left: 15px;
}

There is a lot of code in that little piece. But it tells each browser that opens your webpage what to do with the content that the code is directed to. I know it looks complicated. But, I promise, it's understandable. And, when done over and over again, it can even become second nature!

There are lots of great resources out there to help a person learn more. I'm using www.w3schools.com and www.udemy.com. I have also used www.codeacademy.com in the past. All of these have some great ways to learn code. If you have the desire to do so, I encourage you to get started!

Come on, take the training wheels off.

No comments:

Post a Comment