Please comment on the following very simple css stylesheet, especially with regard to what essential elements and tags are missing from it.

body {
    background-color: #00008b;
    font-family: sans-serif;
}

div {
    background-color: #7fffd4;
    color: #00008b;
    padding: 3%;
    margin-bottom: 3%;
    height: 100%;
    width: 94%;
}

.title {
    font-size: 300%;
    text-align: center;
    border-radius: 60%;
}

.textbox {
    font-size: 230%;
    text-align: left;
    border-radius: 3%;
}

.link {
    font-size: 180%;
    text-align: center;
    border-radius: 60%;
}

Recommended Answers

All 2 Replies

Your stylesheet is well built. You have most of the essential things required to make your css function properly. I did however notice a few things (not really issues, just personal preference and life simplifiers) that you might consider.

  1. Look into using position and z-index tags. This will allow you to be specific where you want to place the layers your making.
  2. You might also look into just how large your text is going to be. Setting the sizes that high for your font will take up a decent amount of the page and you won't have any room left for a lot of your useful information. Content is a very large portion of the purpose behind a website and large font takes away from that.

That's just my opinion on the topic at hand. I don't claim to be an expert at css, however, I have found these things to help in the quality of a website and can also make things simpler by decreasing the randomness of the placement of certain page attributes.

  1. I have to disagree with zoidmaster - do not use relative or absolute positioning and z-index unless absolutely necessary, there are easier and less buggy ways to position the content in your pages.

  2. If you are going to use % or ems (but ems is better for font sizes) then you need to set a starting font size in your body (even though most browsers have a default size of 16px it is not the same across all so set your required default font sixze in your body element).

  3. Don't jus tuse 'div' to create styles - make sure that each style you specify has a specific name so you know what it is used for and it doesn't get applied to every div on the page. So looking what you have done, maybe call it .wrapper or .container.

  4. Even though you can probably get away with just border-radius nowadays, it makes sense to still specify it with the moz and webkit prefixes for the time being, just in case:

    -webkit-border-radius: 60%;
    -moz-border-radius: 60%;

  5. Unless you set the text-align to anything other than left in the containing box of a child div in the page then you don't need to specify text-align: left; . Also, try not to repeat yourself (in code this is called DRY Don't Repeat Yourself) - so rather than set text-align: center on two different classes, make a separate class just for aligning text to the center and apply that class (along with the main class) to your HTML element.

Hope this helps

commented: Good points across the board +4
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.