Posts tagged formatting

CSS3 Lesson 3: Background Information is Essential

Let’s have a look at backgrounds. In the previous two tutorials, I’ve covered borders and opacity. In this tutorial, we’ll cover some of the basic CSS3 additions to the background properties. If you have no idea how to deal with backgrounds in CSS, read my tutorial on backgrounds pre-CSS3. CSS3 is gaining momentum in the Web development world and many properties are already supported by most browsers (Firefox, Konqueror, Safari, and Chrome) as well as some minor browser (Opera). If you want to stay on top of the game, you have to learn the new stuff and employ the new techniques you’re presented with.

In this tutorial, I’m going to cover:

  • background sizes
  • multiple backgrounds
  • background origin/clip

Read the rest of this entry »

CSS3 Lesson 2: All About Borders

CSS

Okay, I’ve noticed some REALLY cool stuff on CSS3 online, so I thought to myself, how about I make my own experiment and teach you all about how to use this stuff?

Here are a couple of resources I’m using to learn about CSS3:

I’ll start with the topic that everyone is concerned about. BORDERS! Okay, why are borders so important? Well, In the Web 2.0 design standard, it’s all about opacity, rounded corners, shadows, and everything else that’s just super awesome looking. I’ve already explained the rounded corners and opacity previously. So, I’ll skip that part. If you’re this far, you should probably learn the basics about CSS standards of borders and the markup.
Read the rest of this entry »

CSS Trick: Disappearing Textbox

Remember that trick to show a sub-menu using CSS in my older tutorial? Well, I had an idea for a project of mine, and with a little help from my dear friend Raphael. Last night, I launched my little website project called “A Night Story” and made some tweaks. Ignore the story, it’s just a concept. If you hover over the word “city” in the text, you’ll see another textbox appear with more information about the word.
Read the rest of this entry »

CSS Lesson 6: Intro to Divs

Alright, alright. So I skipped all that fuss with horizontal navbars but that stuff is easy so I’ll create a short article on it later.

Let’s start with the <div> tag. It’s what I’ll be covering. Making use of div’s with CSS. You’ll need to know the following before we start the lesson:

If you don’t how to add CSS to your website, check out my CSS Intro tutorial and CSS Lesson 1.
Read the rest of this entry »

CSS Vertical Navigation

Finally! Let’s check out vertical navigation. This tutorial will cover different tips and tricks on creating the vertical navigation bar. You can read my article on Color Theory and about Color Scheme Designer for more info on picking colors for your navbar. Most navbars, as I’ve heard, depend on javascript for the more hardcore effects but I’ll show you how to create some dazzling, amazing navbars WITHOUT the knowledge of javascript. Which is great, because I don’t know javascript at all. Read the rest of this entry »

CSS Lesson 4 Lists

Lists are an important part of CSS, they are used to primarily make navbars. I’ll cover some basics with you and how to set up your list. In my NEXT tutorial, I’ll show you how to make VERTICAL navbars. I know, I know, you’re asking, “Why are you splitting it up?” Well, mostly because I’ll have to cover vertical and horizontal navigation separately. There are tips and tricks to both, and although some apply to both, many do not. I’m starting out with lists all alone because it’s easier that way. When you need to review an item in CSS, you can switch between the different lessons and it won’t be all jumbled up.  I’ve found that numerous tutorials online do not explain this area thoroughly enough so I hope it will help you out.
Read the rest of this entry »

CSS: Lesson 3

CSS

Lesson

3

So, here we are, another CSS lesson. What do I plan to teach you today? Well, a couple of things, in my last Lesson, I discussed padding and borders among other things. Those are all part of what is called the “Box Model.” I’ll finish up discussing that theory with outline and margin. After that, we’ll look at lists and tables, probably in the next tutorial. So here’s what you’ll learn today:

Read the rest of this entry »

CSS: Lesson 2 Fonts, Padding, and Border

CSS Lesson 2

In lesson 1, I talked about backgrounds and text. Let’s move on, I’ll start out by expanding on the text manipulation with fonts and continue by the introduction of  what I call “general formatting.” General formatting includes the definition of padding, borders, margins, and outlines. At the end of the lesson, you should know how to create the above banner and more Read the rest of this entry »

CSS: Lesson 1

CSS Lesson1


CSS is a lot of fun once you start it, the same way PHP is a lot of fun. So here’s what I’ve learned so far.

  1. Ways to implement CSS
  2. CSS in DreamWeaver
  3. Backgrounds in CSS
  4. Text in CSS

Read the rest of this entry »

CSS intro

CSSintro

Okay, I know this topic is nothing new and you’ve read hundreds of tutorials about it, but for a newbie like me, it’s still fascinating.

CSS = cascading style sheets. Basically, CSS is a compilation of styles and formatting elements you can add to your HTML code such as different fonts, colors, and other. It has replaced older, more traditional tags such as <font> and <align>. The best way to use CSS is to create a separate .css file that you’ll link into your HTML code like this: Read the rest of this entry »

Switch to our mobile site