csslearn.com » Article

Using Shorthand Properties in CSS

kunal — Tue, 15 Dec 2009 19:20:55 +0000

Your body rule should now look like this:
body {
font: 100%/1.5 “Helvetica Neue”, Helvetica, Arial, sans-serif;
background: #7F98C3;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
If you look at the font property, you may notice that your CSS may not look like ours. If you have individual font values on each line instead of all in one line, it is due to the way the CSS preferences are set in Dreamweaver: we keep our preferences set to write shorthand. So what in the world is shorthand anyway? Simply put, shorthand lets you specify several values with a single property. It can be quite a space saver in CSS documents and once you get used to it,
it makes it much easier to read your pages. Order is generally quite important when using shorthand, because
one property name may have several values following it. Let’s look quickly at a couple of shorthand examples, beginning with the font property. There are six possible values for font: font-style, font-variant, font-weight, font-size, line-height, and font-family. If one of these values is not declared, the default for the value is used. In the case of our style sheet, you can see that we declared the font-size, line-height, and font-family. This means the other three properties are left at their default values. Our shorthand declaration equals this block of code:
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 100%;
line-height: 1.5;
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

The shorthand for applying background values is similar to font shorthand. The property is called background and it has fi ve possible values: background-color, background-image, background repeat, background-attachment, and background-position. Thus,
background: #7F98C3 url(images/body_back.jpg) repeat-y left
top; is equal to:
background-color: #7F98C3;
background-image: url(images/body_back.jpg);
background-repeat: repeat-y;
background-attachment: scroll;
background-position: left top;
Border is a similar property. It allows us to set the width, style and color of the borders of a box. It does not allow us to make one of the sides different than the other, however. To do that, we need to declare that value separately. So for instance, if we want to set the width of the left side border of our box to be 2px and the rest to be 1px, we could write it like this:
border: 1px solid #000;
border-left-width: 2px;
The first line sets the entire box to have a 1px black border with a solid style. The second line overrides the width of the left border. Remember the cascade—to override the 1px border, the 2px border must come after it.
Font, background, and border are the most common mixed value shorthand properties. Two other shorthand properties that we’ll use throughout the book are margin and padding. The shorthand for these properties allows
us to set all four sides of the box at once. Both properties are written in the same way: the specifi c order is top, right, bottom, left. People use different tricks to remember the order: you can think of the rule as trouble, from the acronym TRBL, or more simply, as clockwise (start at the top and moving around the box). After years of experience, we still find ourselves using our tricks of choice as we write our code.

For example, margin: 0 20px 10px 15px; is equal to:
margin-top: 0;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 15px;
When the values of all four sides are the same, only one value needs to be used since it applies to all four sides: margin: 0; Notice there is no unit of measurement after the 0. This is because, no matter what unit you place after zero—pixels, percent, em units—the value is still the same, zero. If you’re using equivalent top and bottom values as well as equal
side values, you can use only two values: margin: 10px 15px; This indicates that the top and bottom values are 10px and the right and left are 15px.

Finally, if your top and bottom sides have different values from each other, but the sides are the same, you can use three values in your shorthand: margin: 0 20px 15px; This tells the browser to render 0 on the top margin, 20px on the
right margin, 15px on the bottom and the lack of a fourth value indicates that the left side is equivalent to the right side. So it’s 20px as well. As you can see, shorthand is cool and it’s absolutely the way we want to write our code. It’s much too handy to not use, so throughout the rest of the book, we’ll be using shorthand. Let’s make sure you can do the same!

Working with CSS shorthand for boxes This is something that is useful to get to grips...
CSS shorthand for font properties The CSS properties discussed so far can be written in...
Using Property Values Property values come in the following forms: constant text, constant...

Related posts brought to you by Yet Another Related Posts Plugin.

Different pattern / model of css

kunal — Tue, 08 Dec 2009 19:14:31 +0000

Innovations

There are several innovative concepts, terms, and approaches. These are not new or radical: the technology is already built into the major browsers, the concepts are implied in the CSS specification, and the terms are commonly used. What makes them innovative is how I define and use them to show what can be done with CSS and HTML. In other words, they are innovative because they simplify learning, understanding, and using CSS and HTML. These ideas change how you think about CSS and HTML, and that makes all the difference. Furthermore,many of the design patterns in the book are innovative because they documentcombinations of properties and elements to solve difficult problems like never before.

Six Box Models

One innovation idea that CSS has six box models instead of one. CSS officially has one box model that defines a common set of properties and behaviors. A single box model is a very useful concept, but it is oversimplified. Over the years, I learned the hard way that box model properties work differently depending on the type of box. This is one reason why so many people struggle with CSS. The box model seems simple, yet when one uses a box model property, such as width, it only works some of the time or may work differently than expected. For example, the width property sets the interior width of a block box, but on table boxes it sets the outer width of the border, and on inline boxes it does
absolutely nothing. Rather than treating different behaviors as an exception to one very complicated box
model, I define six simple box models that specify the behavior for each type of box. The six box models, which are inline, inline-block, block, table, absolute, and float. Since you always know which of these six box models you are using, you always know how each box model property will behave.

Furthermore, each box model defines its own way that it flows or is positioned. For example, inline boxes flow horizontally and wrap across lines. Block boxes flow vertically. Tables flow their cells in columns and rows. Floats flow horizontally, wrap below other floats, and push inline boxes and tables out of the way. Absolute and fixed boxes do not flow; instead, they are removed from the flow and are positioned relative to their closest positioned ancestor.

Box Model Extents

Another innovation in the book is the concept that there are three ways a box can be dimensioned: it can be sized, shrinkwrapped, or stretched. Each type of box requires different combinations of properties and property values for it to be sized, shrinkwrapped, or stretched. Various design patterns in Chapters 5 through 9 show how this is done. These three terms are not official CSS terms, but they are implied in the CSS 2.1 specification in its formulas and where it mentions “size,” “shrink-to-fit,” and “stretch.”1 Of course, sizing, shrinkwrapping, and stretching are not new ideas. What is innovative is that this book clearly defines these three terms and shows how they are a foundational feature
of CSS and a key generator of CSS design patterns.

Box Model Placement

Another innovation is the idea that there are three ways a box can be placed in relation to its container or its siblings: specifically, it can be indented (or outdented), offset from its siblings, or aligned and offset from its container. The CSS 2.1 specification talks much about offsetting positioned elements, and it talks a little about aligning elements of the CSS 2.1 specificationbut it does not discuss how elements can be indented, although this behavior is implied in its formulas. Indenting, offsetting, and aligning are different behaviors. For example, an indented box is stretched and its margins shrink its width, whereas an aligned box is sized or shrinkwrapped and its margins do not shrink its width. Aligned and indented boxes are aligned to their containers, whereas offset boxes can be offset from their container or offset from their siblings. Different combinations of properties and property values are needed to indent, offset, and align different types of boxes. The design patterns Of course, indenting, offsetting, and aligning are not new ideas. What is innovative is that this book clearly defines these three terms and shows how they are a foundational feature of CSS and a key generator of CSS design patterns.

Column Layouts

Another innovation is the discovery, naming, and documenting of 12 automated techniques built into browsers for laying out columns in tables All the major browsers include these powerful column layout features. They are compatible across the major browsers and are very reliable. Even though using tables for page layout is not recommended,2 tabular data still needs to be laid out, and you can take advantage of these column layouts to make tabular data look great.

Fluid Layouts

Another innovation is Fluid Layouts. The concept of fluid layouts is not new, but the process of creating them is commonly one of trial and error. In , I present four simple design patterns you can use to create complex fluid layouts with confidence and predictability in all major browsers. These design patterns, Outside-in Box, Floating Section, Float Divider, and Fluid Layout, use floats and percentage widths to make them fluid, but they do so without the problems you normally encounter using these techniques, such as collapsed containers, staggered floats, and percentages that push floats below each other.3The Fluid Layout design pattern creates columnar layouts with the versatility of tables but without using tables. Even better than tables, these layouts automatically adjust their width and reflow from columns into rows as needed to fit into narrow displays.

Event Styling

Another innovation is the Event Styling JavaScript Framework presented. This is a simple, powerful, open source framework for dynamically and interactively styling a document. It uses the latest best practices to ensure that HTML markup is completely free of JavaScript code and completely accessible, and all styling is done with CSS. Furthermore, the framework allows you to select elements in JavaScript using the same selectors you use to select elements in CSS. This vastly simplifies and unifies the styling and scripting of a dynamic HTML document! The blog includes this framework to show how to integrate JavaScript, CSS, and HTML so you can use styles interactively.

Different Model or pattern of CSS Innovations There are several innovative concepts, terms, and approaches. These...
The CSS box model explained The box model is something every designer working with CSS...

Related posts brought to you by Yet Another Related Posts Plugin.

Different Model or pattern of CSS

kunal — Tue, 08 Dec 2009 19:11:40 +0000

Innovations

Six Box Models

Box Model Extents

Box Model Placement

Column Layouts

Fluid Layouts

Event Styling

Different pattern / model of css Innovations There are several innovative concepts, terms, and approaches. These...
The CSS box model explained The box model is something every designer working with CSS...

Related posts brought to you by Yet Another Related Posts Plugin.

Web page essentials checklist

kunal — Fri, 27 Nov 2009 13:50:38 +0000

I’m aware that some of this one was about as much fun as trying to work out complex quadratic equations in your head, but as mentioned at the start, you need to know this stuff. Imagine designing a site and it suddenly not working the way you thought it would. It looks fine in your web design package and also in some web browsers, but it starts falling apart in others. Just removing an XML declaration might be enough to fix the site. If you take the elements of this post and form them into a simple checklist, you won’t have to risk displaying those wonderful “Untitled Documents” to the entire world (or inadvertently advertising the pack age you used to create the page). To make your life easier,you can refer to this checklist:

Ensure the relevant DOCTYPE declaration and namespace is in place.
Remove the XML declaration if it’s lurking.
Add a title tag and some content within it.
Add a meta tag to define your character set.
If required, add keywords and description meta tags.
Attach a CSS file (or files).
Attach a JavaScript file (or files).
If your web editor adds superfluous body attributes, delete them.
Ensure there are no characters prior to the DOCTYPE declaration or after the html end tag.
Ensure no web page content appears outside the body element.

Basic web page structure and layout Once you’ve sorted out the site map, avoid firing up...

Related posts brought to you by Yet Another Related Posts Plugin.

Web design overview

kunal — Fri, 27 Nov 2009 05:58:50 +0000

Web design has evolved rapidly over the years. Initially, browsers were basic, and early versions of HTML were fairly limited in what they enabled designers to do. Therefore, many older sites on the Web are plain in appearance. Additionally, the Web was originally largely a technical repository, hence the boring layouts of many sites in the mid 1990s—after all, statistics, documentation, and papers rarely need to be jazzed up, and the audience didn’t
demand such things anyway. As with any medium finding its feet, things soon changed, especially once the general public flocked to the Web. It was no longer enough for websites to be text-based information repositories. Users craved—demanded, even—color! Images! Excitement! Animation! Interaction! Even video and audio managed to get a foothold as compression techniques improved and connection speeds increased. The danger of eye candy became all too apparent as the turn of the century approached: every site, it seemed, had a Flash intro, and the phrase “skip intro” became so common that it eventually spawned a parody website. These days, site design has tended toward being more restrained, as designers have become more comfortable with using specific types of technologies for relevant and
appropriate purposes. Therefore, you’ll find beautifully designed XHTML- and CSS-based sites sitting alongside highly animated Flash efforts. Of late, special emphasis is being placed on usability and accessibility, and, in the majority
of cases, designers have cottoned to the fact that content must take precedence. However, just because web standards, usability, and accessibility are key, that doesn’t mean design should be thrown out the window. As we’ll see in later chapters, web standards do not have to come at the expense of good design—far from it. In fact, a strong understanding
of web standards helps to improve websites, making it easier for you to create cutting edge layouts that work across platforms and are easy to update. It also provides you with a method of catering for obsolete devices.

Web design overview Web design has evolved rapidly over the years. Initially, browsers...

Related posts brought to you by Yet Another Related Posts Plugin.

Basic web page structure and layout

kunal — Thu, 26 Nov 2009 12:04:01 +0000

Once you’ve sorted out the site map, avoid firing up your graphics package. It’s a good idea to sketch out page layout ideas on paper before working on your PC or Mac. Not only is this quicker than using graphics software, but it also allows you to compare many ideas side by side. At this stage, you shouldn’t be too precious about the design—work quickly
and try to get down as many ideas as possible. From there, you can then refine your ideas, combine the most successful elements of each, and then begin working on the computer.

Although the Web has no hard-and-fast conventions, themes run throughout successful websites, many of which are evident in the following image of a version of my Snub Communications homepage.

A website’s navigation should be immediately accessible—you should never have to scroll to get to it. It’s also a good idea to have a masthead area that displays the organization’s corporate brand (or, if it’s a personal site, whatever logo/identity you wish to be remembered by, even if it’s only a URL). The homepage should include an introduction of some sort that briefly explains what the site is about, and it should have some pull-ins to other areas of the site. These pull-ins could be in the form of news items that link to recent product launches, completed projects, and so on.
Most websites require a method for people to contact the site owner, and at least one clear link to a contact page is essential.

Avoid constantly changing the design throughout the site. In print, this sometimes works well and provides variation within a book or magazine. Online, people expect certain things to be in certain places. Constantly changing the position of your navigation, the links themselves, and even the general design and color scheme often creates the impression of an unprofessional site and makes it harder to use.

Ultimately, however your site ends up, and whatever your design, you need to ensure your creation is as usable as possible. A good checklist—even if the points may seem entirely obvious—is as follows:

Is the site easy to navigate?
Is it easy for users to locate content on each page?
Is it easy for users to find what they need on the site?
Are download times kept to a minimum?
Is the site suitable and relevant for its target audience?
Does the site use familiar conventions?

If you can answer yes to all these things, then you should be on the right track!

Information architecture and site maps Before you begin designing a website, you need to collate...

Related posts brought to you by Yet Another Related Posts Plugin.

Information architecture and site maps

kunal — Wed, 25 Nov 2009 08:50:49 +0000

Before you begin designing a website, you need to collate and logically organize the information it’s going to contain. A site map usually forms the basis of a site’s navigation, and you should aim to have the most important links immediately visible. What these links actually are depends on the nature of your website, but it’s safe to say that prominent links to contact details are a common requirement across all sites. A corporate website may also need prominent links to products, services, and a press area. The resulting site map for a corporate site might resemble the following illustration.

Here, the boxed links serve as the primary navigation and are effectively sections of the website. Underneath each boxed link is a list of subcategories or pages housed within that section. With this structure, it’s easy for a newcomer to the site to work out where information is located. When working on site maps, try talking to people who might be
interested in the site to get their reaction to your organization of the content. When working for a client, ensure that they sign off on the site map, and that you get feedback on the site map from people at all levels in the company and, if possible, from the company’s customers. In all cases, seek the opinions of both the technically minded and relative computer novices, because each may have different ideas about how information should be structured. After all, most web designers are technically minded (or at least well versed in using a computer), and they often forget that most people don’t use the Web as regularly as they do. In other words, what seems obvious to you might not be to the general public. For larger sites, or those with many categories, site maps can be complex. You may have to create several versions before your site map is acceptable. Always avoid burying content too deep. If you end up with a structure in which a visitor has to click several times to access information, it may be worth reworking your site’s structure.

Basic web page structure and layout Once you’ve sorted out the site map, avoid firing up...

Related posts brought to you by Yet Another Related Posts Plugin.