20 practical CSS skills for beginners

In the past, even an image site was maintained by a large number of developers and programmers. Thanks to CSS and its flexibility, the style can be independently extracted from the Code, so that a beginner with only basic CSS theory can easily change the style of the website.

Whether you are interested in using CSS to build a website or simply using it to make your blog more feel, lay a good foundation to build a tall building. Let's take a look at some practical CSS knowledge for beginners:

1、use reset.css

Firefox and IE are two different browsers that have different CSS style methods. In this case, resetting all the basic styles with reset.css will give you a brand new empty style table.

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

Additional reading

1. Combination of Html5 Reset and Base styles

2. Basic Drupal themes-reset, base, layout, and print

3. Review CSS reset to avoid style resetting

4. Summary of the current comprehensive CSS reset (reset) Method

5. Reset CSS Research (gossip)

6. HTML5 Reset Stylesheet

7. normalize.css

8. Reset restarted

9. CSS Frameworks + CSS Reset: Design From Scratch

10. Quick Tip: Create Your Own Simple Reset.css File

11. NO CSS RESET

Http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/

13. CSS-reset

2. CSS abbreviations

The CSS abbreviation simplifies your CSS code. More importantly, it makes your code more clean and easy to understand.

Do not create CSS like this

1234567

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

Instead, create CSS like this.

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

Additional reading

1. Introduction to CSS Shorthand

2. Useful CSS shorthand properties

3. CSS Shorthand Guide

4. Efficient CSS with shorthand properties

5. Proper CSS Shorthand

6. Understanding CSS Shorthand

7. CSS shorthand reference

8. 5 CSS shorthand tips and how to optimize CSS

9. 6 CSS Shorthand Tricks Every Developer shocould Know

10. Shorthand properties

3. Understand the class and id

These two selectors are always confusing for beginners. In CSS, the Class and ID are identified by the dot "." and. In short, id is used to identify those styles that are not repeated separately, and class can be used repeatedly.

Additional reading

1. Class vs. ID

2. When to use Class, ID

3. Applying Class and ID together

4. The Difference Between ID and Class

5. Multiple Class/ID and Class Selectors

6. When using IDs can be a pain in the class...

4. Practical <li>

<Li> is also called a link list. It is very useful when used properly with <ol> or <ul>, especially for navigation menu styles.

Additional reading

1. Taming Lists

2. Amazing LI

5. Less use <table> more use <div>

One of the biggest advantages of CSS is the use of <div> to Achieve flexible and variable styles. Unlike <table>, the content in <div> is not locked in <td> cells. It can be said that almost all table la s can be completed with the correct use of <div> and style. Of course, when there is a large amount of table content, use <table>.

Additional reading

1. Tables are dead

2. Tables Vs. CSS

3. CSS vs tables

4. Table Layouts vs. Div Layouts: From Hell... Hell?

6. CSS debugging tools

When designing CSS, it is helpful to optimize CSS styles and correct CSS la S. Here are some free CSS debugging tools recommended for you, you can install it on the browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, Firebug

7. Avoid unnecessary Selector

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

1	ul li { ... }

1	ol li { ... }

1	table tr td { ... }

They can be simplified:

1	li { ... }

1	td { ... }

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

8 ,! Important

All attacked! The style marked by important, even if it is later rewritten, the browser will only use the marked one.

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

For example, in the above example, the background-color: blue is marked! Important, even if the background is changed to red, only the marked statement is used .! Important is used to force a style to avoid being modified in subsequent encoding. Unfortunately, IE does not support it.

Additional reading

1 .! Important CSS Declarations: How and When to Use Them

2. When Using! Important is The Right Choice

3. Everything You Need to Know About! Important CSS Declarations

4. UNDERSTANDING CSS SPECIFICITY

9. Image substitution text

This scheme is often used to replace a text-based

123456

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

Description: text-indent:-9999px; Removes the text with indentation and replaces it with an image with a specified background and length and width.

Additional reading

1. 10 methods for replacing text CSS with images

2. CSS hiding technology with better availability (CSS image replacement text)

3. Nine Techniques for CSS Image Replacement

4. Using background-image to replace text

5. Dynamic Text Replacement

10. Understand the position of CSS

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

Additional reading

1. display the position of CSS in ten steps

2. CSS Positioning 101

3. Using Absolute Positioning in CSS

4. Detailed Positioning

5. An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning

6. Absolute, Relative, Fixed Positioning: How Do They Differ?

11. @ import vs <link>

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

. If you are not sure which one to use, you can choose Difference Between @ import and link.

Additional reading

1. Weird @ import

2. High-Performance Website Design: Do not use @ import

3. What's the Best Way to Add CSS to a Web Page?

4. Four methods of adding CSS to HTML

12. CSS form design

In CSS, it is very easy to design and develop web tables. The following articles teach you how to do this: Table-less form, Form Garden, Styling even more form controls, and formee.

13. design inspiration sources

If you are looking for some outstanding CSS-based websites to inspire, or just looking for some good UIS, we recommend several websites:

1. Download 20 PSD design websites for free

2. 16 + excellent foreign UI design resource library

3. CSS Remix

4. CSS Reboot

5. CSS Beauty

6. CSS Elite

7. CSS Mania

8. CSS Leak

Not enough? Here is a collection of 74 CSS Galleries

14. CSS rounded corners

This article teaches you how to use CSS to create cross-browser rounded border.

15. Keep code clean and tidy

If your CSS code is scattered, you will find them messy after editing. It must also be difficult to review. For beginners, it is best to have proper typographical specifications and annotations.

Additional reading

1. 12 Principles For Keeping Your Code Clean

2. Format CSS Codes Online

16. Typographical measurement: Px Vs Em

During formatting, how do I select the measurement unit px or em? If you are confused? The following articles may help you better understand the measurement unit. Units of Measurement in CSS, CSS Font size explained, Using Points, Pixels, EMS, or Percentages for CSS Fonts.

Additional reading

1. Powerful EM in CSS

2. css font-SIZE: em vs. px vs. pt vs. PERCENT

3. Which font sizing is 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 have different CSS rendering methods. A reference, chart, or list can be used to demonstrate the compatibility of various browsers with CSS:

CSS support tables: #1, #2, #3, #4.

18. Multi-column layout in CSS

Is there a problem with multiple columns on the left, middle, and right in the design? The following articles may help you:

1. In Search of the Holy Grail

2. Faux Columns

3. Top reasons your CSS columns are messed up

4. Litte Boxes (examples)

5. Multi-Column Layouts Climb Out of the Box

6. Absolute Columns

19. Use a free editor

The dedicated editor is always better than notepad. Here are A few good recommendations: Simple CSS, Notepad ++, A Style CSS Editor

20. Understand media types

When you use <link>, you may encounter a media type. Print, projection, and screen types are sometimes used. Understanding and using them properly makes it easy for users to access.

Additional 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 the em unit to create Media Queries for CSS3

8. iPads and iPones Media Queries

Translator's sign language: the first time the front-end technology blog post was translated, the whole translation was carried out according to the original line, and a personal understanding of the technology was added during the translation process. If there is something wrong with the translation, please contact your colleagues. Thank you!