CSS Introduction: Web Design Series Part 1

CSS

CSS Introduction

Welcome to a new CSS web design series here at Clear Coded Programming. Introduction to CSS. CSS or (Cascading Style Sheets) is a style sheet language used to describe how a document written in a markup language is displayed. In this series we will use CSS to style HTML or (HyperText Markup Language), beginning with the basics and working up from there to more advanced things like animations with CSS and responsive web design. This is simply an intro to CSS, so don’t worry about understanding everything. We will go over it again. We’re just getting your feet wet.

Before we get started, You should know what the very basic framework of any web page is. Below is an example. This is basically the skeleton of every web page you will ever create. We will discuss this more down the road. For now just know that everything that is visible on a web page is coded inside of the body element; whether it’s text, images, or a video. The code goes in between the opening and closing body tags. You can identify a closing HTML tag by the /.

basicpageframework

There are three ways to use CSS to style our HTML. They are inline styles, internal style sheets, and external style sheets. In the next few examples, I’ll be using some HTML and CSS code. Again, don’t worry if you don’t understand it right now; this is just a brief introduction, and these examples are just for a visual sample of what we’ll be working with.

1. Inline style: We add our CSS styles directly into our HTML tags. For example, if we wanted to add some CSS code to make the text in a paragraph red; we would do it like this:

Inline CSS sample

It’s as simple as that with inline CSS, but this isn’t used too often as it can slow your page load time if there is too much code used directly inside of the HTML document.

2.Internal Style Sheet: Another option and more commonly used is an Internal Style Sheet. This is a style sheet that you would create in the head element of your HTML document. You create it with style tags and would make one for every HTML document that you have. It would look something like this:

Inline Style Sheet

Everything in between the style tags is the internal style sheet. It is where all of your CSS code would go for that specific HTML document that it is in. In the example, we have what are called CSS rules. There are two: the body rule, and the p (paragraph) rule. After we specify what HTML element that we want to style, we give it design properties. These go inside of the curly brackets ({ }), and every property ends with a semicolon (;) to tell the browser to move on to the next thing. In the body rule above, we tell the browser which will load and render our HTML and CSS code from top to bottom, that we want the background of our web page to be gray; we want the color of the text to be blue; and the font Tahoma. If someone was running a browser that for some reason couldn’t display Tahoma font, we give it a default option of arial. This is just a sample; you could add as many fonts as you want in there starting with the font that you would want the web page to use first in quotes followed by one or more backup fonts. Don’t forget the comma’s to separate.

In our p or paragraph example, we did what is called an override with the font color. Since in the body rule we said that we wanted all of our text on the screen to be blue, when we say color: white in the p rule, we are overriding the blue property that we set earlier. Notice how we use color: to change the font color instead of font-color:. You will see as you learn CSS that certain things might look a little strange to you. I for one don’t know why they chose to use color: instead of font-color. I like simple, easy to understand code. This is just one example of why practice and experience with CSS code is essential to learning and retaining the information, and it’s pretty easy to remember. To change the color of text you use the color: property.

One other thing that I just want to touch on quickly is the p rule that we used above. In later lessons, we will be using things called classes and id’s to make changes to specific items. So for example, if you had 10 paragraphs on your page, and you wanted 5 of them to have orange text while the other 5 have green text; then you wouldn’t use the p rule. This is because when we give a p rule instructions of what design properties it should have; we are giving every paragraph on the page the same design properties (styles). You will see later on how we can control what paragraphs get what styles. A quick visual of what that rule might look like follows:

CSS rule with a class

There are many more examples of class usage that we’ll cover later on.

3.External Style Sheet: Finally, the last and most popular way of adding CSS code to your HTML document is by using an External Style Sheet. The only real difference between this and an Internal Style Sheet is that it isn’t embedded into the HTML document. It is saved to an external .css file, and you would link to it in your HTML document so that you can pull the styles from the .css document. Below is what the link would look like in the HTML document, and an example of an external style sheet.

External Style Sheet Link

External Style Sheet

Developers may only use one External Style Sheet, or many depending on how they code and how big the website is. The reason for using multiple style sheets is that the developer could set many different rules and later decide which one to link from. The great thing about External Style Sheets is that they are reusable. So if you have a web design that you like a lot, you could reuse that style sheet on another website that you create in the future. Simply copy and save it into your website root directory. And then altering the CSS style sheet would have no effect on the original.

Naming of External Style Sheets becomes very important when you decide to use more than one or the same one multiple times. You should always name things accordingly. Something you could easily understand. For example recipeSiteStyles.css would be easily identified as the style sheet for a recipe website that you’re working on.

Before we finish up with this post, we’ll talk about text editors. Throughout this series, I’ll be using notepad++. There are many text editors that you can choose from. You could even use regular notepad. The main difference between notepad and notepad++ is that notepad++ gives you syntax highlighting and a bunch of other features to make your code more readable. Regular notepad works just fine but in black and while. Some other popular text editors are Sublime Text, TextWrangler, UltraEdit, Atom, Bluefish, and Coda. If you’re just getting started with HTML and CSS, I suggest a free text editor and when you’re ready you can do a quick search for the best-paid text editors for Windows or Mac. If you want your text editor to have the exact display as in this series you could download notepad++ for free here: DOWNLOAD NOTEPAD++. This is the website where I downloaded it. I am not affiliated with this software in any way and I can’t guarantee a safe download. I personally have downloaded this software on many computers from this site and have never had an issue.

Well, that’s gonna wrap it up for this lengthy intro. I hope none of this was too confusing for anyone. The purpose of this introduction to CSS post was just that, an intro. Don’t worry about anything that you might not fully understand. We will go over it again. As we go through these lessons, we will often use the same code in different ways, so you’ll remember things better; the more you progress.

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: