CSS and XHTML: Borders

A Quick Guide to Borders

Border Styles: The border-style property

There are 8 border styles:

1. solid
2. double
3. groove
4. outset
5. dotted
6. dashed
7. inset
8. ridge

A solid border is a solid lined border around your content. A double border is a double lined border. A dotted border gives you a dotted border. A dashed border gives you a dashed border. A ridge and groove border are self-explanatory like most of them. An outset border looks like it rises from the page, and an inset border looks like it sinks into the page.

You write out the border-style property like this:

border-style: solid;

or

border-style: outset,

etc. 

 

Border Width: The border-width property

You can indicate the border-width using the descriptive words:

1. thin
2. medium
3. thick

You can also indicate the border-width using pixels:

1. 1px
2. 2px
3. etc.

You write out the border-width property like this:

border-width: thin;

or

border-width: 4px;

 

Border Color: The border-color property

The border-color property gives your border color. To indicate the color, you can write in the name of the color, or you can use hex codes or rgb values.

You write out the border-color property like this:

border-color: blue; (color name)

border-color: rgb(0%, 21%, 120%); (rgb value)

border-color: #ff0000; (hex code)

 

Indicating Specific Border Sides:

From the book, Head First HTML: With CSS and XHTML, "Just like margins and padding you can specify border style, width, or color on any side (top, right, bottom, or left). You can specify each side of the border independently."

Here is a list of the border-style/width/color side specific properties:

1. border-top-color
2. border-top-style
3. border-top-width
4. border-bottom-color
5. border-bottom-style
6. border-bottom-width
7. border-right-color
8. border-right-style
9. border-right-width
10. border-left-color
11. border-left-style
12. border-left-width

You write them out like this:

border-right-color: yellow;

border-right-style: double;

border-right-width: medium;

You can mix up each side, making it something different or you can make all sides of the border the same. 

 

Stay tuned for the next CSS and XHTML post! :)

CSS and XHTML: The Box Model #2

This post is straight from page 396 of the book, Head First HTML: With CSS and XHTML.

There Are No Dumb Questions

Q: It seems like knowing this box stuff would be important if I were someone creating the software for a Web browser, but how is this going to help me make better Web pages?

A: To go beyond simple Web pages that use the browser's default layout, you need to be able to control how elements sit on the page, as well as the relative position of other elements. To do that, you alter various aspects of each element's padding and margins. So to create interesting Web page designs, you definitely need to know something about the box model.

Q: What's the difference between padding and margin? They seem like the same thing.

A: The margin provides space between your element and other elements, while padding gives you extra space around your content. If you have a visual border, the padding is on the inside of the border and the margin on the outside. Think of padding as a part of the element, while the margin surrounds your element and buffers it from the things around it.

Q: I know they are all optional, but do you need to have padding to have a border or a margin?

A: No, they are all totally optional and don't rely on each other. So you can have a border and no padding, or a margin and no border, and so on.

Q: I'm not sure I get how elements get laid out and how margins fit into that.

A: Hold that thought. While you're going to see a little of how margins interact with other elements in this chapter, we'll get way into this topic in Chapter 11 when we talk about positioning. 

Q: So other than size, it sounds like I can't really style padding and margins?

A: That's basically right. Both are used to provide more visual space, and you can't give the padding or margin a direct color or any kind of decoration. But, because they are transparent, they will take on the color of any background colors or background images. One difference between padding and margins is that the element's background color (or background image) will extend under the padding, but not the margin. You'll see how this works in a bit.

Q: Is the size of the content area determined solely by the size of the content in it?

A: Browsers use a lot of different rules to determine the width and height of the content area, and we'll be looking at that more in-depth later. The short answer is that you can set the width and height yourself if you need control over the size of the element. 

 

If you want to learn more about padding, margins, and borders, wait for the next post. ;)

CSS and XHTML: The Box Model #1

What is The Box Model? No, it's not having green eggs and ham in a box, nor with a fox. According to Head First HTML, "It's how CSS sees elements. CSS treats every single element as if it were represented by a box."

What the hell does this mean? (Watch your language please.) This means that The Box Model is applied to ALL elements, inline and block elements. Paragraphs, images, headings, lists, block quotes, everything is surrounded by an invisible box. 

I'll explain further. I'll explain how Sue sees it, I mean CSS. (Damn Glee!)

Imagine CSS is a person. CSS's vision differs from ours. Do you know how bees can see a wider range of light than humans can? (Well now you do!) CSS is similar in that she can see a wider range of "light" than we can. And that extra "light" that allows bees to see more colors than us, allows CSS to see extra "auras" of boxes around XHTML or HTML elements. 

Not only does she, CSS, have the power to see these invisible boxes that surround XHTML elements, but if she so decides, CSS also has the power to make them visible to us.

Before we describe how CSS can make them visible to us, let's first go into what she sees that we cannot. 

CSS sees Content Area, Padding, Margins, and Borders. These are the invisible squares, or boxes, that surround our XHTML elements.

According to Head First HTML, "Every box is made up of a content area along with optional padding, border, and margins. The content area ... holds the content (text or an image, for instance). The content area is surrounded by optional transparent padding. An optional border can be placed around the padding. And finally, an optional transparent margin surrounds everything."

Imagine a square with text inside of it. This is the content area. Imagine another square around the content area, this is the padding. Padding creates whitespace between the content area and the border, and it can be used to position the content area however you please within the border.

What this looks like is a square within a square, although the padding is transparent, so you can only see the space it creates if you have a border. You can position your content square anywhere within the border square with the padding. It can be centered within the larger square. It can be moved in the upper right corner of the bigger square, the bottom left corner, wherever you want it. Adjusting the padding helps you adjust and position your elements however you want within its' border.

The border surrounds the padding, and you can make it however thick or thin as you desire, you can give it any color you wish, and you can make it solid, dashed, or other styles. From Head First HTML, "The border surrounds the padding and, because it takes the form of a line around your content, borders provide visual separation between your content and other elements on the page." 

The margin surrounds your border and it creates space between your element and the surrounding elements. Adding margins helps with positioning your elements on your web page. The margins, like padding, are transparent and are visible only to our friend CSS.

These are the boxes that CSS sees, the content area, padding, borders, and margins. We can never visually see padding and margins, which position the elements, the content on the web page, but we can visibly see the border if we choose to add a border via CSS.

 

To learn more about The Box Model, go forward to the next post. ;)

 

My new tech blog project/ Sharing my CSS, HTML, and XHTML knowledge with You!

Hello! I had to do a reading assignment for my web design class. I'm reading the text, Head First HTML: With CSS and XHTML. My homework: Read chapters 10, 11, and 12. What do I do instead of just reading the text?

I think: I'm going to create a video series and post it on Youtube! And I'm going to record myself reading the text in a British accent! I record the intro video 3 times, but the sound doesn't match the video and it keeps getting cut off when I upload it to Youtube. I realize that the end goal is to finish my reading assignment, and this is taking too long. I switch to a new idea.

I think: I can still create a video series! I'll create a power point via InDesign. I'll create separate audio via some program that sounds like audiobug, but I keep on forgetting it's real name. And I'll gather photos and import all of these to Final Cut and make my video there so the audio is for sure going to be on track. Then I'll upload it to Youtube! 

I finish making the first slide to the power point and quickly realize that this idea's benefits do not outweigh the costs when my end goal is to simply read and master 3 chapters of my text. This idea is not time effective.

Okay! New idea: Blog about my readings! This is the perfect idea. I want to teach what I'm learning because I know that is one of the best ways to learn something. I love to write. My chances of having any technological problems through blogging are slim, and this idea is more time effective. I've also wanted to blog on this topic for a while. I'm writing about it in my creative writing ideas blog, yes, ... well, web creation is creative, and creating content is writing. :)

Why couldn't I just read my homework like a regular person? Because I need creativity to drive my life. It excites me. It makes my experiences engaging, and it livens my senses. 

So, you techies and non-techies are in for a treat! If you want to learn HTML, XHTML, and CSS - I will sum up and explain all of my knowledge from the 650 page book, Head First HTML: With CSS and XHTML. 

I'm starting backwards, where I am currently in the class. I'm starting with chapters 10, 11, and 12 (and soon 13). These chapters cover the box model in CSS, divs and spans, layout and positioning, and tables and lists. Then I'll back track to the beginning topics afterwards. 

Soon I'll start writing about my internet marketing adventures, the things I do and use, so you can do and use them too. :) But for now, I'll stick to HTML, XHTML, CSS and of course - Creative Writing Ideas. 

If you are thinking, "What can this girl possibly know about web design?", you'll soon find out if you continue to read. :)

I've had one web design client, and made her a website to promote her book, A Seven-Year Goodbye. You can check out my work here: http://www.asevenyeargoodbye.com. 

I'm working on a second website for another client to promote her book, Self-Love: The Only Diet That Works.

Enjoy the learning experience! I know I will. :)

 

Creative Writing Ideas: Test Post

Creative Writing Ideas

Creative Writing Ideas Do Not Harm Babies

Babies Harm Creative Writing Ideas

There is a common misconception that creative writing ideas harm babies, but this is untrue, it is actually the other wya around.