Nexus: CSS

PyGObject : Modifier les widgets avec du CSS-like

Read

Dans ce billet on va explorer une manière de rendre nos applications crées avec Gtk (codées avec Python ou Toutes les langues de programmation supportant la bibliothèque Gtk+).

GtkCssProvider est un module de la bibliothèque Gtk qui permet de faire du CSS-like, c'est à dire un concept de feuille de style similaire au CSS utilisé dans les sites web et dans les navigateurs web.

Par exemple remarquant la différence entre ces deux versions de la même application :

Sans l'utilisation de CSS

Avec l'utilisation de CSS

Parlons du code maintenant.

Je vais présenter cet aspect de CSS-like avec PyGObject (Python + Gtk+) dans un court exemple.

Je vous laisse avec le code :

Code de la fenêtre principale :


#!/usr/bin/env python


# -*- coding: utf-8 -*-




from gi.repository import Gtk, Gdk




class Example(Gtk.Window):


 """


 Utilisation de CSS avec Python et Gtk


 """


 def __init__(self):


  Gtk.Window.__init__(self, title="PyGtk & CSS")


  self.set_default_size(400,400)


  # Nom de la fenêtre


  self.set_name("MyWindow")




  # CSS Thème


  #Création d'un Gtk.CssProvider


  style_provider = Gtk.CssProvider()


  # Ouvrir notre fichier de style 


# en mode rb = Read en binaire


  css = open('style.css', 'rb')


  # Lire les données du fichier


  css_data = css.read()


  # Fermeture du fichier


  css.close()


  # Extraire les données CSS du fichier lu


  style_provider.load_from_data(css_data)


  # Ajouter les données lus au style provider


# en précisant la priorité d'affichage


  Gtk.StyleContext.add_provider_for_screen(


   Gdk.Screen.get_default(),


   style_provider,


   Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)




  # Création d'un box


  box = Gtk.VBox()


  # Ajout du box à la fenêtre principale


  self.add(box)


  # Création d'un Label


  self.label = Gtk.Label("Je suis un LABEL")


  # Création d'un boutton


  button = Gtk.Button("I'm a Button")


  # Ajouter un signal au boutton qui fait 


# changer le texte du Label


  button.connect("clicked", self.changer)


  # Ajouter le Label et le boutton au box 


# qui fait partie de la fenêtre principale


  box.pack_start(self.label,True, True, 0)


  box.pack_start(button, True, True, 0)


  # Tout afficher dans la fenêtre


  self.show_all()


  




 def changer(self, widget):


  """


  Changer le Label 


  """


  txt = self.label.get_text()


  if txt == "Je suis un LABEL":


   self.label.set_text("Catch me if you can !")


  elif txt == "Catch me if you can !" :


   self.label.set_text("ha ha ha you don't?")


  else :


   self.label.set_text("Funny!!!")




if __name__ == '__main__':


 # Création d'une variable qui contient 


# la fenêtre principale


 win = Example()


 # Ajouter le signal de destruction de


# la fenêtre à la fenêtre principale


 win.connect("delete-event", Gtk.main_quit)


 # Boucle principale


 Gtk.main()

Code CSS :


#MyWindow{


     background-color: black;


     font-size: 20px;


     color: green;


  }


/* Tous les bouttons nommés button seront colorés de 


la même manière : .button


Les Widget de type GtkButton seront modifiés */  


GtkButton{


           color: blue;


           background: grey;


}

Et voilà la résultat :

Pour plus d'informations, veuillez : Cliquer ICI.

Read More Add comment

Cara Memasang Widget W3 Directory

By 0x000216

Read

0 Comments

Read More Add comment

Label Berputar Untuk Blog

By 0x000216

Read

0 Comments

Read More Add comment

CSS3 Basic Interview Questions and Answers for Web Designers and Developers

By 0x000216

Read

0 Comments

CSS3 Basic Interview Questions and Answers for Web Designers and Developers

Below is the list of CSS3 basic interview questions and answers. These CSS3 interview questions and answers are meant for freshers as well as for experienced web designers and developers. So, If you going for an interview on CSS3, I suggest you to must give a look at following CSS3 interview questions. These CSS3 interview questions are based on basic introduction to CSS3, why we need CSS3, difference between CSS and CSS3, CSS3 modules, CSS3 browser support, rounded corners in CSS3, borders and shadows in CSS3, CSS3 animation and opacity etc. So lets have a look on following basic CSS3 interview questions and answers.

1. What is the difference between CSS and CSS3?

CSS3 is upgreaded version of CSS with new future like Selectors,Box Model, Backgrounds and Borders, Text Effects,2D/3D Transformations, Animations, Multiple Column Layout, User Interface etc

2. List out CSS3 modules.

Below are the listed major modules:

Selectors

Box Model

Backgrounds and Borders

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface

3. What new futures added in CSS3 for Borders and how Browser Support it?

Following border futures added:

border-radius

box-shadow

border-image

and all modern Browser Support it like below:

Internet Explorer 9 supports border-radius and box-shadow

Firefox requires the prefix -moz- for border-image.

Chrome and Safari requires the prefix -webkit- for border-image.

Opera requires the prefix -o- for border-image.

4. How you will create Rounded Corners using CSS3?

We have to creat a class like below:

and we have to add this class where we want the round corner like in below div

this is the round corner by css3

5. How we create border using images by CSS3?

By using border-image: property of css3 we can create a border using images like below

.roundpcds

{

border-image:url(borderpcds.png) 30 30 round;

-moz-border-image:url(borderpcds.png) 30 30 round; /* Firefox */

-webkit-border-image:url(borderpcds.png) 30 30 round; /* Safari and Chrome */

-o-border-image:url(borderpcds.png) 30 30 round; /* Opera */

}

.stretchPcds

{

-moz-border-image:url(borderpcds.png) 30 30 stretch; /* Firefox */

-webkit-border-image:url(borderpcds.png) 30 30 stretch; /* Safari and Chrome */

-o-border-image:url(borderpcds.png) 30 30 stretch; /* Opera */

border-image:url(borderpcds.png) 30 30 stretch;

}

6. How you will create Box Shadow and text Shadow using CSS3?

Like below we can create Box Shadow using CSS3 .boxshadowabc

{

box-shadow: 10px 10px 5px #ccccc;

}

.textshadowabc

{

text-shadow: 5px 5px 5px #FF0000;

}

and then need to use these class boxshadownabc ,textshadowabc

7. What is the CSS3 The background size Property?

The background-size property specifies the size of the background image.

As we know Before CSS3, the background image size was find out by the real size of the image. In CSS3 it is possible to specify the size of the background image, which allows you to re-use background images in different ways.

.abcbp1

{

background:url(background.gif);

-moz-background-size:80px 60px; /* Firefox 3.6 */

background-size:80px 60px; /* or we can do background-size:100% 100%;*/

background-repeat:no-repeat;

}

8. What is the word wrap / word wrapping in CSS3?

To Allow long words to be able to break and wrap onto the next line in css3 we used word-wrap property like below class

.wordwrappcds{word-wrap:break-word;}

9. What is the CSS3 animation?

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector by specifying at least these two CSS3 animation properties:

A) Specify the name of the animation

B) Specify the duration of the animation

10. What is Opacity in CSS3?

Opacity is used to show or hide the html element For example 0 for hide and 1 for show.

11. What is the other name of combined selector in CSS3 and what is it used for?

The other name of combined selector in CSS3 is known as Grouping

12. How is multiple background images handled in CSS3?

If you want to use the multiple background ,we can insert as follows...

background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg); also we can mention the position of the image either percentage value or top left, left center like this

13. What is wrapping in CSS3?

Wrapping is a vital property for proper display of contents in web pages. If wrapping is disabled then the user could not display and view long lines that goes outside the window boundary and thus becomes useless.

Definition:

The wrap() method wraps specified HTML element(s) around each selected element.

Syntax

$(selector).wrap(wrappingElement,function(index))

where wrapping element specifies what HTML element(s) to wrap around each selected element.It's compulsory.

Possible values:

HTML elements

jQuery objects

DOM elements

function(index) is Optional. Specifies a function that returns the wrapping element

index - Returns the index position of the element in the set

14. What is the syntax of opacity in CSS3?

Firefox uses the property opacity:x

Ex:style="opacity:0.4;

IE uses filter:alpha (opacity=x)

Ex:filter:alpha(opacity=40)"

15. What is CSS rule 'ruleset'?

There are two types of CSS rules: ruleset and at-rule.

Ruleset identifies selector or selectors and declares style which is to be attached to that selector or selectors. For example P {text-indent: 10pt} is a CSS rule. CSS rulesets consist of two parts: selector, e.g. P and declaration, e.g. {text-indent: 10pt}.

P {text-indent: 10pt} - CSS rule (ruleset)

{text-indent: 10pt} - CSS declaration

text-indent - CSS property

10pt - CSS value

16. What are the various style sheets?

Inline, external, imported and embedded are the different types of style sheets.

17. What are style sheet properties?

CSS Background

CSS Text

CSS Font

CSS Border

CSS Outline

CSS Margin

CSS Padding

CSS List

CSS Table

18. List various font attributes used in style sheet?

font-style

font-variant

font-weight

font-size/line-height

font-family

caption

icon

message-box

small-caption

status-bar

19. What are the five possible values for “position”?

Values for position: static, relative, absolute, fixed, inherit

20. What does isNaN function do?

Return true if the argument is not a number.

21. What is a CSS File? It is used for what purpose?

CSS stands for "Cascading Style Sheets", and are used to control and manage font styles, font sizes, and web site color combinations that are used in a web page. In order to retain continuity of "look and feel" throughout a website, all pages within a website will often refer to a single CSS file. The CSS file is typically contained in a separate file from the website, and the various web pages retrieve the CSS file each time a web page is displayed. CSS files

make global appearance changes easy -- a single change in a CSS file will mean that any pages using that CSS file will automatically display the changes .

22. How do I make a picture as a background on my web pages?

Point the body background to the name of your image you wish to use as the background as shown below. This body line should be the first line after your < / head> tag.

You can also have the background image fixed, so it does not move when using the scroll bar in the browser. To do this add the BGPROPERTIES tag as shown below.

23. How do I add scrolling text to my page?

Keep in mind not all browsers support scrolling text. however to do this add a tag similar to the below example:

THIS WOULD SCROLL< /marquee>

The above example would create the below scrolling text. If your browser supports scrolling text the below example should be scrolling. More examples can be found on our main HTML page that lists most of the HTML commands.

24. How do I make it so that someone can mail me by just clicking on text with subject?

Use the mailto command in your A HREF link tag as shown below:

Click here to mail .

25. How do I align pictures so that one may be higher or lower than the other?

Use the align statement in your IMG SRC tag as shown below.

Also, instead of align=top you can do align=middle, and align=bottom.

26. What is external Style Sheet? How to link?

External Style Sheet is a template/document/file containing style information which can be linked with any number of HTML documents. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file. The file is linked with HTML documents via the LINK element inside the HEAD element. Files containing style information must have extension .css, e.g. style.css.

27. Is CSS case sensitive?

Cascading Style Sheets (CSS) is not case sensitive. However, font families, URLs to images, and other direct references with the style sheet may be. The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers. It is a good idea to avoid naming classes where the only difference is the case, for example: div.myclass { ...} div.myClass { ... } If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case.

Read More Add comment

Text Shadow Property in CSS3: Syntax and Examples

By 0x000216

Read

0 Comments

Text Shadow Property in CSS3: Syntax and Examples

Text Shadow CSS3 property is used to apply shadow to the text elements in HTML. You don't have to use other softwares like Photoshop to this as CSS3 has this amazing text-shadow property. Text Shadow is the most popular and important designing technique in newly created websites.

Syntax of Text Shadow CSS3 Property:

Syntax of Text Shadow property is very simple and easy to remember. You can use it within a single line of CSS3 code.

The syntax includes figures for the X-offset, the Y-offset, the blur amount and finally the colour of the actual shadow. You don’t have to settle with one shadow, you can build up multiple text-shadow values to create some really cool effects!

HTML Element {text-shadow: h-shadow v-shadow blur color;}

Example of Regular Text Shadow CSS3 Property:

p{text-shadow: 2px 2px 2px #000;}

The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow.

This css code makes a shadow to

which is 2px right and below of the text, which blurs for 2px and 4th argument is for the color of shadow.

1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow

Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontally (first value) and placing the shadow below the text vertically (second value).

The third value, the blur radius, is an optional value which can be specified but don’t have to. It’s the amount of pixels the text is stretched which causes a blur effect. If you don’t use the third value it is treated as if you specified a blur radius of zero.

You can use RGBA values for the color, for example, a 40% transparency of white:

p { text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); }

Example of Multiple Text Shadow CSS3 Property:

p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

Browser Support for Text Shadow CSS3 Property:

Text Shadow property was introduced in CSS2 but was withdrawn from CSS2.1 specifications because of lack of support to major browsers. A stable version of Text Shadow property was introduced in CSS3 and now it is supported by all the browsers except IE8 (and earlier versions).

CSS3 Text Shadow Generator

You can visit http://css3generator.com/ to generate a variety of CSS3 text shadow (regular or multiple).

Read More Add comment

CSS Tips and Tricks: Write Simple, Short and Consistent CSS Code

By 0x000216

Read

0 Comments

CSS Tips and Tricks: Write Simple, Short and Consistent CSS Code

CSS (Cascading Style Sheets) code is used in each and every website you create. CSS is used for giving style to your webpage. So, you should know how to write better and optimized CSS code. I am going to list some CSS Tips and Tricks which will help you in writing better CSS code. This article on 'CSS Tips and Tricks' covers use of CSS Inheritance, concept of multiple selectors, use of css shorthand properties, use of global reset concept, CSS IE (Internet Explorer) Hacks, naming convention of CSS IDs and Classes and other elements, use of external and internal stylesheets and CSS comments etc. In short, main motive of this article 'CSS Tips and Tricks' is to make your css code simple, short, consistent and more readable.

1. Don’t Use Global Reset in CSS Code

Using global reset to remove default margin and padding from all HTML elements is a strict no-no. Not only it is slow and inefficient way but you’ll have to define margin and padding for each element that needs it.

*{ margin:0; padding:0; }

Better Approach

html, body, div, dl, dt, dd, ul, h1, h2, h3, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
ul { list-style:none }

2. Do not use IE Hacks in CSS Code

Though CSS hacks might be useful to maintain consistent look of the website over older browsers like IE6, but they can be problematic for newer versions of IE as newer versions like IE8 do support CSS standards to a good level and using hacks might break out the layout. You should use conditional statements instead to target specific versions of Internet Explorer.

For example, using the below lines of code within your tag will load the iestyles.css file only when browser is Internet Explorer version 6 or less.

3. Use Meaningful names for IDs and Classes

Suppose you define your sidebar styles using class .leftbox and after some redesign, you float it to right, then would it be meaningful to have leftbox as name for right floated box. You should put some thought before declaring classes and IDs for elements so that they are meaningful and easy to understand later.

4. Utilize CSS Inheritance

If multiple child elements of a parent element use same styles on your web page, it will be better to define them for their parent element and let the CSS inheritance do all the work. You’ll be able to easily update your code later and it’ll also reduce the CSS file size considerably.

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

Better Approach

#container{ font-family:Georgia, serif; }

5. Combine multiple Selectors in CSS Code

You can combine multiple CSS selectors into one if they have common style definitions. It’ll save you time and space.

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Better Approach

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. Use Shorthand Properties in CSS Code

Utilize the shorthand properties of CSS to quickly write CSS code and reduce file size. Shorthand notation can be used for margin, padding, border, font, background and also for color values.

li{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    line-height: 1.4em;
    padding-top:5px;
    padding-bottom:10px;
    padding-left:5px;
}

Better Approach

li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif; padding:5px 0 10px 5px;
}

7. Organize CSS Code

Organizing your CSS code in a certain pattern will make it easier to find things at later time and save you a lot of time looking for a specific style definition.

Here is a sample organization that you may use:

/*-------------------------
    CSS Reset
-------------------------*/

/*-------------------------
    Generic Classes
-------------------------*/

/*-------------------------
    Layout styles
-------------------------*/

/*-------------------------
    Section specific styles
-------------------------*/

8. Make CSS Code Readable

Writing readable CSS will make it easier to find and update a style declaration later. Either group all styles for a selector in one line or each style in its own line with proper indentation. You can also combine these two techniques together.

/*------------------------
Each Style on new line
---------------------*/

div

{
    background-color:#3399cc;
    color:#666;
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}

/*------------------------
    All Styles on one line
    ---------------------*/

div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

9. Add proper Comments in CSS Code

Comments can be used to separate different sections of CSS code

/*--------------------
Header
-----------------*/

#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}

/*--------------------
Content
-----------------*/

#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/*--------------------
Footer
-----------------*/

#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

10. Order CSS Properties Alphabetically

This might be a difficult way to write CSS but it’ll make it easier for you to find out any property easily at a later stage.

div
{
    background-color:#3399cc;
    color: #666;
    font:   1.2em/1.4em Arial, Helvetica, sans-serif;
    height: 300px;
    margin: 10px 5px;
    padding:5px 0 10px 5px;
    width: 30%;
    z-index:10;
}

11. Use External Stylesheets for CSS Code

It is always a good design practice to separate content from presentation. Place all of your CSS code into external stylesheets and use the to reference stylesheets within a web page. By placing CSS into external files, you can easily update your styles later at one place instead of looking into html templates or files for styles.

Better Approach

12. Split CSS code into multiple files

If you are working on a large web project that has multiple modules, each with different set of styles and looks, it will be better to split your CSS files into multiple files based on the module they are applied to. You can separate stylesheets like, one for reset, one for layout, one for generic classes and one for module specific styles. This technique will let you organize your code easily in a large project but loading multiple CSS files means more HTTP requests and slower loading time, this is where Bridging CSS files come to rescue. Create a separate CSS file and import other CSS files into it.

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

13. Compress CSS Code

Once you are ready to deploy the web design project, compress your CSS code using tools like CSS Compressor to reduce file size and improve loading time of webpage.

14. Be Consistent in Writing CSS Code

When you work on multiple web development projects, it’ll be a wise decision to choose a particular way of organizing and formatting your CSS code and stick to that way for all your projects.

Read More Add comment

What is CSS Inheritance and Why Should I Use CSS Inheritance?

By 0x000216

Read

0 Comments

Read More Add comment

28 Online Best Free Visual CSS Editors

By 0x000216

Read

0 Comments

28 Online Best Free Visual CSS Editors

CSS (Cascading Style Sheets) are widely used in web designing with HTML and Javascript. There are lot of online free visual css editors are available for you. We have picked some of the most popular and best free visual css editors. These css editors focus on real time css editing and make your css editing more convenient as you can view the result immediately after you changed a value. Using these free visual css editors, there will be little chance of making syntax error while writing css code. Also, these online free visual css editors provide you sample css templates to help you out. You don't have to remember any CSS propery as css editors will do it for you. Here is the list of online best and popular visual css editors.

1. Stylizer CSS Editor

Stylizer is an absolutely unique CSS editor that focuses on real-time CSS editing. You can just enter a web address into its built-in browser that supports Firefox 3.5 and IE7′s style definition, and it would have all related CSS rules loaded for you to edit with its familiar point-and-click interface.

The editor comes with a Code Grid feature that makes your CSS editing more convenient as you can view the result immediately after you changed a value. Also with its diagnostic Bullseye feature, you can view associated elements at certain part of the site and edit it with points and clicks. Other features like Size Grips allows you to visually adjust the position of a CSS element, and with Two-click Coloring feature you’re granted a Photoshop-like color picker to choose any color for, let’s say, your site font. Oh, did I mention that all these edits are done in real-time, immediately viewable result?

With Stylizer it’s merely impossible to make a CSS mistake as it would restrict you to put any value that’s not compatible with the corresponding CSS property. However the software would fail to load certain CSS file sometimes, due to its unexplained critical error.

Stylizer comes with Basic and Ultimate version. While Basic version is totally free, the Ultimate version is available to you for 14 days after the installation, then it offers $85 for you to continue using its advanced features like Bullseye.

2. TopStyle CSS Editor

TopStyle CSS editor starts to amaze you by its first time configuration, when you can choose a style definition that shows only properties and values supported by either Firefox, Internet Explorer, Safari, or even iPhone OS 2.0, which is practically useful for cross-platform web designer.

Among all features I found Style Inspector is especially useful, as it works as a panel to let you include any CSS property with simple point-and-click interface. When you finished choosing all CSS properties you want, the source code would be automatically generated for you to save your time from repetitive and tiring coding.

One another good stuff about TopStyle is it shows browser compatibility underneath its style inspector, which you can see either the CSS property is fully supported by certain version of web browser like Internet Explorer 7, or it’s terribly buggy.

The editor comes as a trial version with limited feature, and you can unlock its full potential by $79.95.

3. Style Master CSS Editor

Claimed itself as a master, Style Master did pretty well to create a CSS editing environment for any level of expertise. The software not only provides WYSIWYG editor that smoothens the workflow for CSS beginner, but also grant you the access to the very detailed information about every CSS property for expert to refer. You can browse and choose CSS properties by either category or alphabetical order.

Perhaps the most unique point is the editor itself contains almost 20 useful stylesheet templates for you to start with, and not surprising for a style master to have very clean, well-arranged and professional CSS rules defined in its built-in template.

You can enjoy the fully-featured software for 30 days, and pay either $59.99 or $29.99 for education license to open up its full potential again.

4. Xyle Scope CSS Editor

Xyle Scope is a must-have free CSS editor for Mac, as it’s a truly professional CSS editor that allows you to surf website while fine-tune its CSS directly inside the editor.

Xyle’s browser comes with normal browser mode and selection mode which works pretty similar like Firefox plugin, Firebug that provides the CSS source viewing and editing, except that the editor allows you to save modified CSS values in their original location.

Using the ‘Smart Group‘ feature, you are able to filter out all rules influencing the way in which links are shown or those responsible for the layout, you can even narrow the result with its built-in search function, no more trial-and-error method!

Xyle Scope also offer integration with external text editors like BBEdit for more convenient and energy-saving coding work, just do a change and either the text editor or Xyle Scope would update all changes automatically for you.

5. Rapid CSS - CSS Editor

Rapid CSS is the way for more comfortable, convenient and complex CSS editing. It has its own fully customizable text editor with helpful features like syntax highlighting, code completion and built-in CSS reference for painless coding experience.

Caring about your CSS’ cleanliness, you can format your CSS stylesheet, like rearrange them by CSS type or create shorthand properties to make the stylesheet looks more comfortable and sweet. The built-in code validator also ensure your stylesheet’s not only clean but valid.

The editor comes with 30 days evaluation period with 30 uses, you can go for full version by $29.85.

6. Style Studio CSS Editor

The main beauty of Style Studio lies within its CSS Wizard feature, which works to provide you immediate CSS effect with few points and clicks.

For example, you can select a font wizard, then choose a font family and set a font size for it, then font style, weight, variant…and boom! Rules are inserted into the stylesheet as a fully-validated CSS code.

Wizard feature also include color, border, text, positioning, classification and finally filter rules, just almost everything you can think of CSS. These wizards are pretty useful as you don’t need to type repeatedly to achieve certain complicated CSS effect. Another noble feature is IntelliStyle, which functions like code completion for you to choose certain CSS properties for your design purpose.

The downside of this editor would be its outdated browser’s style definition support, as it only support up to IE6 and, well, no Firefox.

You’re granted 30 days to enjoy the software and $49.99 to purchase it.

7. CSSEdit - CSS Editor

Design beautiful, innovative and fast-loading web sites with a beautiful, innovative and fast app, that’s CSSEdit by MacRabbit. From features like Selector Builder until intelligent source environment, CSSEdit is designed for any level of expertise.

With the highly polished editor like this, you’re expected to see changes to your CSS stylesheet appeared in real-time, without tiring upload-refresh action. X-ray inspector is also created as a feature to diagnose CSS code from specific part of the site.

The innovative part of the CSSEdit is probably its Selector Builder that lets you describe your CSS style with plain English, not much interest for an expert but useful for absolute beginner.

Demo version restricts you to save file with fewer than 2500 characters, while you can pay $39.95 to wipe out all restriction.

8. EngInSite CSS Editor

If you are a serious designer who cares about correct CSS specification, right CSS placement, or your CSS stylesheet must be fully-validated, then EngInSite CSS editor can be your favorite editor.

In this editor, you can add class, id, and element selector with the help of its built-in inspector, also you can convert the color to either Hex or RGB value, which is a very rare feature for a CSS editor. You can observe your result in the preview panel with measurement tools to ensure that your every design element is on the right position.

The editor also come with code completion but it’s little bit buggy, so I would say it’s semi code completion. Otherwise the entire editor is nice to use, except the very fact that the editor is quite outdated in term of browser’s style defnition support, as it only supports up to IE6′s style definition.

9. Stylesheet Maker - CSS Editor

Stylesheet Maker is yet another standard CSS editor that offers a clean coding surface with file explorer panel, and some useful CSS tools to help setting font, color, margin, border, etc.

Compared to several CSS editors like Rapid CSS or Style Studio, Maker has less feature yet very clean interface, and this is good for certain beginner who don’t want to get things complicated, or CSS ninja who wants everything minimal and comfortable.

Although this editor is designed for intermediate user, its CSS Tags feature can help you to simply create a CSS rule with tags by clicks.

It costs $34 to own this editor, or you can buy it with other CoffeeCup software as a bundle purchase.

10. Arduo CSS

Arduo CSS is a new born CSS editor which aims to please you with its intuitive and easy-to-use interface. With its clean interface and syntax highlighting, you are guaranteed to create and edit a CSS file without too much trouble and interruption. Also you can use its ‘Node’ feature to define CSS rules by points and clicks.

For those who feel your stylesheet is way too heavy, the CSSTidy tool from the editor can help you to optimize the stylesheet and wipe out all unnecessary code.

The editor is freely available on its official site.

11. Simple CSS

Just as its name, Simple CSS has everything that a designer needs for simple CSS editing. You can import a CSS file into the editor and modify it with few clicks, check out the result in its preview panel, and take out the source code right away.

Although you can import almost every CSS file into the editor, you can only view 1 CSS rule at once with a click, and sometimes your import would cause error due to its limitation like no @rules support. Also the editor itself is not so flexible like you can only select ‘Auto’ or ‘Inherit’ for z-index property, but not directly give the property a value.

Nonetheless, it’s free and pretty handy for designer who needs a quick fix.

12. Firebug

The most popular and powerful web development tool which inspects HTML, modify CSS style and see the changes in real-time, available as a plugin for Firefox web browser.

13. CSS Usage

An extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.

14. Web Developer

A Firefox extension for you to do a lot of cool things like view CSS sources or disable certain CSS stylesheet for design or development use.

15. Notepad++

A free source code editor and Notepad replacement that supports several languages including CSS. Contains features like Function Completion to help building your CSS design.

16. Coda

An advanced text editor with built-in CSS editor that provides you two CSS editing mode for more flexible designing experience, able to see the result instantly after changes made.

17. NetBeans IDE

An open-source and professional Integrated Development Environment with the most complete CSS reference in its code completion feature.

18. Aptana Studio

A complete web development environment that combines powerful authoring tools for HTML, CSS, and JavaScript, currently supports up to HTML5 and CSS3.

19. WebStorm

JetBrain’s IDE that implements relevant auto completion for everything including CSS, also you can get notified about CSS problems on the fly.

20. JustStyle CSS Editor

JustStyle CSS Editor is full-featured, yet easy-to-use, software for webmasters. It is a specialized style sheets development environment, featuring everything needed to develop and deploy cascade style sheets. JustStyle CSS Editor provides an interactive user interface and presents CSS properties in special wizards and generic value lists. Written entirely in Java, it works on different platforms, such as Microsoft Windows, IBM OS/2, Linux, Apple Mac OS, Mac OS X and others.

21. ELEDO - Eledicss

Eledicss is a CSS2 editor (GPL licensed) implemented as a server-side PHP script. It allows editing CSS files using a web browser.

It can be installed both on UNIX and Windows webservers. It was tested on PHP 4.1.2 on server side, and Mozilla 1.0 on client side. Eledicss should safetly work on all PHP 4.X versions.

22. CSSED – “A GTK-2 CSS Editor”

It features syntax highlighting, syntax validation, MDI notebook based interface, quick CSS properties and values insertion, auto-completion and dialog-based insertion of CSS complex values.

Being a CSS editor, its not limited to this language. CSSED haved some support for HTML (with embbeded Javascript), XML, Javascript, Java, PHP, JSP, C, C++, Apache configuration files, .htaccess, Python, Perl, SQL, SH and other languages so it can serve quite well as multi-purpose editor.

23. TS Webeditor (tswebeditor)

tsWebEditor is an editor for HTML, PHP, Perl, JavaScript, CSS and many other languages. It displays the source code colored (syntax highlight), code hint for functions, code completion (PHP, JavaScript, ASP, HTML), code browser, PHP debugger and syntax validation, help, CSS wizard, HTML tag editor, HTML syntax validation, and an easy to use SQL Designer.

24. Astyle CSS Editor

Astyle is a basic visual CSS-editor which offers exactly what one would expect from a basic editing tool. No advanced features, however more than essential editing tools. Astyle couldn’t really impress us with some extremely useful features or sensatonal abilities.

25. Oxygen CSS Editor

An XML-Editor with CSS-functionality

26. XMLSpy CSS Editor

This editor includes a full-featured CSS editor to assist developers creating XML-based Web sites in XMLSpy.

27. CSS Layout Magic (Win / Mac)

This Dreamweaver-plugin offers you a number of simple or advanced CSS-layouts. Works on Windows and Mac OS X systems running Dreamweaver MX.

28. Web Developer’s Toolbar (Firefox Extension)

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

Read More Add comment

Nexus

PyGObject : Modifier les widgets avec du CSS-like

Cara Memasang Widget W3 Directory

Label Berputar Untuk Blog

CSS3 Basic Interview Questions and Answers for Web Designers and Developers

Text Shadow Property in CSS3: Syntax and Examples

CSS Tips and Tricks: Write Simple, Short and Consistent CSS Code

What is CSS Inheritance and Why Should I Use CSS Inheritance?

28 Online Best Free Visual CSS Editors

Recent Posts

Facebook