20 CSS practical suggestions for beginners

English Original: 20-useful-css-tips-for-beginners, compilation: Yang Lixin

In the past, even a mirror site, we rely on a large number of developers and programmers to maintain. Thanks to CSS and its flexibility, styles can be detached from the code independently, making it easy for beginners with basic CSS theory to easily change the style of the site.

Whether you are interested in using CSS to build a station or just take it to make your blog more feel, lay a good foundation in order to build a high-rise. Let's take a look at some useful CSS basics for beginners:

1. Using Reset.css

Firefox and IE, the two different browsers, in the drawing of CSS style method is very different. In this case, resetting all the basic styles with RESET.CSS will allow you to get a completely new empty style sheet.

Here are some common reset.css frameworks-Yahoo reset CSS,Eric Meyer's CSS reset and Tripoli.

2. CSS Abbreviations

CSS abbreviations Simplify your CSS code, and more importantly, it makes your code cleaner and easier to understand.

Not creating CSS like this

1234567

.header {    background-color : #fff    background-image : url    background-repeat : no-repeat    background-position : top left  }

Instead, create a CSS like this

123	.header {  background: #fffurl(image.gif) no-repeat top left}

3. Understanding Class and ID

These two selectors are always confusing for beginners. In CSS, the class and ID are used in the points "." And the pound sign "#" to identify. In simple terms, the ID is used to identify those styles that are not duplicated individually, and the class can be reused.

4. Practical <li>

<li> is also called a list of links that works well when paired with <ol> or <ul>, especially in the navigation menu style.

5, less use <table> multi-use <div>

One of the biggest advantages of CSS is the flexibility to use <div> to achieve style. Content that differs from <table>,<div> is not locked in cell <td>. It can be said that almost all table layouts can be done with the correct use of <div> and styles. Of course, there is a lot of table content, still use <table> bar.

6. CSS Debugging Tools

When designing CSS, it is helpful to have a preview of the page layout to optimize CSS styling and error correction. Here are some free CSS debugging tools to recommend to you, you can install it on the browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, Firebug

7. Avoid unnecessary selectors

Sometimes your CSS declaration can be simpler, especially if you find your code similar to the following:

1	ul li { ... }

1	ol li { ... }

1	table tr td { ... }

They can be simplified to:

1	li { ... }

1	td { ... }

This is because <li> will only be used with <ul> or <ol>, as <td> can only be found in <tr> and <table>, and there is really no need to repeat them once.

8,! Important

All styles marked with!important, even if it is later rewritten, will only be used by the browser.

1234	.page {  background-color:blue!important;  background-color:red;}

such as the above example, because margin:0px 0px 20px; padding:0px; font-family: ' Microsoft yahei ', Arial, ' Myriad Pro ', Lato, ' Helvetica Neue ', Helvetica, Arial, Sans-serif; " >9, Image replacement text

This trick is often used to change a text-based

123456

h1 {  text-indent:-9999px;  background:url("title.jpg") no-repeat;  width:100px;  height:50px;}

Explanation: text-indent:-9999px; Use indentation to remove the text and replace it with a picture that specifies a background and a long width.

10, understand the CSS positioning position

The following articles describe CSS positioning position: {...} Understanding and usage.

11. @import vs <link>

There are two ways to externally reference CSS files: @import and <link>

. If you're unsure of which one to use,difference between @import and link can help you choose.

12. CSS Form Design

In CSS, it's very easy to design and develop Web forms. The following articles can teach you how to do:table-less form,formGarden,styling even more form controls, Formee.

13, design inspiration Source

If you're looking for some great CSS-based Web sites to inspire, or just find some good UI, here are a few sites to consider:

3. CSS Remix

4. CSS Reboot

5. CSS Beauty

6. CSS Elite

7. CSS Mania

8. CSS Leak

Enough? Come on, a collection. CSS Galleries

14. CSS Rounded Corners

This article teaches you how to use CSS to make cross-browser rounded borders.

15. Clean Code

If your CSS code is scattered, you'll find them in a mess. It must have been a difficult time to look back. For beginners, the best typography and annotations are appropriate.

Extended Reading

1. Principles for keeping Your Code clean

2. Format CSS Codes Online

16. Typesetting measure: Px Vs Em

When typesetting, how to select the unit of measure px or em? If you feel confused? Here are a few articles that might give you a better understanding of the unit of measure. Units of measurement in CSS,css Font size explained,Using Points, Pixels, Ems, or percentages for CS S Fonts.

Extended Reading

1. Powerful EM in CSS

2. CSS Font-size:em VS. PX VS. PT VS. PERCENT

3. Which font sizing is the best? EM vs PX vs%

4. Px–em–%–pt–keyword

5. Understanding EM Units in CSS

17. CSS Browser compatibility table

We all know that different browsers do not have the same style of CSS rendering. It is useful to have a reference, a chart, or a list to illustrate the compatibility of various browsers with CSS:

CSS Support table: #1, #2, #3, #4.

18. Multi-column layout in CSS

Is it not in the design to encounter the left, middle, and right multi-column problem? The next few articles may help you:

1. In Search of the Holy Grail

2. Faux Columns

3. Top reasons your CSS columns is messed up

4. Litte Boxes (examples)

5. multi-column Layouts Climb out of the Box

6. Absolute Columns

19. Use the Free editor

Dedicated editors are always better than Notepad. Here are a few good recommendations: Simplecss,Notepad + +,a Style css Editor

20. Understanding Media Types

You may encounter media types when you use <link>. Print, projection and screen are sometimes used types. Understanding and proper use of them can make users easy to access.

Extended Reading

1. CSS3 Media Queries

2. CSS and Media Types

3. W3 Media Types

4. CSS Media Types

5. CSS2 Media Types

6. CSS3 Media Queries Template

7. Use EM units to create CSS3 media Queries

8. Media Queries for ipads and Ipones

20 CSS practical suggestions for beginners