CSS Text Formatting tutorials
What if we don't want to use the crude instrument of styling an entire paragraph? How do we mark off arbitrary sections of HTML for styling? Let's take a look at another component of our style sheet toolbox: the "generic" tags, <div> and <span>.
Related Tutorials
Float bug fix in div to expand
Many of would find a problem when using a block(div) called a container with the background color, where you don't want to use float or height to the div. And in the inner div of the container you want to give float to it. You can find this issue in most of the browser like ie, firefox, the container will not expland as the inner div.
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.
Learn CSS: Border Styles and Properties
There are many different style and settings for borders in CSS. This tutorial hopes to teach you the basics of adding borders to page elements, div tags and images with various border properties.
Float and DIV
Learn how to use Div and Float properly.
Paragraph Tags
Paragraphs tags are used in a way similar to heading tags. They can unify a site. A paragraph tag often is used to determine indenting, spacing and other factors that will make your site stand out as unique.
Advanced CSS
In this tutorial you'll learn how to import stylesheets, how to use classes, ids and span, and how to use contextual styles.
Common XHTML tags defined in CSS
To make your life alot easier you can define the common XHTML tags you use on your webpages within your Stylesheet, doing this can define a certain tag globally and you’ll never have to modify it within your XHTML again! In this tutorial we will show you the XHTML tags you can define in CSS! If your just getting into CSS then this will be perfect knowledge for you later on!
Block Tags Explained
In this tutorial you'll find the detailed instructions on how to work with the block tags: their attributes, examples of usage, and other tips.
Heading Tags Explained
Heading tags are an integral part of SEO (search engine ptimization).
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.
Redefine tags and create classes with Css
Use Css to manage different types of html tags and create classes for personal style sites. Before planning a complex project that leads to the creation of an entirely web site with CSS, it's important to understand how CSS work.
Changing The Background
Learn how to setup your site, div or table background using css.
Rounded Div Corners
Easily round your divs corners.
Navigation With Lists (Horizontal)
To start off we need to use a basic list code. I have wrapped the list up inside a div because it makes it a lot easier to customize the entire list.
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.
Making div;s appear on the same line
In this tutorial I will show you how you can force two or more div's to be on the same line without any form invalid XHTML/CSS appied. This tutorial is a must if you have features like top bars on your website!
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.
Quick Tip: CSS 100% Height
I don't know about you, but I always get frustrated trying to figure out how to get my layout to stretch vertically to 100% of the page. I have a div that I want to stretch, but it just doesn't stretch. Now why wouldn't it do that? In this tutorial, I will share the solution with you.
Emulating the Fieldset Element
I've seen sites out recently who are using and abusing the fieldset tag to use for their layout. This isn't a good thing, since <fieldset> is meant to be for forms. To stop confusing search engines and users, I have come up with a simple div/CSS fix for you guys to use so everyone can be happy :)
Solving the CSS Padding Problem
This tutorial shows you how to solve the "CSS Padding Problem" - a problem that comes when you apply a padding style to a div, and the div's width expands.
ID Selector
CSS ID selectors enable you to define style commands that can be utilized by many tags.
Ways of Enhancing the HR Tag
Make your pages load quicker, and more cross browser compatible by using CSS to define your HR tags. Control there color, size weight, possition and more.
Grouping
Repetitive commands within CSS can be grouped in order to cut back on the repetition of code sent to the client to be interpreted. This enables you to give several tags similar attributes without have to explicitly state each command over and over.
External Stylesheets
As you can probably tell from the name this means having an external file and then linking to it from your page so you don't have all that code in your head tags in every single page.
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.
Basic CSS Beginners
Using CSS, you can change the appearance of all of you pages by editing only one document! No more <font> tags everywhere! You can even define the position of boxes. (divs and spans) Learn the 3 ways that you can use stylesheets to change the appearance of elements.
Customize Your Textarea Boxes
Spice up your TEXTAREA boxes, using nothing but STYLE tags to give a totally new and flashy look to TEXTAREA boxes.
Learn CSS Link: Classes and Properties
Learn how to create and customise links or a tags in CSS. This detailed tutorial will teach you about all the link properties for customising fonts.
Basic Drop Down Menus
This tutorial will teach you how to make a nifty drop down menu (or whatever variation of it you like). In this tutorial I will assume you have a working knowledge of the basic HTML tags. I will also be using basic Javascript mouseovers, and Style Sheets both of these will be covered in the tutorial.
Score With Cascading Style Sheets!
CSS is an exciting feature of HTML that gives Web-site developers more control over how they want their pages displayed by specifying how each element should appear in a style sheet. Prior to the advent of CSS, the layouts of HTML documents were left up to the browsers, whilst HTML tags merely served to define a document's contents.
Class Selector
CSS contextual selectors enable you to define style commands that can be utilized by many tags. When defining an contextual selector a period is placed before any selector name (Not to be confused with ID selectors that begin with #). When the contextual selector is used within a tag via class = the name of the selector variable only (no period preceding).
Cascading Style Sheets (CSS); Learning More
In the "Cascading Style Sheets (CSS) -- Getting Started" article, the first in this series, you learned how to use an external style sheet. You simply include one line of code on your pages to affect the entire page with the style specified in that external style sheet. This article will show you how to embed a style sheet directly into your web page. It will also show you how to define custom styles, styles not associated with any particular HTML tags.
 
Categories