20 practical CSS suggestions for beginners and 20 practical CSS for beginners

20 practical CSS suggestions for beginners and 20 practical CSS for beginners

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

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.

A few common reset.css frameworks --Yahoo Reset CSS,Eric Meyer's CSS ResetAndTripoli.

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 }

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.

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.

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>.

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, because margin: 0px 0px 20px; padding: 0px; font-family: 'Microsoft yahei',, 'myriad Pro', Lato, 'helvetica Neue ', helvetica, Arial, sans-serif; ">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.

10. Understand the position of CSS

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

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,Difference Between @ import and linkThis article can help you select.

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 controlsAnd 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:

3. CSS Remix

4. CSS Reboot

5. CSS Beauty

6. CSS Elite

7. CSS Mania

8. CSS Leak

Not enough? Come to a collection74 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 table:#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