# The Most Useful CSS Tips For Beginners **URL:** \ **Category:** Tutorials & Methods\ **Tags:** tips-tricks\ **Created:** [January 15, 2022, 8:30pm UTC](https://onehack.st/t/the-most-useful-css-tips-for-beginners/212260 "2022-01-15T20:30:27Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![PlayBoy83](https://onehack.st/user_avatar/onehack.st/playboy83/32/164314_2.png) [@PlayBoy83](https://onehack.st/u/PlayBoy83)\ **Post date:** [January 15, 2022, 8:30pm UTC](https://onehack.st/t/the-most-useful-css-tips-for-beginners/212260/1 "2022-01-15T20:30:27Z")
In the old days, we depend a lot on developers and programmers to help update the website, even when it’s just a minor one. Thanks to the CSS and it’s flexibility, styles can be extracted independently away from the codes. Now, with some basic understanding of CSS, even a novice can easily change the style of a website. Whether you are interested in picking up CSS to create your own website, or merely to tweak your blog’s look and feel a little – it’s always good to start with the fundamentals to gain a stronger foundation. Let’s take a look at some **CSS Tips** we thought might be useful for _beginners_. Source: hongkiat) #### Use `reset.css` When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them. `reset.css` resets all fundamental styles, so you starts with a real blank new stylesheets. Here are few commonly used `reset.css` frameworks: - [Yahoo Reset CSS](https://clarle.github.io/yui3/yui/docs/cssreset/) - [Eric Meyer’s CSS Reset](https://gist.github.com/DavidWells/18e73022e723037a50d6) #### Use Shorthand CSS Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code clearner and easier to understand. Instead of creating CSS like this `.header {` ` ` `background-color` `: ` `#fff` `;` ` ` `background-image` `: ` `url` `(image.gif);` ` ` `background-repeat` `: ` `no-repeat` `;` ` ` `background-position` `: ` `top` `left` `; ` ` ` `}` It can be short-handed into the following: `.header {` ` ` `background` `: ` `#fff` `url` `(image.gif) ` `no-repeat` `top` `left` ` ` `}` **More related:** - [Introduction to CSS Shorthand](https://www.sitepoint.com/introduction-css-shorthand/) - [Useful CSS shorthand properties](http://www.javascriptkit.com/dhtmltutors/cssshorthand.shtml) #### Understanding `Class` and `ID` These two selectors often confuse beginners. In CSS, `class` is represented by a dot “.” while `id` is a hash ‘#". In a nutshell `id` is used on style that is unique and don’t repeat itself, `class` on the other side, can be re-use. **More related:** - [Class vs. ID](https://www.htmldog.com/guides/css/intermediate/classid/) - [When to use Class, ID](https://css-tricks.com/the-difference-between-id-and-class/) #### Power of `
  • ` `
  • ` a.k.a link list, is very useful when they are use correctly with `
      ` or `
        `, particulary to style a navigation menu. #### Forget ``, try `
        ` One of the greatest advantage of CSS is the use of `
        ` to achieve total flexibility in terms of styling. `
        ` are unlike `
        ,` where contents are ‘locked’ within a `
        `‘s cell. It’s safe to say most `` layouts are achievable with the use of `
        ` and proper styling, well maybe except massive tabular contents. **More related:** - [Tables are dead](https://alistapart.com/article/practicalcss/) - [Tables Vs. CSS](https://www.sitepoint.com/tables-vs-css/) #### CSS Debugging Tools It’s always good to get instant preview of the layout while tweaking the CSS, it helps understanding and debugging CSS styles better. Here are some free CSS debugging tools you can install on your browser: - [FireFox Web Developer](https://chrispederick.com/work/web-developer/) - [DOM Inspector](https://addons.mozilla.org/en-US/firefox/addon/min-twitter/) - [Firebug](https://getfirebug.com/) ![firebug](https://assets.hongkiat.com/uploads/css_beginners/firebug.jpg) #### Avoid Superfluous Selectors Sometimes your CSS declaration can be simpler, meaning if you find yourself coding the following: `ul li { ... }` `ol li { ... }` `table tr td { ... }` They can be shorten down to just `li { ... }` `td { ... }` **Explanation:** `
      • ` will only exist within `
          ` or `
            ` and `
        • ` and `
        ` will only be inside `
        ` so there’s really not necessary to re-insert them. #### Knowing `!important` Any style marked with `!important` will be taken into use regardlessly if there’s a overwriting rule below it. `.page { ` `background-color` `:` `blue` `!important` `; ` `background-color` `:` `red` `;}` In the example above, `background-color:blue` will be adapted because it’s marked with `!important`, even when there’s a `background-color:red;` below it. `!important` is used in situation where you want to force a style without something overwriting it, however it may not work in Internet Explorer. #### Replace Text with Image This is commonly practice to replace `

        title

        ` from a text based title to an image. Here’s how you do it. `h` `1` `{` ` ` `text-indent` `:` `-9999px` `;` ` ` `background` `:` `url` `(` `"title.jpg"` `) ` `no-repeat` `;` ` ` `width` `:` `100px` `;` ` ` `height` `:` `50px` `;` ` ` `} ` Explanation: `text-indent:-9999px;` throws your text title off screen, replaced by an image declared by `background: {...}` with a fixed `width` and `height`. #### Understand CSS Positioning The following article gives you a clear understanding in using CSS positioning – `position: {...}` **Related:** [**Learn CSS Positioning in Ten Steps**](http://www.barelyfitz.com/screencast/html-training/css/positioning/) #### CSS `@import` vs `` There are 2 ways to call an external CSS file – respectively using `@import` and ``. If you are uncertain which method to use, here’s few articles to help you decide. #### Designing Forms in CSS Web forms can be easily design and customize with CSS. These following articles show you how: **Related:** [**Styling even more form controls**](https://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/) ![design forms css](https://assets.hongkiat.com/uploads/css_beginners/select.jpg) #### Get Inspired If you are looking around for nicely designed CSS-based website for inspiration, or just simply browsing to find some good UI, here are some CSS showcase site we recommend: - [CSS Mania](https://www.cssmania.com/) - [CSS Leak](https://www.cssleak.com/) #### Keep CSS Codes Clean If your CSS codes are messy, you are going to end up coding in confusion and having a hard time refereing the previous code. For starters, you can create proper indentation, comment them properly. **More** – [**12 Principles For Keeping Your Code Clean**](https://www.smashingmagazine.com/2008/11/12-principles-for-keeping-your-code-clean/), [**Format CSS Codes Online**](http://www.lonniebest.com/FormatCSS/) #### Typography Measurement: `px` vs `em` Having problem choosing when to use measurement unit `px` or `em`? These following articles might give you a better understanding on the typography units. #### CSS Browsers Compatibility Table We all know each browser has different ways of rendering CSS styles. It’s good to have a reference, a chart or a list that shows the entire CSS compatibility for each browser. CSS support table: [**#1**](https://www.quirksmode.org/css/contents.html), [**#2**](https://www.w3.org/TR/CSS2/media.html), **[#3](http://www.richinstyle.com/bugs/table.html)** ![css table](https://assets.hongkiat.com/uploads/css_beginners/csstable.jpg) #### Design Multicolumns in CSS Having problem getting the left, middle and right column to align properly? Here are some articles that might help: - [In Search of the Holy Grail](https://alistapart.com/article/holygrail/) - [Faux Column](https://alistapart.com/article/fauxcolumns/) - [Litte Boxes (examples)](https://www.thenoodleincident.com/tutorials/box_lesson/boxes.html) - [Multi-Column Layouts Climb Out of the Box](https://alistapart.com/article/multicolumnlayouts/) - [Absolute Columns](https://24ways.org/2008/absolute-columns) ![multicolumns](https://assets.hongkiat.com/uploads/css_beginners/multicolumns.jpg) #### Get a Free CSS Editors Dedicated editors are always better than a notepad. Here are some we recommend: **More:** - [Simple CSS](https://www.hostm.com/simplecss-download), [Notepad ++](https://notepad-plus-plus.org/) - [A Style CSS Editor](https://wordpress.org/plugins/simple-css/) ![notepad plus](https://assets.hongkiat.com/uploads/css_beginners/notepadplus.jpg) #### Understanding Media Types There are few media types when you declare CSS with ``. print, projection and screen are few of the commonly used types. Understanding and using them in proper ways allow better user accessibility. The following article explains how to deal with CSS Media types. **More:** - [CSS and Media Types](https://www.yourhtmlsource.com/stylesheets/cssmediatypes.html) - [W3 Media Types](https://www.w3.org/TR/CSS2/media.html) - [CSS Media Types](http://www.javascriptkit.com/dhtmltutors/cssmedia.shtml) **Happy learning!** ---
        **Author:** ![RogerM](https://onehack.st/user_avatar/onehack.st/rogerm/32/41761_2.png) [@RogerM](https://onehack.st/u/RogerM)\ **Post date:** [January 16, 2022, 10:45pm UTC](https://onehack.st/t/the-most-useful-css-tips-for-beginners/212260/2 "2022-01-16T22:45:41Z")
        Waooo, just waooo…Thanks for putting this together! ---
        **Author:** ![Jacob](https://onehack.st/user_avatar/onehack.st/jacob/32/106770_2.png) [@Jacob](https://onehack.st/u/Jacob)\ **Post date:** [January 17, 2022, 8:34am UTC](https://onehack.st/t/the-most-useful-css-tips-for-beginners/212260/3 "2022-01-17T08:34:21Z")
        Thanks for sharing! ---
        **Author:** ![ailihphilia](https://onehack.st/user_avatar/onehack.st/ailihphilia/32/104172_2.png) [@ailihphilia](https://onehack.st/u/ailihphilia)\ **Post date:** [January 18, 2022, 8:11am UTC](https://onehack.st/t/the-most-useful-css-tips-for-beginners/212260/4 "2022-01-18T08:11:04Z")
        Thanks a lot!