CSS Colors and Effects tutorials
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.
Related Tutorials
Web Color Basics (A Detailed Guide)
Now let me introduce you to the basics of color also known as colour. Why you ask because most web designers want to know how to add color to their web page or their entire site. Now in HTML and XHTML you have two options for displaying color, which include named colors and hexadecimal codes.
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 - Cascading Style Sheet
CSS is a simple file which controls the visual appearance of a Web page without compromising its structure. Using CSS we can control our font size, font color, link color and many other attributes on our web page. This will make our HTML code much more readable and the page size will be reduced.
Coloring the scrollbar
How can I color the scroll bar of my Web page.
Introduction to HEX Colors
Hex, or Hexadecimal, is basically a number system with a different base to our "Decimal" system. In this tutorial, I will attempt to explain how hex colours work.
Hex Chart
When adding a color to your webpage with HTML, sometimes you can just type in the name of the color. But more often than not, you'll need to use what's called the hex code, which is something that the browser will be able to understand. Choose a color from the list below and look to its left to get the hex code.
Scrollbar Color
Adding color to your webpage scrollbar adds a little flavor to your page. It also gives you the power to match the scrollbar with your website's design colors!
Background Color
CSS background colors work very similar to the bgcolor command in html. When applied within the <body> tag it will color the entire page in that color. This may seem redundant to the bgcolor tag, however since the bgcolor tag is typically applied to each page and CSS are usually linked throughout a site, you can easily in one place, change the backgrounds to many pages similar.
Change the color of an active input box
This tutoril will show how to change the color of an input box or textarea when they are active. This is very simple and is done using CSS.
The Ultimate Guide to Typography
It really is a shame because CSS gives us so much control over our type. That being said, we our limited to certain "web safe" typefaces but that shouldn't decrease our creativity. Here are a few CSS tips for typography on the web.
Cascading Style Sheets (CSS); Backgrounds
Background colors and images can be used for stylistic effects and can be an important element in the design of web sites. With standard HTML, one can assign backgrounds to a web page and to tables and table data cells.
How to Build a Simple Button with CSS Image Sprites
The button is one of the most common elements in the world of the web. In modern web design buttons are used not only on forms, but also as visual aids that draw attention to important elements of the page.
HTML and CSS
The fastest route to true HTML/CSS mastery! Need to build a web site? Or update one? Or just create some effective new web content? Maybe you just need to update your skills, do the job better.Welcome. This tutorial for you.
Scroll Bar Colors
Put color in that scrollbar.
Colored Scroll Bars
Easily color your browser's scrollbar using CSS.
Different link colors
Do you want to have a different color links on different sections of your website? If your answer is yes then you have come to the right tutorial.
Change the mouse pointer cursor on a web page
In this blog post I will explain where to find and how to attach a mouse pointer cursor to a web page or html component.
Links and Styles
Modify link states, add background color, change cursor on mouseOver...etc
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.
An Introduction to CSS
If you are a web designer and haven't been living in a cave for the last few years, then you must have heard of the amazing CSS technology! CSS is short for 'Cascading Style Sheets', and is a part of current web standards. Quite simply, it allows you to define your entire design from one simple document, making templates an utter doddle to set up and maintain. To help you get to grips with the new technology, this tutorial covers the basics of CSS setup, and helps get you well on your way to a more complete understanding of the CSS methodology.
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.
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.
Changing Table Background on MouseOver
This tutorial will teach you how to make a menu like tables that will change background color when you mouseOver.
CSS Is Superior to Tables in Website Design
Cascading Style Sheets (CSS) are superior to table based layouts when designing a website. Some web designers swear that table based layouts are better than CSS based layouts, while others believe that table based layouts are ancient history and XHTML combined with CSS is the only real solution to coding a web sites visual layout.
DD Color Tabs
This is a lightweight, very easy to customize image tabs menu similar to the one you see throughout Dynamic Drive. Instead of swapping between two tab images, this menu uses a unified transparent tab instead.
Custom Link Colors
Standard link colors are boring and frequently do not match the color scheme of your website. Pseduo-classes, which add different effects to some selectors, can change the link colors to match your site.
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.
CSS Background Examples
The CSS background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page.
CSS Background Rollover
Looking to add a little style to your image links? Let's use CSS to add a background color that appears when the mouse hovers over the image. This style can be used on a variety of images but we'll be looking at adding this style to affiliate buttons.
Vertical Divider Menu
One of the most popular CSS menu interfaces around, this is a horizontal CSS menu that uses an indented vertical divider to separate each menu item. Each item can change background color when the mouse moves over it.
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.
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.
Positioning: Everything float!
Generic tutorial on floating for good positioning on your web page.
Introduction
It is time to take your web designing skills to the next level. Cascading Style Sheets (CSS) are a way to control the look and feel of your HTML documents in an organized and efficient manner.
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...
Style Sheets Introduction
There are numerous Web sites that make use of CSS technology. Here you'll find a step-by-step guide to CSS, and how you can use it to your advantage.
How To Create Depth And Nice 3D Ribbons
We learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout.
A Festive Type Folly
Jon Tan upholds the good British tradition of building follies and talks us through the process of creating one such on the web using only HTML and CSS. Follies themselves are just for enjoyment. However, there&#8217;s always interesting things to be learned when we venture out and have some fun.
CSS and Borders
Without CSS, your choices for borders were those crappy grey ones that surrounded tables and frames. Now however, since page presentation has become such an important aspect of web-design, stylesheets allow you lots of variety in your borders, and you can apply them to anything you want!
What would you rather do: design or code?
There is a term "Css Designer". It describes a person who designs for web and is able to code that same design into a standards compliant document.
 
Categories