skunkbear
Span and font-size

We can easily write text in a webpage between the body tags and put them on new lines using a break tag, but the text has stayed the same size. Sometimes you may want smaller or larger text. We can change the text size of the whole webpage by adding some style into the body tag like we did with a background color. Instead of using background-color though, you use font-size like so:
That code says that, for all the text in the body section, you want the font size to be 200 percent bigger than the default. The default that web browsers set text to is 16 pixels. A pixel is one of those little dots on your screen. So if you stack 16 dots up then your text is 16 pixels high. That height of 16 pixels also goes by another name, an "em". In the code above, we told it to be twice as big, so 32 pixels high, or 2 ems. You can use percentages, pixels, or ems to set your text size.

Sometimes you just want to change the text size of one word or one line of text. Maybe you'd even say a "span" of text. Luckily, there is two tags we can put around text that we can attach a style to. They are span tags: <span> text goes here </span>. That's how a normal span is written. Without adding any style, it wouldn't change the text in anyway. Spans don't change anything, they are just an empty container to put things in and add style to. You can add a style in the same way that we did in a body tag like in this code:
Inside the first span tag we put the code: style="font-size:70%". That sets the code to be 70% the size of the default size. After writing "Little crazy world" We used the ending span tag that has a backslash "/" in it. This indicates that the span tag is over and to stop making code 70% smaller. Then we added a break tag so that the next text will be on a new line. That text we set with pixels. Twenty pixels should be a little bigger than the original line that says "Hello Crazy World!". The last span is set using "2em". That makes it show up at 2 times the default of 16px which is 32pixels.

If you want to have some real fun, you can even use background-color again in the span instead of the body. Just make sure you separate the font-size property from the background-color property using a semi-colon ";". Check this out:


submit to reddit

More: CSSHTMLfont-sizeempixel

Source: Seth | 2012-05-14
The break tag

I've already taught you how to make your first page and change the background color. You can write whatever you want on it, but you may have noticed that you can't make the text go to the next line by pressing the enter button like you can in a word processor. I think the easiest way to move to the next line is to use a break tag that looks like this: <br> . Just remember that br stands for break. Here's some sample code:


Notice that one line break tag moves the text to a new line, and two line breaks will skip the next line and leave a space. You can put as many break tags as you want in a row, but I recommend just using a max of two. After that, you should probably be using margins and padding, which is some CSS we will get to another day.

submit to reddit

More: HTMLbrline break

Source: Seth | 2012-05-11
CSS already? Background Colors!

After you check out Your first webpage you can write a white web page with all sorts of black letters on it. A white background isn't always that fun though is it? You can easily change the color with a little style, CSS style that is. Forget the "CSS" is even there. It stands for cascading style sheets, which I'll tell you more about later. Just know that for now CSS is used to change the style of something on a webpage.
So in the first web page we included this code:
The reason our page is white is because it has a white body. The background-color of the body is set to white as the default, but you can change it by putting changing the background-color using style in the body tag like so:
That code will change the background color to blue. Just don't forget the quotes. Bascially it reads like: the body's style includes a background color set to blue. You can write common colors just like that in plain English. You can also pick any color you like at ColorPicker.com. It will let you select a color and then give you a color code that you can copy and paste. I picked a nice green color and put it in this code:
and here is the code again with the necessary HTML tags around it to make it a full webpage:


Make sure that if you are using a color code instead of plain English, you put a # sign before the color code. Now you can change the background of your page to any color you like!

submit to reddit

More: CSSstylebackground-color color code

Source: Seth | 2012-05-10

Recent Posts:

Repeating background image

Don't forget to comment your work

Layout your webpage using divs

Link it together

Images- the img tag