Go Premium for a chance to win a PS4. Enter to Win

x

CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Share tech news, updates, or what's on your mind.

Sign up to Post

The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought, you can create an About page that will draw site
1
Technology Partners: We Want Your Opinion!
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

computer code editor
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
4
 
LVL 10

Expert Comment

by:Brandon Lyon
Comment Utility
Good article.

Angular JS is one of many options for learning javascript display+controller logic. If someone is trying to learn Angular but is struggling to understand then they might want to try another framework like React, Riot, Ember, Polymer, Vue, or Meteor. I had a really hard time following Angular but had a much easier time learning React, Polymer, and Meteor. Learning at least one js framework will give you an idea of how to work with the others and how to structure larger or more complex applications.
0
 

Expert Comment

by:Gina Lofaro
Comment Utility
Well bless your cotton socks, Ryan! Thank goodness someone else can do the jobs I can't fathom. I've been writing websites for clients for 11 years and I like to stick to my lane (writing quality copy). The thought of trying to code/design/build a website does my head in. We all have our strengths, don't we? For me, it's words ... not graphics, not design, not accounting. I know from working with you that your level of service is outstanding so there's no question about you being a "successful web developer"! I enjoyed your post (even if it did make my head spin a bit)!
0
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
3
Image Overlay
This article discusses four methods for overlaying images in a container on a web page
4
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
2
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
1
grid-based-layout-vs-grid-<wbr />based-word<wbr />press-them<wbr />es
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
4
 
LVL 66

Expert Comment

by:Jim Horn
Comment Utility
Nicely done.  The graphics support the content very well.  Voting Yes.
0
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occupation.

As with most new skills, figuring out where to start can be intimidating, but in CSS there are some easy rules to get started with. Below are some tips and tricks to help you get started with CSS and form good habits that can make your life easier in the long run.

photo-1454165205744-3b78555e5572-300.jpg


Good Habits to Form when Working with CSS


Learn the Layout Logic

CSS will lay things out in a sectioned grid organized from top-to-bottom, left-to-right. Certain style rules can break this grid. Picture the parts of a webpage as a grid and you can start to see how rules might be applied. You can use developer tools to see which rules target which objects.

Name Your Code as if it Were Human

Use multiple names (first name, middle name, last name).

A single word is often not descriptive enough. Be specific and combine multiple words. Some examples are user-name, user-avatar, or user-location. Using multiple words minimizes conflicts from accidentally sharing names (for example all three of those could be named just “user”, which would be bad).

Selectors should be a combination of ~ 3 classnames when not using an ID. For example .user-list .single-user .user-name or .user-list …
2
SASS
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
3
SASS
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
1
Independent Software Vendors: We Want Your Opinion
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

SASS
Styling your websites can become very complex.
Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
2
 
LVL 30

Author Comment

by:Alexandre Simões
Comment Utility
Thanks Marco,
let me know if after reading the three articles you still feel that something is missing.
It will sure come as a nice subject for a sequel on this series.

Cheers!
Alex
0
 
LVL 31

Expert Comment

by:Marco Gasi
Comment Utility
I f I'll have some idea I'll tell you for sure :-)
Cheers
Marco
0
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
2
Introduction
If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entries by using the typographical error.  This is somewhat annoying, and if you're paying attention, you can visually identify the error.  You can usually get past this issue by telling the browser to forget your recent history.  But have you ever begun typing your password or passphrase into an online form and thought, "Did I get that right?"  You can't visually check your work because the browser is showing you a form input field with something like this: ········· The browser is "helpfully" hiding the password from prying eyes by masking the input control field.

This article teaches three ways to allow your clients to show or hide the password fields as they type them into your forms.  In my experience, the default behavior that hides the password input is only marginally useful.  Most of the time nobody is looking over your shoulder and the real risk of lost passwords does not rest with the human client or the client browser, but with the servers where passwords are stored.  We can't change the server's security, but we can choose to make life easier for our (human) clients!

How HTML <input type="password"> Works
HTML defines several different input types for different kinds of input controls
5
When writing CSS, there are a few simple rules that will make your life easier. 
 
1. Using ‘* {box-sizing:border-box;}’.
Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... widthbox.png It is also fast and well supported across browsers. 
 
2. Center div using {margin: 0 auto};
From the CSS specification, “If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.”
This rule is easy to understand and remember. As long as the width of the parent container of the div you want to center is larger than its child element, using margin: 0 auto will center a div. 

3. Group CSS on one line.
For readability concerns, do this: 
border: 1px black solid

Open in new window


instead of this: 
border: black;
border: 1px;
border: solid;

Open in new window




4. RARELY use !important;

This one is fairly intuitive, as long as you know what ‘!important’ does. But in case you don’t. ‘!important’ breaks all the rules that CSS sets up for us. For instance, there is an order of operations (of sorts) to CSS that allows you to keep track of what selectors have priority. #id is more important that .class, but both are less important than inline CSS in html.


Using ‘!important’ breaks all these rules and tells your compiler to use the rule specified no matter what the order of operations tell us. This can be extremely difficult to keep track of as your site grows.

6
 

Expert Comment

by:zachvaldez
Comment Utility
Can you provide practical example on # 2? Excellent
0
Sass Logo
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
3
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible.

Part 1 of this article will only concentrate on getting familiar with the way the Bootstrap CSS works. Part 2 will deal with using what we have learnt to build a simple web page.

We will be concentrating on the responsive aspect of Bootstrap only and not going into the intricacies of button styling etc. which can be easily found on the Bootstrap website.

I am also assuming you have a relatively good grasp of HTML and CSS.

If you are starting out with Bootstrap and have downloaded the package you are probably wondering what do I do now? After all there isn't really an instruction manual and the website can be a little daunting without some basic knowledge of what you are supposed to be doing.

Let's begin with "What is Bootstrap?"
Bootstrap 3 is a mobile first CSS framework - and that is all it is (excepting the jQuery goodies which are not really what Bootstrap is about). When we say a CSS framework what we are talking about is the base CSS you will need to create a responsive website.

At the core of the CSS framework is a responsive 12 column grid. I will explain more about this later. It is the most popular CSS framework being used on the web today and is constantly evolving to be the best framework you can use.

That is not to say it is the best.…
14

Introduction

A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer is "You can't." This is a restriction of the HTTP client / server protocol. The only time the server can send information to the client is in response to a request.  So it follows that we need a way for the client to request a progress report and a way for the server to send the progress report.  This article sets up the two parts of the application and builds them step-by-step so you can see exactly how this can be done.  We use jQuery and AJAX in a way that allows the client script to call the server-side script and to get back an indicator of progress.


The Visual Effect in the Browser

When we first load the client web page, we will have an area reserved for the progress bar.  As progress occurs (as indicated by the signal from the server) our progress bar will become visible and move across from left to right until the process is completed.  At the end, it will say "All Done" then it will fade from view and collapse out of the web page.  Here are screen-capture examples of the visual effects.  We used very bright colors for this example; your choice of size and color would be made with your design goals in mind.  These are settable via CSS.


Before the process starts:

jquery-progress-bar-1.pngAfter the progress bar appears:

jquery-progress-bar-2.pngAs the progress bar continues to show greater and greater progress:

jquery-progress-bar-3.pngWhen the progress indicator exceeds 99%:

jquery-progress-bar-4.pngAfter "All Done!" the progress bar fades out and disappears from the page:

jquery-progress-bar-5.png

The Server-Side Script

First we will build a simulation of the server side of the two-part application.  The server will sense the progress of our long-running job and will return a single value to the client - an integer, representing the percentage of completion.  In order to simulate the progress, we will use a simple counter which we will keep in the PHP session.  By storing the counter in the session, we can add to it on each request to the server-side script, creating the same effect we might see if the server-side script were taking an actual measurement of our progress toward a goal.  Have a look at line 15.  It's only there to simulate some kind of variation in the reported progress.  In real life, this "counting" scenario would be replaced by some programmatic method of determining the percentage of progress toward our goal.  The determination, however it is made, would be set into a positive integer of range 1-99 which is echo'ed to the browser output stream (and therefore returned to the client-side jQuery script that called our progress monitor).

<?php // demo/jquery_progress_bar_server.php
                                        error_reporting(E_ALL);
                                        
                                        // SESSION ALLOWS US TO HAVE STATIC VARIABLES
                                        session_start();
                                        
                                        // IF THIS IS THE FIRST STEP, SET THE PROGRESS BAR TO ZERO
                                        if (empty($_SESSION['progress']))
                                        {
                                            $_SESSION['progress'] = 0;
                                        }
                                        
                                        // INCREMENT THE PROGRESS COUNTER
                                        $advance = 10;
                                        $advance = rand(5,10);
                                        $_SESSION['progress'] += $advance;
                                        
                                        
                                        // IF THIS IS THE LAST STEP, ELIMINATE THE SESSION VARIABLE
                                        if ($_SESSION['progress'] > 99)
                                        {
                                            unset($_SESSION['progress']);
                                            session_write_close();
                                            die('100');
                                        }
                                        
                                        // RETURN THE PROGRESS
                                        echo $_SESSION['progress'];

The Client-Side Script

Once we have the server side of the application running, it's time to build the client side (the part that runs in the client's browser).  For this we use a conventional HTML5 web page.  These notes apply to the snippet below.


Line 8: This loads the latest "minified" jQuery framework.


Line 11-13: This starts the progress bar when the document.ready event fires.  In a real-world example, this might be started by a browser event, such as a mouse click.  But for our tests, it is nice to be able to refresh the browser and see the progress bar started immediately.  The script here tells the browser to run the loadProgressBar() function, and to address it to the div named #progressBar.  In theory it would be possible to have multiple progress bars on the page, but for this demonstration, one will do.  Note that for this example to work, the document.ready event handler is not required.  I only put it into the script as a placeholder since some other event might be the initial trigger for the progress bar.


Line 16: Sets the interval value to 1,000 milliseconds (one second).  Each time the interval timer expires, the script will call the server-side script for an update on the progress.  There is no hard-and-fast rule about a one-second interval; you can choose any values that makes sense for your needs.  You might want to experiment with faster or slower values.


Line 17: Sets the interval timer to call the function loadProgressBar() every time the intval expires.


Line 22: Defines the loadProgressBar() function.  The function takes one argument called "element."  This is the name of the outer wrapper div that encapsulates the progress bar.


Line 23: Every time loadProgressBar() is run, it calls the server-side script and retrieves an integer representing the percentage of completion of the background task.  This value is assigned to the JavaScript variable percent.


Line 24-28: If the percentage indicates that the progress is not yet complete, we recompute the width of the progress bar and animate the movement of the dark green background across the bar from left to right.


Line 29-36: When the percentage indicates that progress is complete, we are finished with the progress bar.  We take the following steps.

1. We remove the interval timer -- there is no need to call this function again.

2. We remove the background color from the progress bar.

3. We set the alignment to "center" and write "All Done!" in the middle of the progress bar

4. We use jQuery fade() and hide() functionality to cause the progress bar to act like the Cheshire Cat, disappearing from view.


Line 43-47: Our CSS defines the size and color of #progressBar div.


Line 49-57: Our CSS defines the div inside the #progressBar div.  It starts with a width of zero (which grows with each call to the loadProgressBar() function) and a background-color of dark green.  With this styling and the jQuery .animate() function, we can produce the visual effect of a progress bar that slides more-or-less smoothly across the screen.

 

3
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight!

There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicated than it needs to be and some just have it wrong.
Using javascript or jQuery for animating a slideshow is great but with CSS3 you no longer need javascript.
In fact, using CSS for your slideshow animation actually uses less browser resources making it work quite a bit smoother.  When you use javascript each animation has to be calculated each time, using up more memory and CPU cycles.
When you use CSS the browser knows exactly what is supposed to happen and when it is supposed to happen, so only needs to devote very little resources to executing it.
You can see the differences in resources at this link:
http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/

So lets begin...
We are going to have 8 images and we want each image to show for 15 seconds before the next image shows.
This means 8 images multiplied by 15 seconds equals a total slideshow time of 120 seconds.
We will also have a 5 second transition as the current image fades out and the next one begins to show.
Remember this as it is important following on.

1. First we need some markup for our images.
We'll start off with our container DIV which will hold our images

Open in new window

10
 

Expert Comment

by:CAN TAMAKLOE
Comment Utility
The codes are good.But I would have prefer if you add a caption of images to support.
0
 

Expert Comment

by:JJ Gabuya
Comment Utility
Can you code for 15 images?
0
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones:
#X - Matches an ID of X
.X - Matches a class of X
X Y - Matches an element Y that is a descendant of X.  (children, grand-children, etc)
X > Y - Matches an element Y that is a direct child of X
Those cover most of the cases where you need to apply styles to your elements, but there are often rules you need to create which need more finely-tuned selection.  

Some of the less frequently used (but still handy) selectors are:
X + Y - Matches any element Y directly AFTER (not inside) an X
X ~ Y - Matches any element Y which is after an X, where both share a common parent.  (think of it as a younger brother rule)
[attribute=value] - Any element with an attribute = "value"
[attribute*=value] - Any element with an attribute containing "value"
[attribute^=value] - Any element with an attribute beginning with "value"
[attribute$=value] - Any element with an attribute ending with "value"

Selector X+Y (adjacent siblings)

Let's say you set the top and bottom margins of every <P> to be 20px each.  That's probably fine in most cases within your site, but what if you have the following?
<style>
     h2 {margin-top: 20px; margin-bottom: 20px;}
</style>

<h2>This header has 20px above and below</h2>
<h2>This header has 20px above and below</h2>

Open in new window

4
 
LVL 38

Expert Comment

by:lherrou
Comment Utility
No problem leaving it around, so long as you plan to keep working on it :)

And I fixed the other comment for you.
0
 
LVL 9

Author Comment

by:WebDevEM
Comment Utility
Coincidentally, the morning after this article was published I was looking for a way to clean up the content of some RSS feeds coming into my personal website.  The content contains a lot of blank spaces, caused by back-to-back <br> tags.  

Since I'm using jQuery on my site, the removal part was easy with the .remove() function, so all I needed to do is figure out the best way to select multiple BR tags.  I tried the adjacent sibling selector from my recent article, and it worked perfectly!

$('br + br').remove();

Open in new window

0
Hire Technology Freelancers with Gigs
LVL 11
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Creating a CSS block that only applies to printing

By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certain conditions, such as on the printed page.  To do this, you need to add a section to your CSS, called a media rule.
@media print {
    /* Anything within this block will only apply when the page is printed
}

Open in new window

Note: the official description of Media Queries is available on the W3 site at http://www.w3.org/TR/css3-mediaqueries/, and defines many other variations.  This article focuses on printed pages, so we created a rule for @media print.  It could just as easily be applied to color or B/W displays, touch screens, screens of a certain dimension, or a multitude of other conditions.

Hiding Elements from the Printed Page

The question comes up all the time: Can I prevent people from printing my web page or an image on the page?  The short answer is unfortunately "No".  You can make it difficult for them, but a determined visitor will still find ways.  So far nothing I'm aware of can prevent them altogether.  Basically, if you put it on the page, they can see it and find a way to print it - even resorting to the brute force approach of a screenshot if they have to.

Another way of looking at the same problem is shielding elements of your page that don't…
1
I was recently given the task of creating a HTML page from a PDF. That's normally a pretty simple problem, except that in this case, the client wanted some text floated in the middle of a two-column page.

A search turned up this article that describes perfectly how to float an image across two columns. Essentially, the trick is this:
What it should look likeA span of fixed width and height is created in the left column, and the text wraps around it. A similar span containing the image is created in the right column, and the image has a negative margin that makes the text appear to wrap around it. The code in erictestorig.htm shows how it works; the pertinent code is in the style sheet:
.Ecol {width: 365px; padding: 0 5px; float: left;}
.Espace {width: 110px; height: 290px; padding: 5px; float: right;}
.Epullout {width: 220px; height: 290px; padding: 5px; float: left; margin-left: -120px;}
.Epullout span {width: 220px; position: absolute;}
.Epullout del {font-size:0px; color:#aaa; position:absolute;}

Open in new window

The left column is simple. It puts the fixed height-and-width span into the text:
... metus eu leo. Nulla<span class="Espace">&nbsp;</span> faucibus pretium ...

Open in new window

The right column is a little more complicated (Mr Frommelt's page describes exactly what's going on very succinctly), but essentially, it's another span that puts the image in the right place as defined by the .Epullout style:
... blandit, urna quam dignissim<span class="Epullout"><del> [Pullout: 
   </del><span><img src="http://www.ee-stuff.com/images/orangeX.jpg" 
   alt="" /> </span><del>] </del></span> sem, eu lobortis 
   nisl metus ...

Open in new window

If you're going to try it at home, pay attention to the part about counting the number of characters in a line, because it will save you a lot of tinkering. Having said that, the result is exactly what you would expect. But floating an image wasn't my problem; I needed to put a box with some text in there, and lots of searched didn't turn up anything that seemed as easy as placing the image had been.

So I turned to the one place I know of that has never failed me, and asked a question
4
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
I tried to vote twice but they are pretty good about not letting that happen.
0
 
LVL 15

Author Comment

by:Eric AKA Netminder
Comment Utility
because I know you always like article points

This is true. But I also share.

I tried to vote twice but they are pretty good about not letting that happen.

They wouldn't let me vote either... go figure.
0

CSS3 Custom checkboxes

This article shows how to style the checkbox form element using only CSS.

Works in: Chrome, FF, Safari, Opera, IE9+
Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and below)

The basic premise is that we will hide the checkbox and style the label - taking advantage of the fact that clicking on the label toggles the checkbox's checked state.

Based on the above principle we can check whether the checkbox is checked and style the label accordingly. To check the state of the checkbox we'll use the :checked pseudo class.

For this tutorial, we'll make a group of checkboxes that allow the user to select days of the week. It will look like this:

checkbox-group in supported browsers
and in unsupported browsers:
checkbox group fallback
Let's start by creating the HTML template:

<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>CSS3 Custom Checkboxes</title>
<style>
</style>
</head>
<body>
<div class="checkbox-group">
              <ul>
                <li>
                	<input type="checkbox" id="mon"/>
	                <label for="mon">MON</label>
                </li>
                <li>
                	<input type="checkbox" id="tue"/>
	                <label for="tue">TUE</label>
                </li>
                <li>
                	<input type="checkbox" id="wed"/>
	                <label for="wed">WED</label>
                </li>
                <li>
     

Open in new window

3
 
LVL 7

Expert Comment

by:Brian Matis
Comment Utility
Very slick. Saving this article so I can give it a try sometime. Thanks!
0
 
LVL 25

Author Comment

by:Kyle Hamilton
Comment Utility
thanks Brian :)
0
The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
3
 
LVL 38

Expert Comment

by:lherrou
Comment Utility
An elegant solution, and I can think of other ways to use it as well.

I voted YES above :)
0
Over the last week or so, I have been reading a number of articles that cover the latest features available in CSS3. I was especially interested in the new capabilities to animate objects with CSS rather than relying on Javascript or flash.

Since coming back after the New Year, I set myself the challenge of writing a quick and easy slider widget that utilises the above techniques. You're probably thinking ‘not another slider’… well, fair enough, its nothing ground breaking, but what I wanted to show here was how simple it is to create one from scratch with a minimal amount of code.

Hopefully this will allow you to create your own in the future, rather than trying to hack around with one you found on the web, to make it fit your site design.

To begin with, we need the following html code:

<section id="slider">
	<div id="inner-slide"></div>
	<ul>
		<li><a href="" onclick="moveslider(1);return false"> </a></li>
		<li><a href="" onclick="moveslider(2);return false"> </a></li>
		<li><a href="" onclick="moveslider(3);return false"> </a></li>
		<li><a href="" onclick="moveslider(4);return false"> </a></li>
	</ul>
</section>

Open in new window


There are three key elements here. The <section> is the main element that will display the image, in the style sheet we set the dimensions and also a starting image.

section {
	width:900px;
	height:300px;
	background: transparent url(1.jpg) 0 0 no-repeat;
        }

Open in new window


The “inner-slide” <div> is the second element that we will load the incoming slide onto at runtime. To begin with we need style it with:

#inner-slide{
	width:900px;
	height:300px;
	position:absolute;z-index:1000;	
	}

Open in new window


Finally, we have an unordered list to act as the navigation:

section ul {list-style:none;margin:0;position:absolute;left:0;top:40px;width:800px;z-index:1001}
section ul li a {width:20px;height:20px;background:#fff;border:1px solid #333; margin:10px;float:left;}

Open in new window

1

How to make really yummy glossy buttons that beg to be clicked again and again, using gradients.


There are lots of services that will generate fancy gradients for the plethora of browsers out there. However, if you want to change your color scheme you usually have recreate those gradients from scratch in a more or less trial and error manner.

This tutorial will demonstrate how to make just one gradient that you can use over and over again. We're going to separate the gradient from the color.

In order to demonstrate, we're going to make some buttons. We'll also normalize the appearance of the buttons so you can use any element, like <button>, <a>, or <input> and our buttons will all look the same. And to make IE behave, we'll add some IE specific rules and use a 1 pixel background-image. You'll still be able to adjust colors in a single line of CSS in the same way as with the gradients.

Step 1 - The HTML
Let's set up a nice neat new HTML file with some conditional statements at the top, so we can target a bunch of versions of IE as needed.
<!DOCTYPE HTML>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 ie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 ie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if IE 9 ]>   <html class="no-js ie9 ie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html 

Open in new window

2

CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.