Member Avatar for Proglearner

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%;
}
  • 3 Contributors
  • 2 Replies
  • 110 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by simplypixie

Dani AI

Generated

Good starting point — compact and readable — but a few practical foundations are missing that make styles predictable, accessible and responsive over time.

A small set of base rules fixes many layout surprises: normalize box-sizing so padding doesn’t change width, reset default margins, use a sensible font stack and line-height, and prefer a centered container with a max-width rather than forcing percentage widths on every block. Using CSS custom properties (variables) makes later theme tweaks trivial.

Example base you can adapt:

:root {
  --page-max: 900px;
  --gap: 1rem;
  --fg: #111;
  --bg: #fff;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg);
}

.container {
  max-width: var(--page-max);
  margin: calc(var(--gap) * 2) auto;
  padding: var(--gap);
  border-radius: 0.5rem;
}

Accessibility and responsiveness notes: include the viewport meta tag in your HTML head (see MDN), prefer rem/clamp() for scalable typography so users who increase text size aren’t broken, and always check color contrast against WCAG criteria before finalising colors (WCAG contrast guidelines). For layout, use Flexbox or Grid rather than absolute positioning for main structure — they are simpler and less brittle.

Building on and : their points about placement and avoiding over-broad div styles are valid. Use semantic elements and class names for components, rely on an autoprefixer tool instead of manual vendor prefixes, and avoid fixed height:100% on content containers unless you understand the containing block — it often causes overflow issues.

Recommended Answers

All 2 Replies

Member Avatar for Dragennd

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.

Member Avatar for simplypixie

  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.