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.

Related Tutorials

How to Use CSS for Search Engine Optimization
Using external CSS files to determine the design attributes creates clean HTML code and will create better search engine rankings. With some knowledge of CSS you can change the code without destroying the visual layout.

CSS box with rounded corners with FlexiPanels
I think in 99% of the cases, if you are a Dreamweaver user and deal with design implementations work starts by getting the layout from the designer and you are supposed to make the site code that replicates exactly the layout. And designers can be picky! Nowadays you are supposed to create table-free code using DIVs and CSS, which can be a headache sometimes, especially if the designer threw in some rounded corner boxes and containers.

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.

Overlapping Tabs
Tabs are great They're user friendly because they're like the real world, and they can add a great 3D element to a design. Overlapping tabs present a special challenge to code, but with some careful planning and clever images, well have some nicely interactive tabs.

Style Sheets Shorthand
How to reduce the amount of code you need to write the achieve the same results from you cascading style sheet. The less code you have on your page, the quicker the page will load.

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.

Useful CSS Code
This is basic CSS tutorial that will teach you how to use CSS code for CSS coding.

Creating a website navigation bar with CSS
There are many ways to create a navigation bar, you can use a programs like Photoshop and then convert the image into code, but when I see people creating them in Photoshop I think why bother? When you can simply use CSS for the whole creation and code of it. In this tutorial I will show you how to create a very clean navigation bar that will use one line of XHTML and the rest will be CSS.

Clothing for a Website
Suppose you have your own site with a distinctive design. Some people may like it, while others don’t, however pretty it is (this is a usual thing, beauty is in the eye of the beholder). And it would be good if users had the opportunity to choose the design that pleases them during their visit. We are talking about exactly this: how to give your visitors the opportunity to tailor their experience.

Complete CSS
Cascading Style Sheets (CSS) is a fantastic tool to add layout to your websites. It can save you a lot of time and it enables you to design websites in a completely new way. CSS is a must for anyone working with web design. This tutorial will get you started with CSS in just a few hours. It is easy to understand and will teach you all the sophisticated techniques.

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.

Scrollbars
Learn how to make customized scrollbars that add flavor to your page. Ever wonder how to create those cool colored scrollbars? They are very easy. I'll show you the code first and explain it all.

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 Tips and Tricks
This article is aimed at helping people improve the CSS code they write, whether they're beginning developers or elite 12th dan webdev masters who may have missed a trick or two.

CSS graphic menu with rollovers
How to code website menu using unordered lists, and valid xHTML/CSS.

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.

CSS Menu Style 3
In this tutorial, I'm going to show you how to make three different style CSS menus with the same html code.

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.

CSS Centering
This tutorial will show you how to center you website design in all browsers.

Content Box
Learn to code and style a content box using HTML and CSS!

Named Colours
Having to memorise hex codes for all of the colours you're going to be using can be a pain. CSS includes a range of 17 common colours that you can slot into your stylesheets in place of a hex code.

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.

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.

Blog Layout - Design to Coding
This tutorial takes in to effect that you have a basic understanding of Photoshop, HTML and CSS already.

Spice up Your Input Boxes
Customize your input boxes by adding a simple bit of style code to your input box tag. Change its boarder look, weight and colour. A nice change to the standard look.

CSS Pop Up Menu
This tutorial features a pop up menu written purely in CSS. The code uses XHTML lists which are then styled to produce the hover effects. No Javascript is used apart from IE browsers as they will not display the hover effect without it.

How to make a decent navigation bar
A navigation bar is of course essential part of a website as it's going to where all your links to the site are stored, so your obviously be going to needing one, and it's also going to be need to look appealing. This tutorial will teach you how to make a navigation bar using only XHTML and CSS with no use of Javascript or any other code

Horizontal Navigation Bar
With this code you will learn how to make horizontal navigation bar using CSS.

CSS "Watermarking" Effect
This tutorial in HTML will show you how to create a CSS "Watermarking" Effect. The author gives you a simple outline of instructions and necessary code as well as plenty of illustrations to keep on track.

Bevel horizontal Menu
This CSS code creates a "3 state" horizontal menu out of an ordinary list. When the mouse moves over the menu, the menu item bevels up, and in modern browsers, depressing on the menu also creates a depressed state.

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.

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.

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.

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!

HTML Menu
With this tutorial, you can create a simple, nice looking menu complete with rollever effects.It seems like recently, simple sites are coming more into style. Heavy graphic and flash are out, slick design and coding skill is in.

Create Sidebars of Equal Height with Faux Columns
CSS can sometimes be a tricky business. There are times when even the simplest of layouts take some serious brainstorming! One of those frustrating times is when you want to create a series of columns of equal height, but the content in one column might be longer than the next. Heres where the Faux Column technique steps in, lets take a look at how this solution can make even the most complicated layout a breeze to code up .

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!

Positioning in CSS
In the world of web design, positioning is everything. As today's browsers get more sophisicated, positioning can't be ignored. This tutorial will show you different approach of positioning with CSS.

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.

What would you rather do: design or code?

View Tutorial