Sunday, October 31, 2010

5 Advanced CSS Pseudo Classes that will Save your Day

CSS3 provides powerful pseudo-classes that allow the designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first, but it becomes a lot easier over time to set up your layout.

In today’s article I’m going to take a look at 5 pseudo-classes that will simplify our design process and reduces a lot of time to create a certain visual effects. You will also find demonstration below each point to demonstrate how we can use these selectors in different design scenario you face everyday in your designing process.

1. The ‘nth-child’ Pseudo-selector

One of my favorite pseudo-selectors is the nth-child. This can be very useful if you are dealing with a Content Management System where you have no ability to change the server-side code to add classes into the markup.

How to use the nth-child

If you put simply a number in the parentheses, it will only affect the element associated with that number. For example, here is how to select only the 3rd element:
view plaincopy to clipboardprint?

1. ul li:nth-child(3) {
2. background-color: #333;
3. }


ul li:nth-child(3) {
background-color: #333;
}


Now let’s look at the table below for Pseudo-class Expressions, the first column of the table represents values for n, and the other columns display the results (for N) of various example expressions.
This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements. The pseudo-class accepts an argument, N, which can be a keyword or a number. The argument N can also be given as an+b, where a and b are integers (for example, 3n+1). For example, if the argument is 3, the third element will be selected.

Thus the expression 2n+1 will match the first, third, fifth, seventh, ninth, and so on, elements if they exist. This can be used to create alternated
  • background color.
    view plaincopy to clipboardprint?

    1. ul li:nth-child(2n+1) {
    2. background:#dfe6ec;
    3. color: #333;
    4. }


    Read More at : http://devsnippets.com/article/5-advanced-css-pseudo-class.html
  • Saturday, October 30, 2010

    CSS Specificity And Inheritance

    CSS’ barrier to entry is extremely low, mainly due to the nature of its syntax. Being clear and easy to understand, the syntax makes sense even to the inexperienced Web designer. It’s so simple, in fact, that you could style a simple CSS-based website within a few hours of learning it.


    But this apparent simplicity is deceitful. If after a few hours of work, your perfectly crafted website looks great in Safari, all hell might break loose if you haven’t taken the necessary measures to make it work in Internet Explorer. In a panic, you add hacks and filters where only a few tweaks or a different approach might do. Knowing how to deal with these issues comes with experience, with trial and error and with failing massively and then learning the correct way.

    Understanding a few often overlooked concepts is also important. The concepts may be hard to grasp and look boring at first, but understanding them and knowing how to take advantage of them is important.

    Two of these concepts are specificity and inheritance. Not very common words among Web designers, are they? Talking about border-radius and text-shadow is a lot more fun; but specificity and inheritance are fundamental concepts that any person who wants to be good at CSS should understand. They will help you create clean, maintainable and flexible style sheets. Let’s look at what they mean and how they work.

    The notion of a “cascade” is at the heart of CSS (just look at its name). It ultimately determines which properties will modify a given element. The cascade is tied to three main concepts: importance, specificity and source order. The cascade follows these three steps to determine which properties to assign to an element. By the end of this process, the cascade has assigned a weight to each rule, and this weight determines which rule takes precedence, when more than one applies.

    Please consider reading our previous related article:

    Read more at : http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

    Thursday, October 28, 2010

    CSS Parent Selectors


    Let’s be clear here, just in case someone is finding this from a search engine: there are no parent selectors in CSS, not even in CSS3. It is an interesting topic to talk about though, and some fresh talk has surfaced.

    a < img { border: none; }

    In this example, it would select a tags but only if they contained an img tag. (Aside: this would be a weird departure from the typical syntax where the actual elements being selected are on the right, this would be on the left).

    Read More At : http://css-tricks.com/parent-selectors-in-css/

    line break? break long links word-wrap ? It's possible!

    How to auto brake long links.
    I tried it today is very common using tinyurl etc.

    I really like the post. I tested below one works fine.

    * { word-wrap: break-word; }

    Tuesday, October 5, 2010

    Website Design - Using CSS


    Benefits of using cascading style sheets in website design.

    * Using CSS or cascading style sheet is a favorable way of designing web pages. CSS allows a web page designer better control of the layout and results in better look of the web pages. The best is to use external CSS included in the link which is placed in the head portion of the web page. With this link tag one can implement the style sheet to the whole site. And by editing one style sheet one can make desired changes on the site.
    * Every page should have the style sheet to implement CSS there. The link tag is used to connect external CSS style sheet in a Web page but the link tag also conveys relationship between the relational pages.
    * If the aim of the web designer is to create a Web page that appears as close as possible across whole set of web browsers, then first a master CSS style sheet is created to remove default browser styling. Thus when you build the website using master CSS style sheets, you'll be beginning with a clean palette. A good web designer knows how to link CSS with the web page HTML.
    * CSS makes it easy to add spaces around objects, next to elements, and inside your pages. CSS helps web designer in indenting, out denting, letter and word spacing, in line height and the white space. With CSS one can create a bulleted list on the web page.
    * CSS implementation is a great way to create framed pages without using frames - CSS allows you to position your HTML elements including making it look like a frame. It is also possible to create a background water mark image using CSS. It is easier to control H1, H2fonts and different font sizes using CSS. The web designer can make the fonts appear smaller or larger than what the font sizes actually are. CSS provides several properties for modifying your text so that your Web pages look more interesting. Text-decoration, text-transform, and text-shadow are useful properties to understand.
    * CSS helps in re-designing the HR tags used for dividing an HTML page. One can also stylize link or hyper link elements on a web page using CSS, like changing the hover color and visited color etc.

    More and more web designers are using CSS today effective web page designs.

    I am a freelance seo content writer and hence interested in web design and development. I write often on website design and search engine optimization. I have written this article to highlight the use of CSS in creating web sites.

    Article Source: http://EzineArticles.com/?expert=Uday_Patel

    CSS - The Basics


    Thinking about CSS, but want to learn what you need to know, or need to learn before jumping onto the CSS bandwagon? Let me begin by saying that CSS can reduce your time at the computer. But knowledge do you need to learn and is CSS compatible with the search engines and your browsers? These are some of the questions I'll try to answer,as well as, explain a little about what CSS is all about.

    What is CSS?

    CSS stands for Cascading Style Sheets. CSS is a set of formatting instructions that controls the looks of a web page or pages. Some of the browsers that support CSS is: (Firefox,IE3 or later, NN4 or later). You may be saying, great this will definitely save me some time. Not so fast, you also need to know that though, the majority of the browsers understand CSS, they do not fully support all of it's capabilities.

    XHTML - XHTML is EXtensible HyperText Markup Language. XHTML Is HTML with stricter rules-that adds conformity and, is 100% XML compliant. So you should be familiar with or become more comfortable with HTML, XHTML, and the style properties of CSS.

    What can you do with CSS

    You can build your layout,adjusting size and color of your headings or body text, as well as positioning your pictures. This translates into like pages being programmed once, without the choice of inputting the same coding into each of your web pages manually. Translated, elimination of duplicate formatting.

    How to get the Search Engines to See Your Copy

    It has been said that the Search Engines still have some problems with understanding CSS. But if you want to use CSS, is there a way to get the search engines to see what you want.

    1. Keep your text clean, if you have to much garbage in your web page, than the spiders will have a difficult time in determining what is relevant and what is not. Thus, CSS keeps your web page clean, without the redundant coding needed for each individual element of code. Here is an example of how to code a headline; with the CSS code below.

    Example: "h1"Title"/h1" (replace beginning and end quotes with )

    "CSS code: H1 {font family: Arial size: 18 px; bold;}" (leave off quotes)

    Syntax of CSS

    First, CSS can be written within any text editor. But the text file must be saved with a CSS extension.

    The syntax of CSS consists of the selector and the declaration. The selector is the identifier within the body of your web page; the declaration is the code that identifies the style that you want to put into place as to property and rule. Lets say you want all your H1 headlines to be green, with the font Arial. the code for CSS would be as follows:
    Note: Do not include quotes around the code.

    "selector {property: rule;}"

    "H1 {color: green; font-family: Arial;}"

    Note: Notice that the property and rule must be enclosed in {}.

    Placement of CSS

    There are three places to put your CSS code:

    In the Head (Internal), in an external file, or within an individual tag (Inline style).

    Internal -is used within a single web page that may have a unique style.

    Inline - mixes code with content. Sometimes you may need to use it, but this style does seem to eliminate the need of even using a CSS style sheet.

    External - The CSS is separate from the body of the web page and is linked with the web page. Thus, to link an external file into a web page you will need to use the link tag.
    Example: <link rel="stylesheet" type="text/css" href="NameofCSS.css"> (Goes in the head section after the title tag)

    Which way do you go? If you have a large site or a site that will be expanding, an external file would be a better way to quickly and easily manipulate all your web pages at once.

    Watch out for Spam

    But with anything on the Internet, CSS can be used for the good and the bad. And obviously, if you want to keep your site up and running for a long time, some CSS techniques should be avoided. Why? Because some CSS techniques can be considered spam by the search engines and thus, ban your site if you use the techniques. The blackhat tactics include such things as: 1) using CSS to hide text-from headlines to body from the human eye; 2) hiding and bolding or italicizing copy for search engine spiders benefit only.

    To conclude, CSS can and is a viable way to making your web pages easier to maintain-if the majority of your pages follow the same format. If you are not all that familiar with CSS, then take the time to look at w3schools.com tutorial. It's very informative and can get you started with CSS..

    Vickie J Scanlon -- Visit her site at: http://www.myaffiliateplace.biz for free tools, articles, ebooks, how to info, affiliate opportunities, travel and tech accessories, software and computers for the online business. Or check her blog – My Affiliate Place Blog (http://myaffiliateplace.blogspot.com/) .

    Article Source: http://EzineArticles.com/?expert=Vickie_Scanlon