Css templates | CssTemplatesWeb » Css Articles

Css Selectors Demo

admin — Wed, 23 Dec 2009 13:08:40 +0000

Today we’ll take a look at one of the new features in css3, by using the selector. Css3 is packed with some new, great features, which simplifies the styling of lists. We’ll show you how to use Alternative row styling with pure css. This is something that you typically would have to use either javascript or programming (php,asp) to achieve earlier, but here you will see how to do this with just a few lines of css.

Be aware that not all browsers are yet supported to use css3. IE does not yet support this, but if you give it a try in Firefox, Opera or Safari, you’ll see how nice this plays!

This is the result:

As you can see, the even and odd is ehh..even and odd! The Every third line can be set to whatever you want. Take a look at the css:

^?View Code CSS

/* Css3 selector demo by www.csstemplatesweb.com */
 
* { margin: 0; padding: 0; outline: 0; }
body { background-color: #2f3135; color: #fff; }
h1 { font-family: "Tahoma"; color: #fff; font-weight: normal; margin:0 0 40px 0; }
h2 { font-family: "Tahoma"; color: #ececec; font-weight: normal; margin:0 0 30px 30px; }
h3 { font-family: "Tahoma"; color: #fff; font-weight: normal; margin:0 0 10px 30px; }
img { border: none; }
#container { width: 960px; margin: 20px auto; }
 
ul { margin: 0 0 15px 60px; }
ul.odd li:nth-child(odd) { color: blue; margin-left: 15px; }
ul.even li:nth-child(even) { color: green; margin-left: 15px; }
ul.every3 li:nth-child(3n) { color: orange; margin-left: 15px; }
 
p {margin:20px 0 0 40px;}
a {color:#fff;}

The only thing you need to look at here, is the 4 lines starting with ul. It’s pretty self explaining

The html markup looks like this:

^?View Code HTML4STRICT


 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Css3 selectors</title>
    <link rel="Stylesheet" href="styles.css" />
</head>
<body>
<div id="container">
<h1>Css3 Selector demo</h1>
<h2>Alternate row styling</h2>
<h3>Even</h3>
<ul class="even">
<li>A sample text here 1</li>
<li>A sample text here 2</li>
<li>A sample text here 3</li>
<li>A sample text here 4</li>
</ul>
<h3>Odd</h3>
<ul class="odd">
<li>A sample text here 1</li>
<li>A sample text here 2</li>
<li>A sample text here 3</li>
<li>A sample text here 4</li>
</ul>
<h3>Every third row</h3>
<ul class="every3">
<li>A sample text here 1</li>
<li>A sample text here 2</li>
<li>A sample text here 3</li>
<li>A sample text here 4</li>
<li>A sample text here 5</li>
<li>A sample text here 6</li>
</ul>
<p>For more tutorials, articles and css templates, please visit <a href="http://www.csstemplatesweb.com">www.csstemplatesweb.com</a></p>
</div>
</body>
</html>

That’s it! You can download the files below if you want to play with it. Please share this if you like it!

Note: There is a file embedded within this post, please visit this post to download the file.

Css3 rounded corners demonstration

admin — Thu, 30 Apr 2009 14:05:05 +0000

Css3 is around the corner, well, at least for non IE users. The new beta of Firefox (3.5b4) has built in feature for support, which allows us to test some of the new features in css3.
Let’s start by looking at one of these features, which is rounded corners

As you can see, Firefox has added those nice rounded corners, while IE has not. The html code for the above example:

^?View Code HTML4STRICT

<p class="roundedbox">The rounded box</p>

And the css code:

^?View Code CSS

.roundedbox
{
	background-color: #0066cc; 
	color: #fff; 
	line-height: 20px; 
	width: 120px; 
	padding: 10px; 
        border-radius: 10px;
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
}

It’s only the 2 last lines in the css code that applies the rounded corners effect. The decleration of this css3 code will be border-radius, as seen in line number 3 from the bottom. But until this is in place, we need to use the 2 lines to tell the browsers to use prefixes. The first: -webkit- is for Safari, and the last one: -moz- is for Firefox.

Transparent images using css

admin — Tue, 28 Apr 2009 09:21:32 +0000

It is very easy to make an image transparent, by using opacity, using only 1 line in your css. In this example, I’ll set the opacity to 40%. This is the html code:

^?View Code HTML4STRICT

<img src="#" width="150" height="150" alt="image" class="transparent" />

You can see that we call for the class “transparent”, in the css class transparent, we have the following code:

^?View Code CSS

.transparent{ opacity:0.4;filter:alpha(opacity=40) }

This is all that it takes to show a tranparent image in css. You can also use the same code for transparency on text. Note that Firefox uses the property opacity:value for transparency, IE uses filter:alpha(opacity=value). This works in all modern browsers.
Here you can see a screenshot, one with the opacity set, and one without the opacity:

In CSS3, the syntax for transparency/opacity will be “opacity:value”.

CSS3 two column layout

admin — Thu, 23 Apr 2009 08:12:20 +0000

It looks promosing with the new CSS3, many new features is on it’s way. Today, we took a look on how to make a 2 column list layout, using CSS3 properties.
The result, viewed in Firefox 3:

css3-two-column-layout

As you can see, the column is split in 2. This is done by using the following css code:

^?View Code CSS

body {
font-size: 62.5%; 
padding: 30px;
}
 
ol {
font: 1.2em/1.5em Verdana, Arial, sans-serif;
margin-bottom: 1.5em;
}
 
.twoColumnList {
width: 40em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
-moz-column-count: 2;
-moz-column-gap: 1em;
}

A width is defined and the column-count and column-gap properties automatically split up the space and position the list elements. Note that the prefixes -webkit- and -moz- are used here. In the long run, these will be dropped, but for now, they are required to make these properties work in Firefox, Safari and Google Chrome.

The html code is pretty straight forward:

^?View Code HTML4STRICT

<body>
<h1>Testing two column list layout with CSS3</h1>
  <ol class="twoColumnList">
    <li>Testing CSS3</li>
    <li>Looks like Firefox has the best support</li>
    <li>Chrome is also good</li>
    <li>IE, well...it's still IE</li>
    <li>Venenatis</li>
    <li>Nam magna enim</li>
    <li>Accumsan eu</li>
    <li>Blandit sed</li>
    <li>Blandit a eros</li>
    <li>Quisque facilisis</li>
    <li>Try it out yourself</li>
  </ol>
  <p>Check out more stuff on <a href="http://www.csstemplatesweb.com" title="Csstemplatesweb">Csstemplatesweb.com</a></p>
</body>

Try it out for yourself, good luck!

Reset css

admin — Thu, 20 Nov 2008 11:12:52 +0000

Are you tired of pulling your hair when you test your new, amazing website in different browsers? Maybe the div’s is not where you want them to be, the font-size is different etc. There is hope!

The purpose of css reset / stylesheet reset is to neutralize the areas where the different browsers is inconsistent, e.g margin, line-height, padding and so on. When using a css reset, all the styles that are reset in the stylesheet is reset to “zero”, giving all the browsers the same starting point.

Applying the css reset is simple. Luckily there are many examples of reset stylesheets on the web. I like to use Yahoo’s stylesheet reset. All you have to do to apply the css reset from Yahoo, is to include the following line in your html file, before you link to your own stylesheet:

^?View Code CSS

="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">

If you want more information on using this css reset style, visit the Yahoo Developer Network

How to style external links with css

admin — Thu, 17 Jul 2008 19:26:04 +0000

You’ve probably seen it on many pages, and wondered how they style only external links in a special way. The most used method is to add a a small image on the right side of the link, to show the user that the link is an external link.

It’s also possible to show the user that the link refers to a pdf, word file etc. I’ll show you both how to style to an external link and to a specific file type.

This is how you can style a link to an external site, using css:

^?View Code CSS

a[href^="http:"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
}

What happens here, is that the “^” character allows you to target an attribute that starts with a specific text, in this case “http:” – which of course is an external link.

And this is how you would do it if you wanted to style a specific type of file link, in this example all the pdf files that are downloadable, would have an image to the right of the actual link:

^?View Code CSS

a[href$=".pdf"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
}

This is a nice and easy technique to make your text and links a little more stylish. I’ve attached a zip file containing all the icons as you can see on the below picture. Should be enough to get you started. Good luck.

Note: There is a file embedded within this post, please visit this post to download the file.

Pure css tooltip

admin — Thu, 17 Jul 2008 17:16:03 +0000

To save both space and frustration, it is often wise to use css tooltips to show a small popup with some helping words to the readers of your webpage. It’s very easy to make, looks great, and you keep your readers from dissapearing from your site.

How to make the css tooltip:

You have to put the tooltip text inside the span attributes. The html look like this:

^?View Code HTML4STRICT

This is just some text, and if you <a href="#">Roll your mouse over here <span>Then this text will show as a pure css tooltip</span></a> which is pretty neat!

And the css looks like this:

^?View Code CSS

a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}

So now you know an easy way to show really nice and helpful tips to your users, with the help of only pure css tooltip. Good luck!

What is css

admin — Sat, 16 Feb 2008 17:21:41 +0000

CSS means Cascading Style Sheets. CSS is a system of rules that directly effect the display properties of your web pages such as colors, fonts and layouts. CSS style blocks are also commonly referred to as rules. These rules can be embedded into an individual HTML page or placed in an external file that will control many individual pages on your website. Thus changing a property in one place in the linked style sheet will immediately make that change on every web page that is linked to it.

“CSS Web Template” is a website design created using Cascading Style Sheets (CSS) technology. Cascading style sheets provide web developers an easy way to format and to style web pages. CSS will be used even more because it is seen the same way by all browsers, making it the best option during the browser wars.