Why is CSS so complicated?

Question

I am reading a CSS tutorial, and saw such a definition:

.content div {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;  
    line-height:50px;   
    text-decoration:none;
    text-align:left;
    text-shadow:1px 1px 0px #ffffff;
}

A simple DIV tag needs so much code to style. How to learn all these? Is it really necessary?

No, a simple DIV doesn't need so much code, it depends on your needs. In fact, a simple DIV doesn't need any CSS at all. Your code contains a lot of browser prefixes which are no longer required (for example, the whole `*-border-radius*` can be written simply as `border-radius: 6px`). *How to learn all these* - Read some tutorials, refer to MDN. *Is it really necessary* - As I said earlier, the amount of code depends on what you need. — Harry, Nov 20 '15 at 05:15
what are you complaining about? The CSS not working or its complicated? -webkit and -moz are browser prefixes. — Lucky Chingi, Nov 20 '15 at 05:18
If you asked that on Google and not comment here, you'd get this as the first result: http://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit — Shomz, Nov 20 '15 at 05:26

score 4 · Accepted Answer · answered Nov 20 '15 at 06:10

You don't need to learn everything about css. If you really on to frontend development, you have to learn the basics.

These browser extensions are used for browser compatibility or is used to work smoothly on a browser.

-webkit- is used in chrome, safary and other browser

-moz- is used in mozila

In some blogs and tutorial, they are using some outdated CSS codes. These are used esspecially for the lower version of Internet Explorer and other browser.

Don't worry so much about these codes. Your code will depend on the requirements.

If you are pressured to learn CSS, don't worry, most of us experience that too when we were starting.

Start first on a simple CSS styling. Try to start here first http://www.w3schools.com/. Learning takes time and it's not a medicine that when you drunk, it will take effect emmidiately.

score 1 · Answer 2 · answered Nov 20 '15 at 05:23

Most of them are self-explanatory, especially without the prefixes (webkit, moz, msie...). You should take only style rules you need to modify your div off the default browser styling or, even better, a set of reset rules that make that div look the same across all browsers.

And your code seems outdated since, for example, all this:

-webkit-border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-moz-border-radius-topright:6px;
border-top-right-radius:6px;
-webkit-border-bottom-right-radius:6px;
-moz-border-radius-bottomright:6px;
border-bottom-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
border-bottom-left-radius:6px;

can be substituted and shorthanded to this in all modern browsers:

border-radius:6px;

There are tons of online resources about CSS styles and rules.

Why is CSS so complicated?

2 Answers2