CSS or Cascading Style Sheets are what make the Web look great. A little knowledge in CSS can take you a long ways. From background images to drop down menus, CSS is a key component to all websites with any sort of styling.
All of the information that your browser receives about a web page is neatly written in words and symbols that mean something to the browser. Most styling properties of a given web page are words and symbols that identify specific colors, spaces, shapes and images. These are classified under CSS.
If you are using a Content Management System (CMS) from Dirt Bird Productions, you may run into to some CSS within your site. It may prove useful for some advanced techniques within the management system.
Some basic building block info on CSS.
Every item in a web page has an identifying tag. Tags can be unique or can identify more than one thing. If the tags are unique they are written in one of two ways, as an id or as a class. For example, the following picture has a unique tag id called “tutorialPic.” Each of these paragraphs has a default tag called “p.”
Using these tags, we can identify where to apply the style. If we apply a font style to “p,” then all the paragraphs will have that font style. If we apply a style to "tutorialPic," then only the image taged with that id will accept the style. Generally speaking, you won't run into id or class tags withing your content management system. You may, however, find it useful to know what they are when you see them.
Once you have identified where you want to apply a style, you must use the correct syntax in order for the browser to understand what you want. The following sections describe some of the variables to use when styling an object within your CMS site.
Using CSS within your CMS – Centering an image within your blog post.
At this point all CMS sites developed by Dirt Bird Productions have an integrated tool bar at any user input point. (This tool bar is called the CKEditor and is the thing that allows you to upload images, change fonts, add links etc.) You will identify it with the following image.
Open the image browser by clicking the image button as shown above. Next click the blue “Browser Server” button, a pop up window should open. Click “Upload files” in the top left corner of the window. Browse the files on your computer and find the image you want to upload then click upload. Make sure the image is highlighted in blue, then click “Insert File” (to the right of the “Upload Files” button).
Now that we have an image to work with... Find the tab labeled "Advanced" in the top of the Image Browser and click there. Under the Advanced tab, you will see several fill in spaces. Find the one titled "Style." It should already have some words in it that apply to the width and height of the image. Leave those and add:
margin-left:auto; margin-right:auto; display:block; padding:5px;
Now click "OK" and see how your picture is centered.
Explain the Code!
CSS can be broken down into two parts. First you must always have a property. In this case the properties are width, height, display, padding, margin-left, and margin-right. Following each property is a value. In between the property and it's value is a colon. These three things, the property, the colon, and the value make up a decleration. Each decleration, you'll notice, is seperated by a semicolon. It's important that you don't mispell or forget the semicolon and colons because then your styles will simply not work.
Let's take a look at each of the declartions that you applied to your image and figure out what they are doing.
- display: block; Declares how an item is displayed. In this case the value "block" is used which means that the image will have a line break before and after it to insure that no text can float to the left or right of it.
- padding: 5px; Padding adds some empty space to each side of the image. In this case we used 5 pixels
- margin-left: auto; / margin-right:auto; Margin adds a margin to the left and right side of the image. The value auto allows the browser to decide how much white space to add thus centering the image for us.
If you have more questions about CSS check out this website: http://www.w3schools.com/cssref/default.asp
Back to Part 2: Web Pages from Server to Computer