PiticStyle » cascade style sheet

CSS Properties Tag Cloud

PiticStyle — Tue, 15 Jan 2008 06:04:11 +0000

Yesterday I was playing with Adobe Photoshop and I decide to (try) make a Tag Cloud with CSS 2 Properties. The result is ok! If you use the image please tell the source. Thank you!

Opacity in CSS

PiticStyle — Wed, 07 Nov 2007 22:49:20 +0000

Today we learn about opacity in CSS! I made an example here and here you have the files.

Information about opacity in CSS:

The opacity property takes a value of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent – anything below that element will show completely through. 1.0 is 100% opaque – nothing below the element will show through.

So to set an element to 50% transparent, you would write: opacity:0.5;

Neither IE 6 nor 7 support the CSS 3 opacity property. But you’re not out of luck. Instead, IE supports a Microsoft-only property “alpha filter”. Alpha filters in IE accept values from 0 (completely transparent) to 100 (completely opaque). So, to get your transparency in IE, you should multiply your opacity by 100 and add an alpha filter to your styles:

Alpha filter for IE: filter: alpha(opacity=50);
Alpha filter for Mozilla: -moz-opacity:0.5;

More info on About.com . Now let’s to see my example…

[1] Open Notepad and type this.

Transparent DIV

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed cursus. Sed sagittis. Nullam imperdiet enim nec quam. Fusce consequat, nunc lacinia interdum fermentum, tortor ante cursus quam, sit amet eleifend risus nunc suscipit risus.

In this example i create an html page with css very simple. I put a background image and a div with the background color black. At this div I low the Opacity at 70%! In the next picture you have the div without opacity… is ugly!

Saw what you need to do is to write this code at the div opacity: 0.70;

That’s it! Is very simple… here is the final result and here is an Lorem Ipsum Generator! Thank you!

Create a simple MENU in CSS

PiticStyle — Tue, 30 Oct 2007 23:53:55 +0000

Today we create a simple MENU in CSS. Click here to see the final result!

[1] Let’s to create the CSS:

Note:
text-decoration: none; I put this expresion to remove the line under the link!

[2] Now we need to create the HTML code:

Create a simple Menu in CSS
/* Here is the CSS code */

Create a simple Menu in CSS

HOME

SERVICES

CONTACT

The entire code:

Create a simple Menu in CSS

HOME

SERVICES

CONTACT

That’s it! Here is the final result!

Links and Pseudo-Classes in CSS

PiticStyle — Sun, 28 Oct 2007 22:47:55 +0000

Today we learn about Links and Pseudo-Classes in CSS. I have made tutorials about rollover’s here and here, but this is something different and we talk about links & elements where we can put Pseudo-Classe, on a div, text,etc…

Pseudo-Classes:

:link
:visited
:active
:hover
:focus

We start with an exemple to use :hover pseudo-class on a image

[1] Let’s create the CSS:

body {
background-image: url(”bg.gif”);
}
img {
border-width: 4px;
border-color: #CCCCCC;
border-style: solid;
img:hover {
border-color: white;
}
div {
height: 10px;
width: 80px;
}
div:hover {
background-color: #CCCCCC;
color: white;
}

[2] Now we need to create the HTML:

body {
background-image: url(”bg.gif”);
}
img {
border-width: 4px;
border-color: #CCCCCC;
border-style: solid;
img:hover {
border-color: white;
}
div {
height: 10px;
width: 80px;
}
div:hover {
background-color: #CCCCCC;
color: white;
}

:hover Pseudo-Class on a element (img)

:hover Pseudo-Class on a element (div)

PiticStyle

That’s it! You can create this for any element you want ( paragaphs, headings, links, etc). From here you can download my files and HERE is the final result. Thank you!

Create Rollover Image in CSS

PiticStyle — Wed, 24 Oct 2007 18:58:22 +0000

Create Rollover Image in CSS ( You can see the final result HERE )

I made two buttons for this tutorial, save it if you want to work with them.

[1] Open Notepad and type the next code:

[2] Click on File > Save as and save like HTML

[3] Go in the location where you save your page and open it

Note: If your images don’t appear the problem is in the location where you save it your page. The images and index.html will need to be together, same location or
same folder. Thank you!

HERE is the final result!

CSS id and them selections

PiticStyle — Sun, 07 Oct 2007 00:53:10 +0000

Learn how to create and select the CSS ids and use them in a short tutorial and with an HTML page exemple:

CSS Id

This text is red

This paragraph is blue

this is not blue

Remember! To create id use # and for classes .(dot)

CSS Classes and them selections

PiticStyle — Sun, 07 Oct 2007 00:42:07 +0000

Learn how to select the CSS classes and use them in a short tutorial and with an HTML page exemple:

Classes

Only 2 paragraph is blue

This paragraph is blue

This paragraph is not blue

Remmember, make classes with .(point) ! In next tutorial we learn about id element.

3 Methods to implement CSS in your website

PiticStyle — Sun, 07 Oct 2007 00:29:15 +0000

First Method:

CSS Implements v1 with paragraph background color GREY

Second Method:

CSS Implement v2

CSS Implements v2 with paragraph background color GREY

Third Method:

CSS Implement v3

This paragraphy will be red

href=”style.css” is an style and i create it in notepad and i save it style.css

The style.css

p {color: red;} and i save it with styles.css

Create smaller CSS files

PiticStyle — Fri, 05 Oct 2007 00:05:47 +0000

This article will tell you how to make your CSS files a bit smaller. You can ask yourself one question; Why shouldn’t you? Read on to find out how to do this.

There are only advantages of making your CSS files some smaller. When your website uses a 5k CSS file, you might not see the difference in loading time, but when using bigger (25k) files, you can notice your website will load a bit faster when using some of the steps below. Another thing is that your file will become more organized and clean. Read on to get tips of improvement.

The main idea of this article is to reduce the number of characters you have used in your CSS. The less characters, the smaller your file.

Comments

You have different ways of using comments. Comments may be something you can not delete in your CSS, because you might forget something (or your fellow-workers). But, there are a couple ways of using them.

/*———————-*/
/*—–Comment—–*/
/*———————-*/

These lines of code do the same as:

/*Comment*/

You can still read what it says and what tips it gives. The only thing you did is to save space.

Color prefixes

With some ‘standard’ colors it is possible to write their prefix in a shorter way.

color: #ffffff;
color: #ff88ff;

This prefix’s will do the same as:

color:#fff;
color:#f8f;

Prefixes with all different characters can’t be written shorter. You have to use the same prefix there. For example:

color: #f8f7f2;

Use one line of codes instead of a couple

When you are coding a website by hand, you’ll often first use the ‘padding-left:5px;’ attribute and some time later a ‘padding-top:10px;’. You can write all those in one line of codes.

Padding-left:10px;
padding-right:20px;
padding-top: 0;
padding-bottom:30px;

Those codes can be written as simple as this:

Padding: 0 20px 30px 10px;

When your padding left and right is the same, and top and bottom too, you can do something else too. Example:

padding-left:10px;
padding-right:10px;
padding-top: 0;
padding-bottom: 0;

This can be written like this:

Padding:10px 0;

The same rule applies to margin attributes too. You may also try the same thing with backgrounds, borders and fonts

You can leave out the ‘PX’ when value is ‘zero’

There’s some logic in this. 0px is the same as 0em or 0pt. We can use just the ‘zero’ here, which will give you another 2 characters of profit.

Padding: 10px 0px 0px 0px;

Is the same as:

Padding: 10px 0 0 0;

Defining your ID’s and classes

You might have very long ID or Class names. For example, you can name them ‘HeaderMiddleLeft’, but you can also name them something like this, ‘HeaderML’. Sometimes, when using one CSS file with different people, this isn’t very handy, but when your CSS file is for private use, you can shorten those ID’s or classes.

#HeaderMiddleLeft becomes #HeaderML.

Clean up your CSS file

An often overlooked ‘tip’ is to clean your CSS file. Sometimes, I’ve got an idea, but later on, I’ve got a better idea, so I will take that way. In this coding process, you might create ID’s or classes you don’t use in the final design. You can just delete them!

Create just one element when using the same content in different elements

You might have the a couple elements in your file, with the same content inside it. Those items can be placed ‘inside’ each other. Not clear what I mean? Take a look below to view an example.

h1{
margin:0;
padding:0;
}h2{
margin:0;
padding:0;
} h3{
margin:0;
padding:0;
}This three elements does the same as simple ‘one’ element;h1, h2, h3{
margin:0;
padding:0;
}

Conclusion

On a 25k CSS file, using this small tips could make a difference of more then 5k in size. This means your CSS file, with the same contents, will be loaded 20% faster. This is pure profit. I hope you enjoyed reading this article and watch out for the next one!