Practical Ecommerce

9 CSS Codes that Ecommerce Merchants Need to Know

Although CSS code is more complicated than HTML, it ultimately gives merchants much more flexibility in formatting and style for websites. Just a rudimentary understanding of cascading style sheets can open up new possibilities for the way text and images function on your site. Embed photos to a site, add links here or buttons there, make tables and much more.

If you are used to using HTML, you’ll notice immediately how much more complex CSS code is. But that complexity offers much more sophistication for the aesthetic look of your website.

Here is a list of nine simple CSS codes that could enhance most any website.

1. Embed an Image

To embed an image you will use the line of code below and adjust certain elements to your specification.

<html>
 <style type="text/css">
body
{
background-image:url('http://photography.naturestocklibrary.com/orca-stock-photo.jpg');
background-repeat:no-repeat;
background-position:center;
margin-right:200px;
}
</style>
</html>

This is what the code means in layman’s terms:

  • background-image:url is the CSS attribute that points to the image you wish to embed. For this example I’ve used a stock photo of an Orca Whale.
  • background-repeat:no-repeat indicates that the image should only appear once.
  • background-position:center indicates that the image will appear in the very center of your webpage. You could adjust this with using “right top” or “left bottom,” for example.
  • margin-right:200px indicates how much margin should be between the image and whatever other objects are on the page to the right, for this example we’ve set this image to a 200 pixels margin.

2. Add a Border Around Text

Use this code below to add a border around text.

<html>
 <style type="text/css">
p.one 
{
border-style:solid;
border-width:5px;
}
</style>
</head>
<body>
<p class="one">Sample border one.</p>
</body>
</html>
  • In this example we’ve created a border that is 5 pixels thick.
  • p.one is referencing the paragraph tab, p class, at the bottom of the code. So, enter the text you want to appear within the border in the p class line. For this example we’ve written “Sample border one.”
  • border-style:solid indicates the type of border we are using. This example is set to “solid,” however there are many possibilities here from “dotted, double, inset, hidden” to “dashed” try them all and see what fits your website best.
  • border-width:5px indicates that the border, regardless of style, is going to be 5 pixels thick, adjust this by simply changing the value to a larger or smaller number.

This code creates a border that looks like this:

text border

3. Make an Image Gallery

A simple image gallery uses this complex looking code below.

<html>
 <style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid blue;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}   
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid blue;
}
div.img a:hover img {border: 1px solid yellow;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
</style>
</head>
<body>
<div class="img">
 <a target="_blank" href="http://photography.naturestocklibrary.com/orca-stock-photo.jpg"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" alt="Orca" width="110" height="90" /></a>
 <div class="desc">Orca Test Text</div>
</div>
<div class="img">
 <a target="_blank" href="http://fc08.deviantart.net/fs44/f/2009/059/f/a/BG_Green_Woods_by_Eirian_stock.jpg"><img src="http://fc08.deviantart.net/fs44/f/2009/059/f/a/BG_Green_Woods_by_Eirian_stock.jpg" alt="Trees" width="110" height="90" /></a>
 <div class="desc">Trees Test Text</div>
</div>
<div class="img">
 <a target="_blank" href="http://www.freestockimages.org/wp-content/uploads/2009/05/free-stock-images-stone-texture-10.jpg"><img src="http://www.freestockimages.org/wp-content/uploads/2009/05/free-stock-images-stone-texture-10.jpg" alt="Rocks" width="110" height="90" /></a>
 <div class="desc">Rocks Test Text</div>
</div>
</body>
</html>
  • margin: 2px; border: 1px solid blue; height: auto; width: auto; float: left; text-align: center; – this top segment of code indicates the properties of the borders, height, width, alignment of imagery within the greater border of the gallery.
  • display: inline; margin: 3px; border: 1px solid blue; – this second segment of code defines the color and thickness of the border around the image.
  • div.img a:hover img {border: 1px solid yellow} segment indicates that we want a 1 pixel solid yellow border around the image when the mouse hovers over it.
  • text-align – margin– this segment indicates the instructions for the text that appears under the image.
  • The next large section is code instructions for each image in our gallery. This example uses three separate stock images and also makes them links using traditional HTML code for a hyperlink.
  • <a target="_blank" href="http://photography.naturestocklibrary.com/orca-stock-photo.jpg"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" alt="Orca" width="110" height="90" /></a> <div class="desc">Orca Test Text</div> – this is the segment of code for the first image in our gallery. It’s repeated for each image, with just the location and name of the image changed in each line.

This code creates a basic gallery with an effect like this:

basic image gallery

4. Change Background Color

You can easily adjust the background color of any website page with this code below:

<html>
 <style type="text/css">
body
{
background-color:pink;
}
</style>
</html>
  • background-color:pink indicates that the entire page should be the color pink. You can use HTML color codes or English words for colors, although, when using words, you are much more limited to the range of colors that can be displayed.

5. Change The Style of a Text Link

Links can easly become more dynamic with CSS; you can change the color of visited and unvisited links as well as the color when a mouse cursor hovers or a user clicks a link.

<html>
 <style type="text/css">
a:link {color:red;}    /* unvisited link */
a:visited {color:blue;} /* visited link */
a:hover {color:yellow;}   /* mouse over link */
a:active {color:purple;}  /* selected link */
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Link Text</a></b></p>
</body>
</html>
  • a:link {color:red;} /* unvisited link */ – this line indicates that for unvisited links, the color of the hyperlinked text is red.
  • a:visited {color:blue;} /* visited link */– this line indicates that for visited links, links that have been clicked, the color of the hyperlinked text will turn blue. And the next several lines follow that logic, giving color for a visited link (one that a user has already clicked), a color change for when a mouse cursor hovers over a link and then a color for the link to change to when clicked.

6. Text Formatting

Text formatting can also be done with CSS, as well. The code below covers normal, italic and bold text styles.

<html>
 <style type="text/css">
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.bold {font-weight:bold;}
</style>
<body>
<p class="normal">Normal style text.</p>
<p class="italic">Italic style text.</p>
<p class="bold">Bold style text.</p>
</body>
</html>
  • p.normal {font-style:normal;}– this line of code indicates how the text should appear for the paragraph titled “normal” at the bottom of the code – p class=normal, for this example the text has no style, it’s plain. This same logic holds true for the next to lines p.italic and p.bold both indicating how the text should appear for their respective paragraphs, italic and bold respectively.

Examples of various text styles below:

text styles

7. Make a List

Making a list can be done using dozens of different shapes, letters or numbers for bullets in a list.

<html>
 <style type="text/css">
ul.a {list-style-type:disc;}
ul.b {list-style-type:circle;}
ul.c {list-style-type:square;}
ol.d {list-style-type:decimal;}
</style>

<body>
<ul class="a">
<li>Example 1</li>
<li>Exampe 2</li>
<li>Example 3</li>
</ul>

<ul class="b">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>

<ul class="c">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>

<ol class="d">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ol>
</body>
</html>
  • ul.a {list-style-type:disc;}– this line indicates that the list that we are going to create is named “a” and it is using a “disc” shape bullet. The lines that follow indicate the other example lists named “b, c” and “d” will be using these bullet styles, “circle, square” and numbered “decimal.”
  • The “ul class” before each example list gives the name that the opening instructions are pointing to and each line will be formatted using the bullet indicated in those instructions.
  • The “li” tags before and after each “Example” line indicate that this is a line in a list.

Examples of the various bullet styles:

bullet styles

8. Make a Navigation Bar

A navigation bar is simple to create as well. This example makes a bar of four horizontal buttons to help users navigate around to the various pages of your site.

<html>
 <style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:white;
background-color:red;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:pink;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
  • This code creates a red bar with pink text options. The red section of the bar turns pink when the mouse cursor hovers over any of the buttons.
  • It appears as a single, solid red bar (rather than four individual buttons) because we have set the “margin” and “padding” to “0” in each case. Margin handles the border around an element and the padding handles the space outside of the border around the element. With both set to “0,” the elements appear side-by-side without space creating the look of a solid bar.
  • The “float” line indicates that this bar will be left justified on the page.
  • The next block of code indicates that we want the bar to display as a block that is 120 pixels wide and red, the text color is white with 4 pixels of padding between each word and all uppercase.
  • The next to single lines of code “hover” and “background-color” indicate that mouse cursor hover is active and when a user does hover over a button, the color turns pink.
  • The final block contains the text that will appear in your button bar, “Home, Products, Contact, About” is what is used in this example, but these can be changed to any text needed.

The navigation bar will look something like this when finished:

9. Make a Printable Version of a Web Page

This code below allows you to change the appearance of a web page when it is printed. In this example below, the website uses “arial” font and when printed “times” font is used. For both views, the font size remains 12 point.

<html>
 @media screen
{
p.bodyText {font-family:arial;}
}

@media print
{
p.bodyText {font-family:times;}
}

@media screen, print
{
p.bodyText {font-size:12pt}
</html>
  • @media rule in each line indicates how the text should look depending on where it is being viewed. When combined with “screen,” this indicates that the text should use “arial” font. When combined with “print,” this indicates that when printed “times” font should replace the “arial” font. And the final line, “screen, print,” indicates that on both the screen and in print, the font size will remain 12 point.
Practical Ecommerce

Practical Ecommerce

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Comments ( 6 )

  1. mikehihn February 15, 2011 Reply

    Is this April 1st? These are HTML, have nothing at all to due with Cascading Style Sheets. A ccc is (by definition) an entirely different page from HTML, which is its purpose.

    This is obvious when we see <html> and <body> tags which are used on web pages, but not css pages. The coding looks okay, but readers should not be looking into their css page. Indeed a css page ELIMINATES the need to repeat these codes on every page, which again is its purpose.

    I’ve been designing websites since 1995.

    Same is true for the <BODY> tag.

  2. Matt Ferner February 15, 2011 Reply

    Hi mikehihn-

    Although it is true that in a production application CSS is normally maintained in separate files (.css stylesheet), it is also very legitimate for demonstration purposes to embed the CSS into the HTML page – which is what I’ve done here. Wrapping CSS in HTML does not, of course, make the CSS into HTML as you suggest. The differences between inline, embedded, and external CSS could be an article itself – HTML supports all three.

    For the purposes of most easily demonstrating CSS to laypersons who may not have a deep understanding of code in general, this article uses embedded CSS.

    Best,
    Matt

  3. Tom February 15, 2011 Reply

    Wikipedia’s CSS page has this to say: "Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language."

    W3C’s site says, "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents."

    It would appear that CSS is poorly named.

  4. flyingkites February 15, 2011 Reply

    I really don’t think that these pieces of code (which are a combination of CSS and HTML just to kill that argument) are essential knowledge for eCommerce Merchants. It might be of some use to programmers but then they are so very basic it is doubful they would not already know them.

    It is best practice NOT to have CSS definitions hard coded into programs but to use StyleSheets.

    And what is more relevant is that bulky StyleSheets can increase page load times. So it is always a good idea to have a core overall site stylesheet and additional stylesheets for special purposes/pages and make sure in all case you delete style definitions that are not in fact used.

  5. Luis Hernandez Jr February 19, 2011 Reply

    Not sure if this is relevant, but you can run your css code thru a compressor in order to make it load a lot faster.

    I like to keep the original code I wrote so I can read it easily, but when everything is tested and working properly I run it thru a compressor which can reduce the bulk to almost half, in some cases. From removing any unnecessary characters to optimizing font colors, for example.

  6. Vatsal Jani November 14, 2011 Reply

    wowwww….. its good 4 students who learn html , ccs , & java script..