Advanced CSS Styles
DISCLAIMER: This is meant to be used for advanced users, but even beginners can dabble in it enough to get some basic design changes complete. Use at your own discretion.
Using Advanced CSS Styles is a way to format your text and/or images to look differently than the default styles loaded in by your designer. I must give one word of caution: be careful not to go overboard. Just because there are many options to make your text look different, doesn't mean you have to use them. With that being said, let's get to the tutorial.
- Log in to your website manager.
- We're still working on the Text Editor/Resource Content box so pick a page in your site to edit and scroll to the Text Editor window.
- We'll be working exclusively with the Edit CSS Style icon. It looks like this:
- First, highlight a word or two of text, or an entire line or paragraph. Then click the Edit CSS Style icon:
- Helpful Hint: When working in the "Edit CSS Style" popup window, you can preview the changes you have made by clicking "APPLY".
On the TEXT tab, you have several options.
FONT - Use the FONT pull down menu to select a font style. The reason that there are three choices per font group, is that for a font to work on a website, the user viewing the website has to have that font installed on their computer. If a user does not have the first font listed, the site will fall back to the next font and so on. If the user does not have any of the fonts, a generic font will display.
SIZE - For the font size you have two parts: the physical size and the units. Choose any size, either numerically (ie 15) or relatively (xx-large) and then choose units. I recommend using either pixels or ems. Most of the other units of measurement are meant more for printing, but unless you know what you are doing, choose pixels or ems.
STYLE - This offers an alternative way to apply bold, italic or oblique.
LINE HEIGHT - Choose normal to reset an already adjusted line height, or choose value and type in a number and choose a unit of measurement. I recommend sticking with % for line height (aka line spacing). A number between 100% - 200% should produce a nice result.
COLOR - Click the Browse Color Picker icon next to the color box and choose a color then click APPLY.
DECORATION - Refers to the type of underline/overline the text will have. You can check one or more.
WEIGHT - Refers to the amount of "boldness"; a higher number represents more "boldness".
VARIANT - Use this option to make the text show in small caps.
CASE - Make the text capitalized, lowercase or uppercase. - For the BACKGROUND tab, there are several options as well:
BACKGROUND COLOR - This sets the background color. Use the color picker and click APPLY.
BACKGROUND IMAGE - Choose a background image by clicking the Browse icon, just like you would to add an image into your page
REPEAT - Alters the way the background image displays: no-repeat (will not "tile" - will only show one time); repeat (will "tile" both vertically and horizontally, filling up the entire element); repeat-x (will "tile" the image horizontally); repeat-y (will tile the image only vertically).
ATTACHMENT - Choose fixed to have the background image stay in place if the page is scrolled. Choose scroll to have it scroll with the rest of the content
HORIZONTAL POSITION/VERTICAL POSITION - Use these to change the position of the background on the element. - The BLOCK tab has several options as well:
WORD SPACING will make the spacing between words larger or smaller depending on the value (number) you enter and units you choose
LETTER SPACING will make the spacing between letters larger or smaller depending on the value (number) you enter and units you choose
VERTICAL ALIGNMENT will adjust how the text displays in relation to images or other elements around it. View the Editing Images tutorial for details on how this option works.
TEXT ALIGN gives you an alternative way to align text left, right or justified.
TEXT INDENT allows you to indent text a certain number of units.
WHITESPACE refers to the area around the element. Choose normal, pre, nowrap, or add a value (number).
DISPLAY refers to how the element you are editing displays: inline will keep it on the same line as the preceding element; block will put it on it's own line; none will hide it so it doesn't show up at all. The others I am not familiar with. - The BOX will give you even more options.
WIDTH/HEIGHT allows you to choose the width and height of the element you are editing - stick with pixels or ems for the units.
FLOAT is another word for align so float left will align left, etc.
CLEAR is useful if you have two or more elements that are both floated left or right, but you want the bottom element to clear down below the element immediately above it so they do not sit next to each other.
PADDING gives your element a "cushion" around it and you can specify top, bottom, left, and right and each size can have it's own values. This is useful for creating some distance between neighboring elements.
MARGIN is similar to padding and for the sake of simplicity in this tutorial, just use one or the other. - For the BORDER tab:
Your element can have 0 - 4 borders and you can style each border all the same or differently. The border can be a regular line, dashed, grooved, dotted, etc. First choose the type of border, then the size, and then the color (work from right to left) - it's pretty self-explanatory. - On the LIST tab, this will give you options on how your bulleted or numbered lists will display:
TYPE lets you change the bullets or numbers into other characters such as squares, circles, roman numerals, etc.
BULLET IMAGE allows you to choose an image for each bullet instead of the default disc or number
POSITION allows you to exactly position the list bullet (or image or character you chose) with the content in the list: choose inside, outside, or a number value for even greater flexibility. - The POSITIONING tab allows you to change how your element is positioned on the page or within the parent element.
blog comments powered by Disqus