• 0

"default" CSS code for every project


Question

12 answers to this question

Recommended Posts

  • 0

there's no "default" stylesheet that I use per-se, but what I do is I take the stylesheet of my previous project then blank out everything that doesnt apply, and start from there, saves me time from re-typing the styles that I will use later on. There are a few common styles that could be found in most of my stylesheets:

* {
 margin:0;
 padding:0;
}

This is in EVERY one of my recent stylesheets. Resets all margin and padding back to zero, goes BEFORE all other styles. This saves a LOT of time debugging because it overrides all default margins and paddings of different browsers.

img {
 border:0;
}

Removes all image boarders.

html,body {
 color:#000;
 font:86% Calibri, Tahoma, Verdana, sans-serif;
 text-align:justify;
}

Default body styles. There are other attributes in here that vary depending on the design.

a {}, a:hover {}, h1,h2,h3,h4,h5,h6 {}, p {}

These are usually found in my stylesheets, they define the basic elements' styles. Although the attributes vary depending on design.

  • 0

I use the following:

The font and colouring different depending on the site, but it's always there as a "global" setting.

html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
	margin: 0;
	padding: 0;
}

body {
	font: normal 12px "Calibri", Arial, Helvetica, sans-serif;
	background: #FFFFF;
	color: #00000;
}

ul,li {
	list-style-type: none;
}

hr {
	clear: both;
	visibility: hidden;
}

fieldset, img {
	border: 0;
}

  • 0
  Primexx said:
...

img {
  border:0;
 }

Removes all image boarders(sic).

Strictly an image shouldn't have the border attribute anyway as it is deprecated (as that should be applied by styling), and it is only when it is wrapped by a hyperlink that a border will be applied (to denote its "clickability"), which incidentally aids accessibility, so I always have:

a img { border-style: none; }

at the top of my stylesheets.

I also tend to wrap styles in their relevant media type as a means of stopping older browsers attempting to (incorrectly) render pages using them:

@media all{
/* all mediatype selectors here such as the global no-margin etc. */
}

@media screen{
/* screen selectors here */
}

Other tricks to lock out older browsers include using the @imports rule and using a media attribute in the <link /> / <style></style> tags.

Edited by mrbester
  • 0
  jukeboxhero52 said:
I don't fully follow how it goes against the guidelines of semantics...seems to make sense to me.

k, to elaborate, semantic markup is part of the whole separation of content and style principle that aims to make it both easier for the coder to update websites and also for the reader to better understand what each element actually is (benefits screen readers mostly). It basically means that you should refrain from giving IDs or CLASSes that describe how it looks, but rather what it does. For instance a footer could be cleared, but instead of giving it class="clear" (or id="clear" for that matter) the better way would be to give it id="footer" (assuming there's only 1 footer) and then clear the footer. But what about redundant styles? Well if you have 3 elements that share a style, instead of giving them all the same class, name them according to what they do, like say #content, #navBar, #linkBar (note: leftBar and rightBar are not good either, because "left" and "right" describe how it looks) and then just put #content, #navBar, #linkBar {styles_here;} in the styleheet. Even in my example the word "Bar" suggests a certain look, and even that should be avoided, leaving something like #nav and #links would be sufficient. Yes it's a very tedious principle and very easy to be forgotten or overlooked, I make the same mistakes sometimes too, but at least try to separate the content and style whenever you can, instead of using obvious bad practise like that section suggests.

  • 0

speaking of classes, you can also assign multiple classes to the same element, and then reference them that way (e.g. <span class="alert important"> then do .alert {} and .important {})

The aim is of course, to stop describing how the document looks in HTML, and instead describe what the document means (e.g. you can include a image of a mathematical equation, or insert some real MathML and then it becomes a much richer source of information)

Same thing could be accomplished with SVG and SMIL (e.g. can search google for subtitles in videos or such), anyway, gone way off topic here.

Default styles i try to use are basically setting a set of fonts i like (with a fallback like sans-serif of course), and a background colour, where possible i use the browser defaults

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • That's wonderful. A shame that a few fringe nutjobs will somehow concoct a story to make this something nefarious. I do wish he'd committed to using more of the foundation's funds for scientific/medical research here at home, though. It looks like the U.S. is suddenly poised to become a backwoods nation in research.
    • Scientists explain how water could have actually made Mars the red planet it is today by Sayan Sen For centuries, scientists have wondered why Mars is red. The long-standing theory was that the planet’s rusty color came from hematite, an iron-rich mineral formed in dry conditions. But new research suggests something else might be responsible: ferrihydrite, an iron oxide-hydroxide mineral that forms in wet environments. A study published in Nature Communications by researchers from Brown University and the University of Bern suggests that ferrihydrite (Fe5O8H · nH2O) is the dominant iron-containing mineral in Martian dust. Their findings—based on orbital observations, rover data, and lab experiments—challenge previous ideas about Mars' surface composition. “The fundamental question of why Mars is red has been thought of for hundreds if not thousands of years,” said Adomas Valantinas, a postdoctoral fellow at Brown University. “From our analysis, we believe ferrihydrite is everywhere in the dust and also probably in the rock formations, as well.” Ferrihydrite is formed when iron reacts with oxygen and water. On Earth, it’s commonly found in volcanic rock and ash. Its presence on Mars suggests that the planet was once much wetter, with conditions that could have supported liquid water. This contrasts with hematite, which forms in drier environments. To test their theory, the researchers recreated Martian conditions in a lab. They ground minerals into tiny particles—about 1/100th the width of a human hair—matching the size of real Martian dust. They then studied how light reflected off these particles. The results showed that ferrihydrite remains stable in Mars’ current dry, cold climate, but its structure still holds signs that it formed when the planet had water. “What we know from this study is the evidence points to ferrihydrite forming, and for that to happen there must have been conditions where oxygen and water could react with iron,” Valantinas explained. “Those conditions were very different from today’s dry, cold environment.” To confirm ferrihydrite’s presence, the team studied data from NASA’s Mars Reconnaissance Orbiter and ESA’s Mars Express and Trace Gas Orbiter. They also used spectral readings from rovers like Curiosity, Pathfinder, and Opportunity. Combining all of these sources, they found that the mineral appears widespread on the Martian surface. This discovery challenges previous theories that Mars gradually oxidized in dry conditions. Instead, it suggests that ancient Mars went through a wetter phase before drying out. That shift from a water-rich past to the dry, dusty planet we see today is key to understanding Mars’ climate history—and possibly its ability to support life. “The study is a door-opening opportunity,” said Jack Mustard, senior author of the study. “It gives us a better chance to apply principles of mineral formation and conditions to tap back in time.” While the findings provide strong evidence for ferrihydrite’s role in Mars’ red dust, definitive proof will have to wait until Mars samples—currently being collected by NASA’s Perseverance rover—are brought back to Earth. Scientists hope these samples will confirm the theory and shed more light on the planet’s environmental history. Source: Brown University, University of Bren, Nature | Image via Depositphotos This article was generated with some help from AI and reviewed by an editor. Under Section 107 of the Copyright Act 1976, this material is used for the purpose of news reporting. Fair use is a use permitted by copyright statute that might otherwise be infringing.
    • I would say 98% of people you can't figure out how to install Linux would never attempt to install Windows. It's not news non-tech savvy people can't install an PC OS.
    • Do I really have to tell you that people generally don't make random posts about how Windows is running perfectly for them? Of course you're seeing more posts about people hating Windows, it's just a very loud minority as usual.
    • ...and not really appropriate for most people for desktop usage.
  • Recent Achievements

    • Week One Done
      jrromero17 earned a badge
      Week One Done
    • One Month Later
      jrromero17 earned a badge
      One Month Later
    • Conversation Starter
      johnwin1 earned a badge
      Conversation Starter
    • One Month Later
      Marwin earned a badge
      One Month Later
    • One Year In
      fred8615 earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      237
    2. 2
      snowy owl
      156
    3. 3
      ATLien_0
      142
    4. 4
      +FloatingFatMan
      132
    5. 5
      Xenon
      131
  • Tell a friend

    Love Neowin? Tell a friend!