CSS Positioning and Styling tutorials
Tired of using that ugly looking default border in tables? Well, this will solve your problem! There are many different border styles you can choose from.
Related Tutorials
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.
Css Borders
Using CSS you can apply a border to elements like table cells and images. You can define individual edges (border-right for example) or you can apply the same effect to every edge (border).
Cascading Style Sheets
Cascading Style Sheets are used to specify particular styles for a character, a word, a group of words, a page or a whole web site. Although you can change almost any behavior using these styles, including some behaviors that were not possible in HTML, CSS don't constitute an independent or complete language, the styles are used to control the display of items or sections on a web page.
Simple image frame border effect
In this post I will explain who to make a simple but nice image border frame effect with css.
Controlling Background Styles
This tutorial will show you how to control background styles in css.
Define Page Scrollbar Styles
Make your page look nicer by applying CSS styles to your page scrollbar.
Applying border & opacity to images onMouseover
In this tutorial, I'll show you how to use CSS alone to reproduce two popular image effects that have traditionally been done using scripting.
CSS Navigation Menus
Are you looking to create navigation menus using CSS? Are you looking to use different styles for your navigation menus? This tutorial will teach you how to create different menu styles for a main menu, submenu, and footer menu.
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.
CSS Box Model differences in Firefox and Internet Explorer
This describes all elements used in HTML documents. Every element is in the shape of a rectangle (and you wonder why developers cringe when circles are a part of layouts?) A box has several attributes to it, such as width, height, padding, margin, and border.
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.
Links and Styles
Modify link states, add background color, change cursor on mouseOver...etc
First Letter
Apply styles, such as increased size, to the first letter of a paragraph.
Rounded corners textbox using photoshop
In this tutorial I will explain how to create custom made textbox using css and photoshop. The textbox will have rounded corners, colored border and search icon.
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.
CSS and Media Types
Every webmaster want that his pages can be accessible to everyone. CSS-2 brought along a way to apply different styles to a page dependant on the medium it is being used through.
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.
Creating and linking external CSS files
This tutorial will show you how to convert your internal CSS styles to an external file and how to attach them to a page.
Links and Styles
As you know there are four states of a link, namely: Initial State, Visited State, Mouse Over State and Active State
Define Page Scrollbar Styles
Before we look into Page Scroll Bar definition, please have a look at the example here. Well it does not look that good, but that is just for the differentiation of the areas of the scrollbar. Once you know which area is defined with which code you can modify it as you like.
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.
Shiny Happy Buttons
Here a shining example of what can be done to customise the look of HTML buttons without resorting to images. Custom button styles are a frequent request, but the use of images can heavily restrict the implementation. Avoid those pitfalls by sticking to pure CSS.
Link control
The anchor tag is responsible for links. We can set specific values for the anchor. These values will be for the link, active and visited. We can also have a hover property in styles.
Default Styles for CSS
Coding CSS can quickly run into difficulties with different browsers interpreting code in different ways. Designs will never look the same in every browser but you can help yourself by using a default style set when you start coding.
User Styling
Jon Hicks takes a peek at using CSS to apply custom user styles to change the appearance of sites within your own browser. Put your existing knowledge of CSS to good use to make your own browsing experience more pleasant and productive.
Advanced Selectors
Selectors are the way you reference the parts of your HTML documents with the styles you want to have applied to them. CSS2 and CSS3 brought with them a host of new selector specifications, designed to allow greater access to the elements and parts of those elements that make up each and every webpage.
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.
Do Not Think In Tables, Think In Styles
CSS tutorial describes how to get rid of tables and create clear and lightweight HTML layout with CSS. 'Float' and 'Clear' CSS properties are explained.
Styling links with CSS
Learn how to add interesting CSS styles to HTML links, including visited and rolled-over links. Discover how to change colours and add images to links.
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.
Creating and Linking External CSS Files
It is particularly useful to keep one css file for the entire website rather than having individual CSS styles in every page, advantage of having a separate CSS file is, it is easy to update and maintain the look and feel of the entire website from a single file.
Advanced CSS (linking to an external style sheet)
The advanced way, and the easiest way to do CSS is to link to an external style sheet. Here I will sow you how. If you are new to CSS, I reccommend reading the basic CSS tutorial first, if you haven't already. First, open up notepad and put all your styles in.
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