Internet Business Centre - information for online business




Marketing Materials - Save up to 80%

2. Inline CSS

CSS Inline Style Sheets Part One

It may be a tad confusing calling them style sheets, but who am I to buck tradition? To use inline styles, you use the style tag, otherwise known as the style attribute. No big shock there then. For the purpose of our lesson, we’ll use the paragraph tag, but it could equally be the div tag for instance. Thus < p=style OK so that's lacking a little something, like a style definition, so to start off we'll add this.

< p style="color: red; font-family: arial; margin-left: 20px">This is the text on the page that will be affected< /p>

Note that the style will affect everything up until we close the paragraph with the < /p> tag. Oh by the way, please note that if you copy and paste any paragraph tags from these pages, you will need to remove a space between the < and the p and the space between the < and /. I had to put them in so you could see the code otherwise WordPress applies the tag to this page. What can you do huh? In the example above, if you haven't already guessed, we used the style tag to change the color to red, use the arial font and apply a left margin of 20px. If we would have used sans serif font instead of verdana, then we would have placed that inside of single quotes like 'sans serif'. Anytime you use two words inline, you must enclose in single quotes. Just a little techie aside here. The style= bit is followed by a set of instructions. The first part of the instruction is known as the property and the second part is known as the value. property:value So we specified color property to have the value red. The property and value are seperated with a colon : When using more than one property and value, separate those with the semi-colon ; color:red; font-family:arial or color:red; font-family:'sans serif' Simple huh? Since you catch on so quick, here are the most common things you are likely to define. font-family font-style font-variant font-weight font-size line-height word-spacing letter-spacing text-decoration text-transform text-align text-indent vertical-align Let's take a closer look at each in turn. font-family

< p style="font-family: arial">

You can choose your favourite font for this. One thing to keep in mind with the property is that everyone may not have your favourite font installed on their machine. If no other font is defined as a back up, then the browser will use it’s default font. You can choose an alternate font by placing more than one in the value section. You do this by separating each value with a comma.

< p style="font-family:arial, sans-serif">

This tells the browser that if arial is not installed on the surfers machine, to use the generic sans-serif font.

font-style>

< p style="font-style: italic">

Choose from normal, italic or oblique, the difference between italic and oblique is that some fonts are published with an oblique variant.

font-variant

< p style="font-variant: small-caps">

Your choices here are “normal” and “small-caps”, which should have been called “all caps” instead because that’s what it does.

font-weight

< p style="font-weight: bold">

Choose from normal, bold, bolder & lighter. Alternatively, you could choose a number 100, 200, 300, 400, 500, 600, 700, 800 or 900 with 400 being equal to “normal” and “700” being equal to bold.

font-size

< p style="font-size: large">

xx-small, x-small, small, medium, large, x-large, xx-large
Medium is generally the browsers default size, so you may see at one size and someone else at another.
smaller, larger
These two when used, will adjust themselves according to the parent element. If the section you were working in was defined as small and you used “larger”, then the “larger” value would adjust your new area to medium.

< p style="font-size: 18px">

Length – Use this to set an exact size by selecting a pixel size

< p style="font-size: 75%">

% – Use this to set an exact size by selecting a percentage

line-height

< p style="line-height: 120%">

normal – This is the default

< p style="line-height: 1.4">

Using a number. Number multiplied by the current font size to set distance between lines

< p style="line-height: 16pt">

Length – Use this set set a fixed distance between the lines

< p style="line-height: 140%">

% – Sets the distance between lines based on the percentage of current line size so the 1.4 and 140% are essentially the same. You pays your money and takes your choice.Continued in the next post..

Comments are closed.