• 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

    • For some reason, Neowin has now pulled this disclaimer pointing out that this survey is utterly useless since it doesn't track the same user data over time (even though Valve has the real information, of course). What it really tracks, without revealing it, is what games are popular each month, who is too busy to answer a dumb survey from month to month, and which cultures (e.g. the Chinese are primarily on expired W10 machines) are gaming in force from wave to wave on whatever game is in vogue at the time. Therefore, these specific surveys, being voluntary and non-consistent, remain nothing but worthless clickbait garbage. They tell us nothing of useful substance regarding actual trends over time.
    • For some reason, Neowin has now pulled this disclaimer pointing out that this survey is utterly useless since it doesn't track the same user data over time (even though Valve has the real information, of course). What it really tracks, without revealing it, is what games are popular each month, who is too busy to answer a dumb survey from month to month, and which cultures (e.g. the Chinese are primarily on expired W10 machines) are gaming in force from wave to wave on whatever game is in vogue at the time. Therefore, these specific surveys, being voluntary and non-consistent, remain nothing but worthless clickbait garbage. They tell us nothing of useful substance regarding actual trends over time.
    • Microsoft will not prevent Windows 11 24H2 or 25H2 or 26H2 from stopping working on those who do not have NPU. This is something very specific to those who want to use Copilot+, only for content creators. Windows 11 works on all hardware released since 2019. It's been 6 years. Any 6-year-old PC has full support for Windows 11. NPU is already standard on mobile phone CPUs and will now be a new standard on PC and notebook CPUs.
    • Elden Ring Nightreign's first update targets solo runs to reduce difficulty by Pulasthi Ariyasinghe FromSoftware released its first multiplayer-centric game last week, letting players jump into a variant of its Elden Ring universe but with friends. The three-player cooperative title, Nightreign, does offer players a separate option to try their luck at beating its levels solo. Following feedback, it seems the studio has realized the mode needs some tweaking. Today, May 2, FromSoftware released patch 1.01.1 to Elden Ring Nightreign, bringing with it changes to the roguelike's balance, as well as more than a few bug fixes. For single-player players exclusively, FromSoftware has added the effect "Automatic Revival Upon Defeat." This will get the player back into the action exactly once for free whenever they are fighting a night boss battle. It should also stack with the reviving item that's already available to find during runs. Moreover, single-player runs will give out more runes when defeating enemies, making the level-up process easier. This is an important change considering that with three players, the squad can split up to farm the level-up currency and clear out camps much faster than when playing alone. Other changes in this patch include higher drops of high-rarity Relics from surviving till Day 3, as well as when purchasing random relics from the Small Jar Bazaar at Roundtable Hold. Some important bug fixes are here too, including camera fixes for Guardian's Ultimate Art, Raider dealing more than intended damage, issues with the climbing up action, and much more. Find the complete changelog for patch 1.01.1 over here. Elden Ring Nightreign had a massive launch last week, going on to sell two million copies of the game at launch. While not as spectacular as the original Elden Ring, we found Nightreign to be a marvelous action game that never lets up on the accelerator. Read the complete review from Neowin here. Elden Ring Nightreign is now available on PC, Xbox One, Xbox Series X|S, PlayStation 4, and PlayStation 5.
    • Just because Windows 10 will stop receiving updates doesn't mean your Windows 10 installed there will stop working. There are people with iPhone 8/9/10 that are still working, even without updates. There are people with Android 8/9/10 that are still working even without receiving any updates for over 5 years. There are people with Windows 7 and 8 that are still working for over 10 years. And most people install Windows and disable updates, so there are still a lot of people running Windows 10 without improvements and security updates for over 10 years.
  • Recent Achievements

    • Week One Done
      Epaminombas earned a badge
      Week One Done
    • Week One Done
      Prestige Podiatry Care earned a badge
      Week One Done
    • Week One Done
      rollconults earned a badge
      Week One Done
    • One Month Later
      lilred1938 earned a badge
      One Month Later
    • Week One Done
      lilred1938 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      140
    2. 2
      Xenon
      132
    3. 3
      ATLien_0
      123
    4. 4
      +Edouard
      103
    5. 5
      snowy owl
      94
  • Tell a friend

    Love Neowin? Tell a friend!