Center div horizontally and vertically with float and clear

Researching how to center a div, I found this very interesting post on CSS for lunch .

In the example, is used a div with the id "container", this is the element that will center on the page. Observe the following HTML markup:

  A
 2
 3
 4
 5
 6
 7
 8
 9
 10

  <div id="distance"> </ div>
 <div id="container">

     <h1> Center div horizontally and vertically with float and clear - crossbrowser </ h1>
     <p>
         This box is in the middle of the browser in relation to your viewpoint. <br />
         The content does not disappear when the viewpoint is resized and is smaller than the box.
     </ P>

 </ Div> 

Read more ...

Tags: css

Using any source (including yours) on your site

Many times we received one curvy layout and fonts and fancy far beyond the scope of the standard web fonts and then think, "Wow, how do we build this?! Will I have to create an image for each title that possess this blessed source? "

Hence Emanuel person showed me a very interesting solution in site Font Squirrel . Besides having several sources it still gives you the option of sending its own source and adapt to work on any site.

Read more ...

Tags: browser , css

Visual gains with CSS3

Chris Coyier, web designer who maintains the blog CSS-Tricks , wrote on his Twitter profile that "CSS is like chess. You can learn the basics in a day, and spend a lifetime specializing. " In fact, CSS is the language easier to learn, having a very simple syntax. But creating well-designed page layouts using CSS, and know all their tricks, it takes time and experience.

The proper way to develop Web pages for the structure is divided into three layers: content (HTML), behavior (JavaScript) and presentation (CSS). CSS working in a layer separate from the rest of the structure, can better visual consistency, since the layout of all the pages will be based on a similar style sheet. We also gain time and ease when making a visual redesign or maintenance, because changing a single file will have an impact throughout the site. With CSS in a separate file, we can also provide greater accessibility to create specific style sheets to different devices such as speech synthesizers and sound devices and braille printers, phones and other mobile devices, etc.. The loading of the pages will also be faster, since after the first access to the site, the CSS file is loaded into cache.

A good example of how CSS can be powerful when used well is the CSS Zen Garden . The site provides a template HTML page to download, and many designers create style sheets for that page. The result can be seen in the gallery: only changing the stylesheet, different layouts are applied in the same HTML page.

Read more ...

Tags: css3

All (or almost everything) you need to know to START with CSS

I decided to revive this post taken from my old blog and put it here. It's always good to have a guide every time you forget something in the official style sheets.

So let's get to work!

Style sheets can be linked to a document in three ways:

1. Linked or imported;
2. Incorporated;
3. Inline.

External style sheet

A style sheet is said to be external, when CSS rules are declared in a document that part of the HTML document. The stylesheet is a separate file and html file has the extension. Css

An external style sheet is ideal to be applied to multiple pages. With an external style sheet, you can change the appearance of an entire site by changing just one file (the file of the style sheet).

The css file from the external style sheet should be LINKED or imported HTML document inside the <> tag of the document. The general syntax for lincar a style sheet called estilo.css is shown below:

Read more ...

Tags: css