{"id":17,"date":"2012-05-04T23:56:24","date_gmt":"2012-05-04T23:56:24","guid":{"rendered":"https:\/\/learnwebcode.com\/?p=17"},"modified":"2016-03-29T01:36:43","modified_gmt":"2016-03-29T01:36:43","slug":"what-is-css","status":"publish","type":"post","link":"https:\/\/learnwebcode.com\/what-is-css\/","title":{"rendered":"CSS Lesson 1: What is CSS?"},"content":{"rendered":"

So you want to learn CSS? Great decision; CSS is the<\/em><\/strong> language for web and graphic designers to learn. Short for Cascading Style Sheet, CSS is the language used to add style to HTML elements. If you are unfamiliar with HTML you will have little use for CSS, so I recommend you begin reading my HTML Lessons<\/a>.<\/p>\n

A World Without Style<\/h2>\n

Imagine you have a web page written in HTML with your main heading inside a <h1> element and a few paragraphs in <p> elements. Without any CSS, most web browsers will render your page in a plain black text, with your <h1> in a large, bold font. Your paragraphs will fill the entire width of the browser, resulting in impossible-to-read line lengths (the human eye prefers only around 12 words per line). To put it bluntly; your pages will look horrible.<\/p>\n

CSS To The Rescue<\/h2>\n

We need CSS to add our own custom styles; we need CSS to add color, size, columns, and layout; we need CSS to beautify our typography; we need CSS to add background textures and images. If good HTML is the key to an organized, accessible web, then CSS is the key to a beautiful web. CSS puts the design<\/em> in Web Design.<\/p>\n

\"With<\/p>\n

How It Works<\/h2>\n

Cascading Style Sheets are simple text files saved in a “.css” extension which contain style Rules<\/strong>. For example, let’s imagine we had a <h1> heading element on a page, and we wanted to make it orange, and center aligned. Here is the code we would add to our .css file:<\/p>\n

h1 {\r\n    color: orange;\r\n    text-align: center;\r\n}<\/pre>\n
Let’s Dissect The Code<\/h2>\n
Relax, I don’t expect you to understand this code yet!  Although you have zero training to understand the syntax of the code, if you speak English odds are you can make a little sense of it.  The following graphic explains the syntax of the code:<\/p>\n
\"Anatomy<\/p>\n
Our CSS Rule begins with \u201ch1\u201d which is our CSS selector<\/strong>.  The selector tells the web browser which HTML element we wish to style.<\/p>\n
Next, the word \u201ccolor\u201d is a property<\/strong> and \u201corange\u201d is its value<\/strong>.  A property and value pair together and create a declaration<\/strong>.  We create complex style rules by stringing together multiple declarations, which are separated by semicolons.  This entire piece of code, including the selector and declarations, is known as a CSS Rule<\/strong>.<\/p>\n
Finally, directly preceding, and directly following the declarations we enclose our Rule in curly brackets (found on your keyboard by holding shift and pressing the buttons directly to the right of your P key).<\/p>\n
That\u2019s it for today\u2019s lesson.  You\u2019ve learned a great deal of new material, so let\u2019s recap.<\/p>\n