[26-Feb-2026 00:31:13 America/Chicago] PHP Warning: Use of undefined constant ABSPATH - assumed 'ABSPATH' (this will throw an Error in a future version of PHP) in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [26-Feb-2026 00:31:13 America/Chicago] PHP Warning: require_once(ABSPATHwp-admin/includes/upgrade.php): failed to open stream: No such file or directory in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [26-Feb-2026 00:31:13 America/Chicago] PHP Fatal error: require_once(): Failed opening required 'ABSPATHwp-admin/includes/upgrade.php' (include_path='.:/opt/cpanel/ea-php74/root/usr/share/pear') in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [01-Mar-2026 07:45:51 America/Chicago] PHP Warning: Use of undefined constant ABSPATH - assumed 'ABSPATH' (this will throw an Error in a future version of PHP) in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [01-Mar-2026 07:45:51 America/Chicago] PHP Warning: require_once(ABSPATHwp-admin/includes/upgrade.php): failed to open stream: No such file or directory in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [01-Mar-2026 07:45:51 America/Chicago] PHP Fatal error: require_once(): Failed opening required 'ABSPATHwp-admin/includes/upgrade.php' (include_path='.:/opt/cpanel/ea-php74/root/usr/share/pear') in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [01-Mar-2026 18:48:26 America/Chicago] PHP Warning: Use of undefined constant ABSPATH - assumed 'ABSPATH' (this will throw an Error in a future version of PHP) in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [01-Mar-2026 18:48:26 America/Chicago] PHP Warning: require_once(ABSPATHwp-admin/includes/upgrade.php): failed to open stream: No such file or directory in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [01-Mar-2026 18:48:26 America/Chicago] PHP Fatal error: require_once(): Failed opening required 'ABSPATHwp-admin/includes/upgrade.php' (include_path='.:/opt/cpanel/ea-php74/root/usr/share/pear') in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [06-Mar-2026 13:14:53 America/Chicago] PHP Warning: Use of undefined constant ABSPATH - assumed 'ABSPATH' (this will throw an Error in a future version of PHP) in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [06-Mar-2026 13:14:53 America/Chicago] PHP Warning: require_once(ABSPATHwp-admin/includes/upgrade.php): failed to open stream: No such file or directory in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [06-Mar-2026 13:14:53 America/Chicago] PHP Fatal error: require_once(): Failed opening required 'ABSPATHwp-admin/includes/upgrade.php' (include_path='.:/opt/cpanel/ea-php74/root/usr/share/pear') in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [08-Mar-2026 11:47:41 America/Chicago] PHP Warning: Use of undefined constant ABSPATH - assumed 'ABSPATH' (this will throw an Error in a future version of PHP) in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [08-Mar-2026 11:47:41 America/Chicago] PHP Warning: require_once(ABSPATHwp-admin/includes/upgrade.php): failed to open stream: No such file or directory in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [08-Mar-2026 11:47:41 America/Chicago] PHP Fatal error: require_once(): Failed opening required 'ABSPATHwp-admin/includes/upgrade.php' (include_path='.:/opt/cpanel/ea-php74/root/usr/share/pear') in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [20-Mar-2026 17:37:48 America/Chicago] PHP Warning: Use of undefined constant ABSPATH - assumed 'ABSPATH' (this will throw an Error in a future version of PHP) in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [20-Mar-2026 17:37:48 America/Chicago] PHP Warning: require_once(ABSPATHwp-admin/includes/upgrade.php): failed to open stream: No such file or directory in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [20-Mar-2026 17:37:48 America/Chicago] PHP Fatal error: require_once(): Failed opening required 'ABSPATHwp-admin/includes/upgrade.php' (include_path='.:/opt/cpanel/ea-php74/root/usr/share/pear') in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [20-Mar-2026 17:37:53 America/Chicago] PHP Warning: Use of undefined constant ABSPATH - assumed 'ABSPATH' (this will throw an Error in a future version of PHP) in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [20-Mar-2026 17:37:53 America/Chicago] PHP Warning: require_once(ABSPATHwp-admin/includes/upgrade.php): failed to open stream: No such file or directory in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [20-Mar-2026 17:37:53 America/Chicago] PHP Fatal error: require_once(): Failed opening required 'ABSPATHwp-admin/includes/upgrade.php' (include_path='.:/opt/cpanel/ea-php74/root/usr/share/pear') in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [27-Mar-2026 14:07:52 America/Chicago] PHP Warning: Use of undefined constant ABSPATH - assumed 'ABSPATH' (this will throw an Error in a future version of PHP) in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [27-Mar-2026 14:07:52 America/Chicago] PHP Warning: require_once(ABSPATHwp-admin/includes/upgrade.php): failed to open stream: No such file or directory in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [27-Mar-2026 14:07:52 America/Chicago] PHP Fatal error: require_once(): Failed opening required 'ABSPATHwp-admin/includes/upgrade.php' (include_path='.:/opt/cpanel/ea-php74/root/usr/share/pear') in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [29-Mar-2026 10:21:48 America/Chicago] PHP Warning: Use of undefined constant ABSPATH - assumed 'ABSPATH' (this will throw an Error in a future version of PHP) in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [29-Mar-2026 10:21:48 America/Chicago] PHP Warning: require_once(ABSPATHwp-admin/includes/upgrade.php): failed to open stream: No such file or directory in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 [29-Mar-2026 10:21:48 America/Chicago] PHP Fatal error: require_once(): Failed opening required 'ABSPATHwp-admin/includes/upgrade.php' (include_path='.:/opt/cpanel/ea-php74/root/usr/share/pear') in /home/touchmob/crazyleafdesign.com/blog/wp-content/plugins/thrive-visual-editor/thrive-dashboard/inc/app-notification/classes/DbMigration.php on line 2 {"id":20007,"date":"2015-08-13T23:18:03","date_gmt":"2015-08-13T15:18:03","guid":{"rendered":"https:\/\/crazyleafdesign.com\/blog\/?p=20007"},"modified":"2016-11-13T17:11:25","modified_gmt":"2016-11-13T09:11:25","slug":"20-awesome-must-try-css-tips-for-beginners","status":"publish","type":"post","link":"https:\/\/www.crazyleafdesign.com\/blog\/20-awesome-must-try-css-tips-for-beginners\/","title":{"rendered":"20 Awesome Must Try CSS Tips for Beginners"},"content":{"rendered":"
Since the inception of the internet, CSS and HTML have been tied together in a conjugal bond. While HTML is possibly an easy\u00a0markup language to learn, CSS can be quite a challenge.<\/p>\n
Nevertheless, achieving the gorgeous layout that boasts a clean look and beautiful backend isn\u2019t out of reach. Like any other craft, it requires practice and deep understanding of what’s at hand.<\/p>\n
To give you budding web designers and developers a head start, we\u2019ve compiled 20 of the most essential<\/strong> CSS tips and best practices that you can try to achieve a fabulous front-end.<\/p>\n Once you have mastered CSS take a look at our beginner ideas for photosho<\/a>p!<\/p>\n Let\u2019s get started!<\/p>\n Use a single CSS file for the entire project. This makes editing and updating easy. If you must use several style-sheets, be sure that they utilize only implicit properties while inheriting common properties from best level style-sheets.<\/p>\n IDs and Classes are probably the most misused styling components in CSS. The difference between the two is simple – use IDs when you don’t need to repeat your style for over one element and use Classes to style several elements.<\/p>\n IDs and Classes need to be logically named and should correspond to the tags that their styled. This is vital for code organization & debugging.<\/p>\n CSS is complex and the order in which elements need to be styled is very important. The general guideline is to always style top level elements first followed by inner elements. For example, HTML and BODY tags ought to be styled prior to styling encapsulated DIV tags.<\/p>\n Never use center tags to center align elements. This strategy is obsolete. Instead, use style-sheets to center text and areas of the HTML file. This could be done through the margin property & text-align property.<\/p>\n Understanding the CSS box model is important to effectively position your elements. Cascading style sheet box model makes life easy for designers and developers.<\/p>\n The box model is good enough to implement web page positioning, however CSS3 has launched the flex-box model that’s even simpler and easier. It\u2019s the future of CSS.<\/p>\n While HTML enables you to control the position of elements through tables and the use of non-breaking space, you can\u2019t position things precisely. With CSS, you can place an item on a page with exact X and Y coordinates. This is important for any web developer. Understand CSS positioning before you try creating a layout.<\/p>\n The majority of development is now done with CSS3 and HTML5. To have a competitive edge in the field, it crucial to have a solid base of CSS3 principles.<\/p>\n Rather than including x number of style sheet references in each document, only include one and import the rest of the style sheets into one. It\u2019ll be a lot faster while you\u2019re working on a complex task to avoid needless HTTP requests.<\/p>\n Specify media types within the style sheets. Don’t utilize the media feature on link elements or any place in the HTML\u2014but rather specify media types either through @media rules or when importing.<\/p>\n Reset style sheets in general have two disadvantages – unnecessary AND redundant code. Reset style sheets that can’t even be customized will introduce both issues and since the majority of styling differences are simple to spot anyway, it’s generally best not to utilize resets at all.<\/p>\n We all know every browser has different methods for rendering CSS styles. It is best to have a chart for reference, or a list that displays the entire CSS compatibility for each browser.<\/p>\n If your CSS code is not clean, you’re going to wind up coding in confusion and having a tough time referencing the previous code. For beginners, religiously make appropriate indentations for commenting effectively.<\/p>\n There are a ton of browser-based tools tools which can highlight CSS of the web page<\/a> that debug on the fly as you hover over a specific tag. Here are a few good (and free) CSS debugging tools: DOM Inspector<\/a>, FireFox Web Developer<\/a>, Firebug<\/a> & Internet Explorer Developer Toolbar<\/a>.<\/p>\n When possible, try to use Shorthand CSS.\u00a0 It offers a quicker way of writing CSS code and most importantly \u2013 it tends to make the code cleaner thus easier to understand.<\/p>\n It is not hard to use clean and simple text on your pages, rather than letting Internet Explorer and Firefox default to the serif-heavy fonts on Linux and Windows. Try adding this to your primary style sheet:<\/p>\n body<\/p>\n {<\/p>\n font-family: Arial;<\/p>\n font-size: 95%;<\/p>\n }<\/p>\n Arial isn\u2019t great, but it\u2019s not too bad either. By clearly setting a font, you pull yourself away from being a victim of the OS\/browser. It\u2019s especially useful when you don\u2019t have spare laptops lying around for testing purposes.<\/p>\n You can use cascading style sheets on more than just <span> and <div> tags. Ensure that you style every little thing that makes sense in your file. Newbies invest a lot of time attempting to convert their websites to span and divs, when it isn’t necessary. Remember that you can style any tag you have to.<\/p>\n Whenever you style a page, have a plan and structure in mind – <html> and <body> and then the greater elements like <p> and so on. In fact, consider giving all your web pages the style of HTML. Then you have a standard palette to work from.<\/p>\n The web is filled with free resources that\u2019s available if you look for it. Code samples and tutorials are abundant. Each time you come across an amazing web element that\u2019s visually attractive, have a look at the source and CSS using Inspect Element or Firebug<\/a>.<\/p>\n So\u00a0there you have it, 20 awesome CSS web design<\/a> tips<\/strong>. Remember to always plan what you would like to achieve before you start and this will make your life easier. It\u2019ll save time in creating websites and the results will be better for you and the user.<\/p>\n About Navid Tayebi:<\/strong><\/p>\n Navid Tayebi has considerable experience in digital marketing<\/a> and brand development. He is the founder of Creative Over,<\/a> an Orange County web design<\/a> agency, CA that primarily focuses on providing digital marketing solutions to small- and medium-sized businesses. He is a versatile, organized and self-reliant person. His areas of expertise are refinement and development of marketing goals, promotional activities, pricing strategies and branding. You can find Navid on Twitter<\/a>, Linkedin<\/a>, Google +<\/a> and Facebook<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Since the inception of the internet, CSS and HTML have been tied together in a conjugal bond. While HTML is possibly an easy\u00a0markup language to learn, CSS can be quite a challenge. Nevertheless, achieving the gorgeous layout that boasts a clean look and beautiful backend isn\u2019t out of reach. Like any other craft, it requires […] More<\/a><\/p>\n","protected":false},"author":1,"featured_media":20016,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1053],"tags":[1983,990,1980,1982,1055,989,1460,1171,1981,987,1275],"adace-sponsor":[],"class_list":{"0":"post-20007","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-articles","8":"tag-cascading-style-sheets","9":"tag-css-2","10":"tag-developers","11":"tag-div","12":"tag-fonts","13":"tag-html-2","14":"tag-programming-2","15":"tag-resources-2","16":"tag-span","17":"tag-tips","18":"tag-tutorials-2"},"acf":[],"yoast_head":"\n1. Use style-sheet inheritance<\/h4>\n
2. Understand when to use IDs & Classes<\/h4>\n
3. Give logical names to IDs & Classes<\/h4>\n
4. Style top level elements first<\/h4>\n
5. Center elements through style-sheets<\/h4>\n
6. Understand the CSS box model<\/h4>\n
<\/p>\n7. Then shift to the Flex-box model<\/h4>\n
8. Positioning with CSS<\/h4>\n
9. Move to CSS3<\/h4>\n
10. Reference only one style sheet in the markup<\/h4>\n
11. Always specify media types<\/h4>\n
12. Avoid resetting style sheets<\/h4>\n
13. CSS browser compatibility table<\/h4>\n
<\/p>\n14. Keep CSS code clean<\/h4>\n
15. Learn to use Debugging tools<\/h4>\n
16. Use Shorthand CSS<\/h4>\n
17. Typography<\/h4>\n
18. Span and Div tags<\/h4>\n
19. Style the larger elements first<\/h4>\n
20. Practice is key<\/h4>\n