More on CSS Margins

The properties for CSS margins are used for defining the spaces surrounding an element. The margin clears out an area around an element which is outside of the border. The margin is transparent so it would just be a clear space on the page. The different sides of the margin can be controlled and set to different values independent of each other.

Values Used in CSS margins

Here are some of the possible values that could be used in margins:

    • auto- By using auto, you are letting the browser define the margin that it would display.
    • length- Defines the length of the margin. It can be defined using pixels or some unit of measurement. The default value is set at 0px.
    • %- Using this means you are defining a margin based on the width of the element.
    • inherit- This means that the margin should just follow the element for which it is being used.

 

As we have mentioned, it is possible to set the sides of the margin independently from each other. Here is a sample code for that:

margin-top:100px;
margin-bottom:100px;
margin-right:60px;
margin-left:60px;

There is a way that you can shorten the code for the margin property. Here is an example of that:

margin:100px 45px;

From Four to One

It is possible to have one to four values for the margin property.

margin:35px 50px 75px 100px;

Top margin is set at 35px

Right margin is set at 50px

Bottom margin is set at 75px

Left margin is set at 100px

margin:45px 50px 75px;

Top margin is set at 45px

Right and left margins are 50px

Bottom margin is set at 75px

margin:25px 50px;

Top and bottom margins are set at 45px

Right and left margins are set at 50px

margin:35px;

All four margins are set at 25px

The CSS Padding

Now something similar but altogether different is the CSS padding. This would refer to the distance between the element and the border that surrounds it. Keep in mind that most of the time, the same rules that you have been using for margin is also applicable to the padding. Here is an example:

      • padding-top: percentage length;
      • padding-left: percentage length;
      • padding-right: percentage length;
      • padding-bottom: percentage length;

 

There are two ways that you can set the padding. You can use an actual measurement of length such as that in pixel or you can use percentage value instead. Just as there is a shorthand way of declaring the margin value, the same thing could be said of the padding value. When you declare padding on one side only, then that single declaration would be used on the remaining three sides as well. If you declare two padding sides then the opposite value would take effect on the undeclared sides. Not setting the value would let it revert back to 0.

These are just a few of the things that you have to learn when it comes to setting the margin and the padding of an element that you are using.

CSS Spans, Divs and Other Features

In CSS a div or a division separates the contents into small sections. When the contents are divided, then each section can be formatted in a different way. That could then be applied to all sections of the site. Here is a sample code:


This is a DIV sample.

The CSS Span

CSS spans are somewhat similar. A span would work in the same way that div does wherein it divides the content into sections. The difference is that a span can be used on finer levels. It can be used for example in order to format even individual characters or single letters within a content of a page. Another crucial difference between a div and a span is the fact that there is no line feed after a span. Here is a sample code for a span:

this is a span

It is useful in applying different styles to certain sections. If you want to give emphasis to a certain section of the text for example then you can use a span to highlight it or in order to use bold fonts on it. Here is another example of how to use span:

The text is italic

On your CSS file, you can then put in this code:

.italic{ 
  font-style: italic; 
}

The result should look like this:

The text is italic

Using CSS Margins

The purpose of the margin property in CSS is to define the space between the elements and the border or any other element that is surrounding it. Because of this, the margin property is very important property to learn if your website is to look right. You have three options that you can choose from when you are setting the value of the property. These are the following:

    • length
    • percentage
    • auto

 

There is also a shorthand way of defining the property. Here is an example of that shorthand method:

margin: 12px 12px 12px 12px;

You can also declare it to be: margin: 12px; , since that would automatically set all sides to have a length of 12 pixels. It is possible to set the margin value to 0 and if you do not set it, then it reverts to the default value which is 0. Sometimes there are browsers that have set values for margins. You can override that by setting the margin to 0.

Using CSS Paddings

The padding is different from the margin. The padding is the distance between the element and the border that surrounds it. The same rules that are used for margins would apply to padding as well, except for two notable exceptions. The first one is that you cannot set negative values, another one is that there is no auto value for it.

You have two options when it comes to the padding property. These are length and percentage. Finally there is shorthand that you can use in order to set the padding property. That would save you a great deal of time.

CSS Divisions and Other Basics

If you want to learn how to design websites then CSS is one of the things that you must learn and be good at. CSS stands for Cascading Style Sheet and it is a system used in altering the appearance of elements that are being used on a Web page.

Learning about the Basics

Before you can delve in deeper into the intricacies of CSS, you would have to learn about its basic concepts first. CSS is a way to define how HTML elements would appear on a page. Their use can save you a great deal of time, because instead of working and applying code to each and every page of a website, you can just set the definition that you want in CSS and it would apply to the whole document.

You have to understand that HTML has some limitations to it. It gave definition to the content, for example this code:

This is a heading

That would indicate that piece of content is a heading, but it would not really say how that content is going to be displayed. Adding codes to define the font, style and color for each pieces of content would have meant a laborious and repetitive process that was not really appreciated by any designer. That’s why they came up with CSS3 in order to make things a lot simpler.

Understanding CSS Divisions

You must learn about CSS divisions as one of your first steps in understanding CSS. A division is a HTML element that is utilized in defining a file. A division can be made up of various parts and is usually composed of all that makes up a site. Here is a basic code for a division:

content goes here

You can make further changes to that code. For example, you can add some style to it:


Site contents go hereHere is what can be found in a CSS file:

#container{
  width: 70%;
  margin: auto;
  padding: 20px;
  border: 1px solid #666;
  background: #ffffff;
}

Now all of the elements that can be found inside the division that was created will be styled according to what I have defined on the file. When you create a division it would create a line break as a default function. Now you can go ahead and create various definitions on your site by using IDs and even classes.

Tips in Using the

Element

You have to keep in mind that the

is very much in use within CSS for creating Web page layouts. It plays a very crucial role. The

is supported on all of the major browsers in use today so you shouldn’t have any problems with that.

Other Basic Info on CSS

There are many other basic information about CSS that you should explore. Again, the main benefit that you can out of using it is that it can save you a great deal of time. So you should never pass up on the opportunity of learning more about it.

Useful CSS Snippets and Techniques

The great thing about CSS is that it has simplified the way that websites can be designed. What is even better is that you can take a step further and find ways that you can simplify the way that you can use CSS. There are plenty of CSS snippets available that you can get from various sources, which you can use in order to get your project started.

CSS Techniques That You Can Use

There are many CSS techniques that you can use right away. You don’t have to be a professional web developer in order to use them. What’s even better is the fact that there are plenty of places where you can get the CSS snippets that you can use. There are many websites that offer them. To help you out here are some useful CSS techniques that you might want to try on your own.

The Transform Property

By using the transform property you can apply some changes for element on a page with using a 2D or even a 3D effect. Here is a sample code that you can use for this property:

/* make something larger */
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);

    /* make something rotate */
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);

Like other properties in CSS, you might encounter issues when it comes to browser support for this property. IE8 and below will not support but most modern browsers will.

Varying Colors Based List Position

One great effect that you can have when you are using CSS is to have the items on a list to have different colors. The colors would be based on their position on the list. This would go well with a menu. Here is a sample code for a static website:

.home a { border-color: #636393; } 
.tutorials a { border-color: #B5222D; } 
.news a { border-color: #D4953C; } 
.about a { border-color: #609591; } 
.contact a { border-color: #87A258; }

This would not work with a WordPress website which is very dynamic. You would need a different code for that.

li:nth-child(1) a { border-color: #636393; }
li:nth-child(2) a { border-color: #B5222D; }
li:nth-child(3) a { border-color: #D4953C; }
li:nth-child(4) a { border-color: #609591; }
li:nth-child(5) a { border-color: #87A258; }

Technically what the code is saying is that the text on a specific position would be of a specified color. The biggest issue with this is again, the problem of support and compatibility. Not all browsers would support especially IE* and below. For some designers, that is not an issue since the enhancements that CSS can bring is non-essential to the function and purpose of the site. There are cases, however, when it really is needed.

Here is a code with a solution with the problem of compatibility with IE8:

li a { border-color: #636393; }
li+li a { border-color: #B5222D; }
li+li+li a { border-color: #D4953C; }
li+li+li+li a { border-color: #609591; }
li+li+li+li+li a{ border-color: #87A258; }

CSS3 VS. HTML5– Distinctions and Synergy

This article compares CSS3 VS. HTML5, taking into consideration their respective natures, features, and the benefits they implement to webpage design.

HTML5 and CSS3 are two ubiquitous and powerful names in webpage design. Both have left unmatched contributions in establishing interfaces convenient for browsing. But what is their distinction? In this article, we shall study CSS3 vs. HTML5.

CSS3 vs. HTML5: Nature

HTML5 brings in features that mirror usual utilization on webpages. A number of these attributes are semantic substitutes for regularly utilized inline (<span>) elements and generic blocks (<div>). Some of the inline elements include <video>, <audio>, <header> (generally referring to top of a web page or the starting lines of a HTML code), and <nav> (website navigation block). Other elements (especially those that add specifications to visual presentations) have been eliminated as they are inconveniently created and a style sheet language like CSS3 proves an easier tool in modifying specific elements.

HTML5 does not already use SGML as basis for its syntax, despite the resemblance of the markup. HTML 5 has been created to have backward familiarity and compatibility with older versions of HTML. It possesses a new beginning line similar to a SGML declaration <!doctype html>, which activates the mode for rendering.

Cascading Style Sheets (CSS) present augmented flexibility in the rendering of content of website. In short, it makes the visual presentation of a webpage better. The downside of which is that CSS3 is not widely supported by all web browsers, and if it is, some features are incompatible. Despite this limitation, CSS3 coding language is widely utilized by code developers because making modifications are conveniently done and induce the same effect compared to utilizing a Javascript plugin.

Another limitation in utilizing CSS3 is the condition to put into operation filters to alter how a specific style will present onscreen when different browsers usage are taken into consideration. CSS3 is also capable of backward compatibility, extending attributes of its earlier versions.

CSS3 vs. HTML5: Features

HTML5 details scripting application programming interfaces (APIs) that can be utilized with JavaScript. The elements of the document object model (DOM) platform are extended some attributes are noted. There are also recent application programming interfaces (APIs) of concern: protocol handler registration and MIME type, microdata, management of browser history, editing of documents, web applications accessible when user is offline, timed media playback, messaging across various documents, drag-and-drop, canvas element for direct mode 2D drawing, and web storage (a structure that behaves similar to the concept of cookies nut comes with improved API and a bigger capacity for storage).

CSS3 presents exciting features to improve the visual quality of website, enhancing the experience of the user. Some of these features include: border, backgrounds, text effects, fonts, 2d and 3d transforms, transitions, animations, multiple columns, user interface, gradients, media queries, dropdown menus, rounded corners and browser support.

Example of a CSS code for columns:

<head>

<style>

div.newspaper

{

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

}

</style>

</head>

 

Helpful Facts About Rounded Corners In CSS3

This article relays relevant information on rounded corners in CSS3, how they work, which browsers support it, and creating other rounded corner properties.

CSS3 allows you to generate rounded borders for your webpage. In addition, you can add style preferences such as shadows to boxes, and utilize a picture as a border with no need for making use of design programs such as Photoshop.

How It Works

With the four basic border radius properties, you can generate rounded corners in CSS3. Samples include border-top-right-radius, border-bottom-right-radius, etc. or it can be done concurrently at the same time through the utilization of shorthand property. This property can allow any singular or two values, unitized as percentage or length relative of box dimensions.

Values can also determine the curvature of the corners, on whether these are to assume an elliptical or rounded shape. If one value is present, it means that the vertical and horizontal radii are equally measured. If either of the values is zero, you will have a square corner.

Browser Support

WebKit browsers such as Google Chrome and Apple’s Safari support box-shadow and border-radius. However, for border-image, it necessitates the prefix -webkit-. Firefox is compatible with all border properties. Internet Explorer 9 and Opera are compatible with box-shadow and border-radius, but the latter web browser necessitates the prefix -o- intended for border-image.

Creating Rounded Corners in CSS3

In CSS2, it’s a little bit difficult to add rounded corners. The creation of rounded corners in CSS3 saw greater improvement in terms of ease. The following shows an example of adding up rounded corners to a div element:

div

{

border:5px solid;

border-radius:50px;

-moz-border-radius:100px; /* Old Firefox */

}

 

The prefixed -moz-border-radius is intended for Firefox, while for Google Chrome and Apple’s Safari, it is -webkit-border-radius. Lastly, the simple, old border-radius is for proofing if browsers have good compatibility with this CSS3 feature.

In this example, it is shown how to add rounded corners of the element desired. However, variations do exist. If you want to round some vertices while letting other vertices, appear elliptical, there is a corresponding CSS trick to be applied.

CSS3 Box Shadow

The following shows an example of adding up a box-shadow feature to a div element.

div

{

box-shadow: 20px 20px 10px #33333;

}

 

CSS3 Border Image

CSS3, with its border-image property also allows you to utilize a certain image as a border. The following example shows how it is done.

div

{

border-image:url(border1.png) 50 50 round;

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

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

-moz-border-image:url(border1.png) 50 50 round; /* Old Firefox */

}

The Top Answers on Why CSS Padding Is Necessary In Websites

Making websites can be a lucrative business if you know exactly what it is you are doing. Some programmers spend years getting their crafts perfected but some are just born with the codes in their fingertips ready to fire at the world. All it takes is a little time on your hands and you too can be making websites that look professional. CSS padding takes a very important role in making sites because it allows elements to be separated and actually be given more highlight as you create margins within an element.

What Technically Is CSS Padding?

You know the white space between the actual text and a box? That’s called the padding and you can actually customize it to your own liking. Programmers utilize this code because there are some instances that it is a necessity to have space between elements to make it stand out. The good thing with padding is that it is clear so whatever it is on top of, the text will just hover or float above it.

There is no need to add another code to make the padding look different at all. Padding is also measured in pixels, just like margins are for the sites. With CSS padding, you can customize each side of an element and it doesn’t have to be the same in an element. For example, you can have more padding at the top of an element than at the bottom. The following is an example using the padding code:

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

 

Because of the use of the paddings, the text is now able to stand out and even appears to hover above.

Will Adding Paddings Be More Confusing To Program?

Adding the paddings to a website will take just a few more minutes of your time. The more you get accustomed to using the codes for paddings; the more efficient you will get at adding the codes to customize your site.

How Can Paddings Help My Website Stand Out?

When you add paddings around your elements such as your text or images, they will always appear to be floating which is already a visual treat for tired eyes. Do not overdo this as well because you have to place the padded elements in your site very carefully so that it will look professional and not a classroom assignment on paddings.

The Wonderful Things You Can Do When You Know CSS3 3D Transforms

When you make a website, the program you use can be graphical or it can be manually done via an editor. Having it done graphically might be better if you are not familiar with a lot of codes to use but bottom line, the program will still convert it to text based in its internal engine. Now, when you make a program using CSS3 language, you will be able to customize every single detail you want because codes are very precise. One way you can customize your website is by having CSS3 3D transforms

What Are CSS3 Transforms Anyway?

The good thing with having your website look your way is that it will be more personal to you. It will mean more to you in the long run. That is why CSS3 3D transforms will be perfect if you add them in your website. Ask your programmer to add some jazzed up elements such as boxes and text so that it will look really polished in your site. These transform codes will definitely help your website have a more professional look. These CSS3 3D transforms allow each element to rotate on each axis either thru its Y or X axis.

What Are The Codes Needed To Have This Look In The Site

The following example has the syntax you need to input in order for your element to rotate. This example is of an element rotating on its X axis.

div

{

transform: rotateX(120deg);

-webkit-transform: rotateX(120deg); /* Safari and Chrome */

-moz-transform: rotateX(120deg); /* Firefox */

}

 

You can customize the values to your liking to get to the look that you want your element to have in your website. Just make sure that you strictly follow the codes so that you will not have a hard time in making your site.

Learning More About CSS 3D Transforms

Some people really take these transforms seriously and have even spent a few months perfecting values so that their website looks very different and unique. You too can do this and there are a lot of resources online and in books that will help you learn more about this wonderful language of programming. You can also join forums and watch videos online that show other ways you can rotate on a Y axis as well. Take down notes and bookmark sites that you know will help you tremendously as you go about perfecting your craft in this industry. Remember that if you are not sure about some syntax and find some errors in your editor, approach a close friend or a professional that will happily help you out.

A Few Tricks And Tips About CSS3 2D Transforms You Should Know About

In the world of computing, programmers always have an edge from anyone else because they can grasp knowledge better and understand the language faster. But, it doesn’t mean that everyone else will not be able to understand how to program codes into the computer. Even you can learn this computer language and become an expert if you just find time to learn more about it. Once you have the basic info in, you can then start to learn more about customizing your site such as its text and even the CSS3 2D transforms. When you are able to customize your site, it will be more polished and more professional looking.

What Are CSS3 2D Transforms In The First Place?

Ever wondered how some websites looked really jazzy and professional with obscure looking boxes and even such a wide array of shapes strewn around the page? Those are the works of CSS3 2D transforms. The codes you input into these editors will make your shapes look very unique, indeed. Any element that you add these codes into will have the ability to make them bend, turn, change askew, and even change shape. Example:

div

{

transform: translate(50px,100px);

-ms-transform: translate(50px,100px); /* IE 9 */

-webkit-transform: translate(50px,100px); /* Safari and Chrome */

-o-transform: translate(50px,100px); /* Opera */

-moz-transform: translate(50px,100px); /* Firefox */

}

 

The example above is what you input if you want your element to rotate to a certain degree. This is especially useful if you want to turn squares and rectangles into diamonds without much trouble. Or you can also add text inside and make announcement notices. The possibilities are endless with this rotate option alone.

Other Options For CSS3 2D Transforms

Remember that with CSS3 2D transformations there are so many options available and many properties that you can change. Just make sure you study up on each one before applying it to your specific element so that you know exactly how it will look on your website. The above code is just one example of one of the many types of ways you can customize a certain element.

Learning More About CSS3

In this world of programming, there are no more boundaries. The ideas that come from your mind can now be transformed into reality because there are so many customizable options you can do to each element. Take some time to study each one and learn to appreciate this language so that sooner or later you will be able to perfect the art of computer programming for websites.