CSS Text Formatting tutorials
In this tutorial, we will look at methods for creative use of text, and how traditional methods of typesetting can be utilized via simple CSS rules.
Related Tutorials
Changing Text Font and Color in HTML Editor
To increase impression of your future web site based on our web design templates maybe you will need to change text color or font style. There are some ways of doing that.If you want to change part of text or some words do the following. Select text, witch properties you want to modify.
CSS and Text
In this tutorial you'll learn how to have complete control over your text. Before having the control that CSS gives you over text, you were severely limited in how you could present your words.
How To Style Heading Tags
Now when it comes to heading tags CSS is very important. They can be styled in many ways using a number of methods: Complete image to visitor with hidden text - Image Replacement Technique. One Background image as whole background with normal XHTML text - as on this site. Repeated background with XHTML text on it - Good to reduce bandwidth. Background and text all in css by use of colours and border.
Basic CSS With Text Formating
You Will Learn How To Change A Background Color And How To Format Text In A HTML Document Also We Will Find Out How.
Text Rollovers
In this tutorial, I'm going to discuss my thoughts regarding creating and using text-based link rollovers. How to change effect the mouse passes over a link.
Horizontal Menus That Grow on You
We're going to create a horizontal row of boxes containing link text. When we move the mouse over one of these boxes, it's going to get taller and the text larger and bold. I'll link to a finished example at the end of the tutorial.
Heading Tags
Heading tags are often set up to host styles to unify a site. While a site may have all the text in black, if all the titles on the site were say blue or red, there would be unity in the page look by text size and color.
Cursor Types
The typical browser will display the mouse pointer over any blank part of a web page, the gloved hand over any item that is linked (click-able) and the edit cursor over any text or text field. Within CSS you can change those properties to have a variety of different cursors display on your page.
Text with shadow using CSS
This tutorial explains how to create a text with shadow using CSS.
Hanging Punctuation
Hanging Punctuation refers to the technique of positioning certain typographical elements, such as bullets, quotation marks on pull quotes, etc. into the margin of a document, so that the main text that the glyph highlights remains flush with the rest of the body copy around it. Often seen in print, rarely used on the web, hanging punctuations can help keep the flow of your document and make the text easier to read.
Cursors
To change the cursor on an individual link, copy the code below, and change LINK TEXT to the text you want to use for your link, and change YOUR URL to the url you are linking to.
Accessible Graphical Menus
When designing a web site, it's generally a good idea to keep your sites navigational elements text-based. This has several advantages, like being search engine friendly and easily accessible to screen readers and hand-held devices. Let's face it, though, sometimes that's not always practical and what the site design really calls for is a nice menu comprised of graphics in which the actual menu text is stylized. So, here's a little trick that will give you the best of both worlds. We're going to build a graphically-based navigation menu out of an unordered list.
Positioning
These are CSS commands that allow you to place images and text exactly where you want them on any browser.
RevealTrans Filter
Great quick effect. Images and text go away and then come back.
CSS and Borders
You can set borders to just about any HTML element. Most likely you will be surrounding blocks of text and images.
CSS Classes
This is a down and dirty quick use of Style Sheets to set up Classes of text styles. It's fast and it works.
Text Rollovers
These are great for aiding the user in navigation while not slowing the loading of your page through image flip rollovers.
CSS Forcing Words to Wrap
CSS is great isn't it? This little snippet helps you force that unruly text to wrap using a div.
Pure CSS Popups
Learn how to create static-text popups purely through the power of CSS without using Javascript.
First Letter
Styles can be added to the first letter of a paragraph of text much like you would find in magazines. To do this, Pseudo-elements, which add different effects to some selectors, or to a part of some selectors, are used.
Expandable/Collapsible Content
Sometimes content itself, not presentation or navigation, brings a subtle usability challenge. When page text is unavoidably long and complex, the mass of material can lead to confusion through a loss of context.
Hexadecimal Color Notation On The Web
When designing elements for your webpage, you will often be called upon to specify a color. For example, the code for a span shown below specifies that the color of the text within the span will be yellow.
CSS and Links
Applying CSS to your links allows you to do all sorts of nice roll-over effects and advanced text highlighting. You will also be able to have many sets of links on a single page, all with different formatting.
CSS Tutorial For Newbies and Everybody Else
If you're familiar with HTML, know how to use a text editor and want to add some style to your pages, this tutorial will get you up to speed with CSS (Cascading Style Sheets) in no time!
Z-index, background images and hidden text-Search Engine friendly
In this tutorial I will explain how to use background images with a different tags to place them one on top of the other using absolute positioning and z-index.
Scrollbar Colouring
Using CSS you can change the colours of scrollbars that appear at the edge of pages, text areas and frames. The below CSS defines these colours. Different parts of the scrollbar have different names (explained below).
CSS Button Tutorial
I'm going to show you what we can do with buttons. I am assuming you know CSS. Also, for this tutorial, use Notepad which, with a little manipulation, is the most powerful text-editor around. Check out it's custom scripting language later on. But for now, let's make a basic button. By the way, you will notice my HTML is a little different from most others. That's because it's XHTML. You can look that up later.
Style Sheets and Backgrounds
You can do a lot with text and page backgrounds through CSS commands--in fact, if you have a MySpace account, that's the only way to customize your page! Here we've tried to run down all available events (including multiple backgrounds) and describe how to use positioning to set background watermarks on your page.
CSS Comments
CSS comments can be made for a single line or multiple lines, but regardless of how you pass your comments they are always passed to the client PC and interpreted by the client browser. When commenting it's best to be as brief as possible as you're continually serving text in your applications that is doing nothing other than slowing the transfer and execution of your pages down.
Add an icon before or after a link
CSS has a matching syntax for selectors which makes it possible to match the filename extension at the end of an href. This makes it easy to add an icon which relates to the link before or after the text part of the link.
ACSS: Aural Style Sheets
How does your page sound? The basic concept is that, with ACSS, disabled assistant browsers can "read" the text of a page to the person using the browser. Better yet, the ACSS commands allow you, the author, to set numerous "reads."
Pop Up Menu 3 - Images
This tutorial expands on my last CSS pop up menu tutorial. This time I will focus on how to use image "buttons" in the menu rather than plain text.
Line Height
With CSS, the height of a text line can be changed using the line-height property.
Table-less Forms
How to make a form with out using tables. If your a CSS freak like me you might have your own way of creating table-less structures, one of my favorites is creating table-less forms. In my example, I created a contact form which you will notice the name text floats to the left and the input field floats to the right.
CSS Pop Up Menu 3 - Images
This tutorial expands on my last CSS pop up menu tutorial. This time I will focus on how to use image "buttons" in the menu rather than plain text.
Block, Inline and Floating Elements
A collection of 21 FAQs/tutorials tips on HTML formatting models. Clear answers are provided with tutorial exercises on block and inline elements, specifying padding spaces and margins, specifying border width and color, transparent and non-transparent backgrounds, positioning background images, line boxes and text paragraphs, setting line height.
Checking Out: Progress Meters
The progress meter is a very common design solution used to indicate to the user's state within a flow. On the design side, much effort may go in to crafting a solution that is as visually informative as possible. On the development side, however, solutions range widely. I've checked out the checkouts at a number of sites and heres what I've found when it comes to progress meters: they're sometimes inaccessible and often confusing or unhelpful all because of the way in which they're coded. For those who use assistive devices or text only browsers, there must be a better way to code the progress meter and there is.
Improved CSS Hover Images
You see a lot of hover effects on web nowadays. When you hover your mouse cursor over a link it usually changes to something else - It doesn't matter if the link is an image or just text, there's usually some sort of hover effect in place. If it's a graphical link the hover effect is usually another image displaying the hover effect. This image is often preloaded on page load so that the user sees the effect right away, but there's also another way to do it. How about using just one image and changing its state/position it with CSS?
CSS Tutorial For Beginners
In this tutorial, you will learn how to: Create an external CSS file and link it to multiple HTML files; Embed and import a style sheet; Create inline style sheets; Use tap selector and class selector; Set up font sizes, colors, faces and styles; Set up background color and image; Set up margins, text-align and decoration; Create layers; Set up atributes of the table, and more...
 
Categories