Member Avatar for AycheKay

I'm a manual coder and I don't generally use any CMS or frameworks. I'm looking for some examples and ideas on a base style sheet. To clarify, if you're starting a new project what would your basic, clean stylesheet look like?

I'm just trying to build my own clean stylesheet template that I can use on future projects so I'm looking for ideas from others. Hopefully my question makes sense to you.

  • 4 Contributors
  • 6 Replies
  • 117 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by ndeniche

Dani AI

Generated

OP wanted a small, reusable “starter” stylesheet. Replies from and pointed to resets and frameworks, and sketched the common page containers. Useful additions that often get missed are a mobile-first viewport, a single predictable box model, preserved keyboard focus styles for accessibility, responsive media rules, and a fluid centering approach instead of absolute-positioned wrappers.

A modern minimal base typically does these things: normalize browser defaults, enforce box-sizing: border-box, expose a few CSS custom properties for colors/spacing, set a sensible system font stack with comfortable line-height, provide a .container that uses max-width + margin: 0 auto, make images and media scale with max-width: 100%, and keep focus outlines visible (or restyled accessibly). Keep selector specificity low, favor classes for components, and avoid locking layout sizes with absolute positioning.

Example snippet (safe, reusable foundations):

:root {
  --max-width: 1100px;
  --gutter: 1rem;
  --text: #222;
  --bg: #fff;
  --accent: #0a66c2;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; color: var(--text); background: var(--bg); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }

img, video { max-width: 100%; height: auto; display: block; }

a:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

Keep the base small (a few hundred lines at most), put it under version control, and evolve it project-by-project. For background reading: see MDN on box-sizing (MDN), the viewport meta guidance (), and WCAG basics for accessible defaults (W3C).

Recommended Answers

All 6 Replies

Member Avatar for AycheKay

That looks like a great start for wiping things clean.

Member Avatar for floatingDivs

Something like this is probably what you are looking for...

Member Avatar for ndeniche

I usually code my pages from the begginning, but the structure always remains the same:

- A wrapper,
- A header,
-Logo display
-Navigation bar
- A content wrapper,
-A column based layout
- A footer

Member Avatar for AycheKay

Nichito,

What you listed is some of the information I'm looking for. Maybe if I get my own default stylesheet developed I'll post it here. What I see missing from your list is things like body and h tags.

Member Avatar for ndeniche

Nichito,

What you listed is some of the information I'm looking for. Maybe if I get my own default stylesheet developed I'll post it here. What I see missing from your list is things like body and h tags.

Well, that is because I didn't include it.

The tags are as follows:

body
{
background-color:#ccc;
font-family:Helvetica;
color:#fff;
}

#wrapper
{
width:960px;

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}

#wrapper .header
{
width:100%;
}

#navbar
{
display:inline-block;
}

#content
{
width:100%;
}

#footer
{
width:100%
}

And so on and so on... This is the basic layout, where I specify the main containers of my web page. From here you may apply styles as you wish.

Hope this helps

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.