• 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

    • Weekend PC Game Deals: Automation fests, Civilization for free, charity specials, and more by Pulasthi Ariyasinghe Weekend PC Game Deals is where the hottest gaming deals from all over the internet are gathered into one place every week for your consumption. So kick back, relax, and hold on to your wallets. The Epic Games Store unlocked a big strategy game giveaway earlier this week: Civilization VI: Platinum Edition. Coming in from Firaxis Games, the turn-based 4X experience has you starting world-conquering campaigns to explore, expand, exploit, and exterminate everything in your empire's reach. PvP and co-op multiplayer are also options if the various forms of AI prove to be too easy or even too troublesome. The Sid Meier’s Civilization VI: Platinum Edition giveaway is live until July 24, and it comes with two massive expansions as well as six DLC packs with extra scenarios, leaders, and more. Next week, tower defense title Legion TD 2 will become the latest freebie on the Epic Games Store. The Humble Store brought a new bundle for action game fans this weekend, and it's all about the Devil May Cry franchise. The Devil Trigger Collection begins with DmC: Devil May Cry and Devil May Cry HD Collection for $10. If you want to complete the bundle, it will set you back $20, which gets you Devil May Cry 4 Special Edition as well as the most recent entry, Devil May Cry 5, as well as its Vergil DLC. This bundle has two weeks left on its counter before it goes away. Big Deals Most publishers are returning to their usual weekend specials after the massive summer sales, so there are plenty of discounts to go around. There's even a special Make a Wish charity sale running on Steam with some discounted viral hits. With all those and more, here's our hand-picked big deals list for the weekend: Satisfactory – $27.99 on Steam Captain of Industry – $24.49 on Steam No Man's Sky – $23.99 on Steam Persona 5 Royal – $23.99 on Steam No More Room in Hell 2 – $22.49 on Steam FOUNDRY – $20.99 on Steam Banishers: Ghosts of New Eden – $19.99 on Steam SULFUR – $19.99 on Steam Assassin's Creed Mirage – $19.99 on Steam Alan Wake 2 – $19.99 on Epic Store Grand Theft Auto V Enhanced – $19.79 on Steam Norland – $19.49 on Steam Stray – $17.99 on Steam V Rising – $17.49 on Steam Dyson Sphere Program – $15.99 on Steam The Outlast Trials – $15.99 on Steam Warhammer 40,000: Darktide – $15.99 on Steam The Outlast Trials – $15.99 on Steam Red Dead Redemption 2 – $14.99 on Steam Turing Complete – $13.99 on Steam Eden Crafters – $13.99 on Steam Core Keeper – $13.99 on Steam Thank Goodness You're Here! – $12.99 on Steam Opus Magnum – $9.99 on Steam Autonauts – $9.99 on Steam EXAPUNKS – $9.99 on Steam DRAGON BALL XENOVERSE 2 – $9.99 on Steam Superliminal – $9.99 on Steam Heaven's Vault – $9.99 on Steam RAILGRADE – $9.89 on Steam Goat Simulator 3 – $9.89 on Steam Tchia – $9.89 on Steam ACE COMBAT 7: SKIES UNKNOWN – $9.59 on Steam PAYDAY 3 – $8.99 on Steam Assassin's Creed Origins – $8.99 on Steam Viewfinder – $8.74 on Steam Escape Academy – $7.99 on Steam Pit People – $7.99 on Steam Skull and Bones – $7.99 on Steam Immortals Fenyx Rising – $7.99 on Steam Imperator: Rome – $7.59 on Steam SHENZHEN I/O – $7.49 on Steam Tom Clancy’s The Division 2 – $7.49 on Steam Bassmaster Fishing – $7.49 on Steam Let's Build a Zoo – $6.99 on Steam The Forgotten City – $6.24 on Steam Control Ultimate Edition – $5.99 on Steam Bramble: The Mountain King – $5.99 on Steam Assassin’s Creed Rogue – $5.99 on Steam RoboCop: Rogue City – $4.99 on Steam Kingdom Two Crowns – $4.99 on Steam Scott Pilgrim vs. The World: The Game – $4.94 on Steam Castle Crashers – $4.49 on Steam BattleBlock Theater – $4.49 on Steam TOEM: A Photo Adventure – $3.99 on Steam Supraland – $3.99 on Steam Vampire Survivors – $3.99 on Steam Darkwood – $3.74 on Steam Valiant Hearts: The Great War – $3.74 on Steam TIS-100 – $3.49 on Steam PAYDAY 2 – $3.29 on Steam Cake Bash – $2.99 on Steam Ragnarock – $1.99 on Steam Alan Wake – $1.49 on Steam Civilization VI Platinum Edition – $0 on Epic Store DRM-free Specials Lastly, here are some highlights from the DRM-free discounts available on the GOG store this weekend: Age of Wonders 4 - $29.99 on GOG Pathfinder: Wrath of the Righteous - Game of the Year Edition - $19.99 on GOG Tomb Raider IV-VI Remastered - $19.49 on GOG The Thaumaturge - $19.24 on GOG Chained Echoes - $13.74 on GOG Tyranny - Gold Edition - $12.49 on GOG Tomb Raider I-III Remastered Starring Lara Croft - $11.99 on GOG Baldur's Gate: Enhanced Edition - $9.99 on GOG Baldur's Gate II: Enhanced Edition - $9.99 on GOG Neverwinter Nights: Enhanced Edition - $9.99 on GOG Old World - $9.99 on GOG Icewind Dale: Enhanced Edition - $9.99 on GOG Neverwinter Nights: Doom of Icewind Dale - $7.99 on GOG Kingdom Come: Deliverance - $5.99 on GOG Might and Magic 6-pack Limited Edition - $4.99 on GOG Heroes of Might and Magic 3: Complete - $4.99 on GOG Blood Omen: Legacy of Kain - $3.49 on GOG Might and Magic 8: Day of the Destroyer™ - $2.99 on GOG Worms Armageddon - $2.99 on GOG ATOM RPG: Post-apocalyptic indie game - $2.99 on GOG Keep in mind that availability and pricing for some deals could vary depending on the region. That's it for our pick of this weekend's PC game deals, and hopefully, some of you have enough self-restraint not to keep adding to your ever-growing backlogs. As always, there are an enormous number of other deals ready and waiting all over the interwebs, as well as on services you may already subscribe to if you comb through them, so keep your eyes open for those, and have a great weekend.
    • Wild that this was even allowed from the jump
    • Microsoft stops using China-based engineers to support US defense clients by Hamid Ganji Microsoft announced on Friday that its China-based engineers can no longer provide technical support to the US military and other defence clients using the company's cloud services. Frank Shaw, Microsoft's Chief Communications Officer, wrote on X, "In response to concerns raised earlier this week about US-supervised foreign engineers, Microsoft has made changes to our support for US Government customers to assure that no China-based engineering teams are providing technical assistance for DoD Government cloud and related services." The issue came into the spotlight after a report by ProPublica detailed how Microsoft's Azure engineers in China are providing technical support to the US defense clients. Microsoft had apparently told ProPublica that its engineers and contractors complied with US government laws. These China-based engineers are reportedly supervised through so-called "digital escorts" in the US, who are allegedly less technically qualified than the engineers and can not determine whether the Chinese engineers under their supervision pose a cyber threat to the United States. On Friday, Senator Tom Cotton sent a letter to Defense Secretary Pete Hegseth, demanding explanations about how these "digital escorts" are trained to detect threats, as well as the list of contractors that use Chinese personnel. "The US government recognizes that China's cyber capabilities pose one of the most aggressive and dangerous threats to the United States, as evidenced by infiltration of our critical infrastructure, telecommunications networks, and supply chains," Cotton wrote. In a video posted on X, Hegseth said this is "obviously unacceptable" and that he's issuing a two-week review of Pentagon cloud deals to ensure that "China will no longer have any involvement whatsoever in our cloud services, effective immediately." The US Defense Secretary also said the current controversy is due to "A legacy system created over a decade ago, during the Obama administration." Microsoft, Amazon, Google, and Oracle jointly received a $9 billion Department of Defense cloud services contract in 2022.
    • This morning down to 17% after 8 days.
    • Cutcon 4.0 by Razvan Serea Cutcon is a free, open-source desktop app for cutting, converting, and previewing video, audio, and image files. Built with Kotlin and powered by FFmpeg, it's fast, lightweight, and easy to use. Ideal for content creators, editors, and developers, Cutcon supports a wide range of media formats and offers a clean user interface. Originally forked from the Clipper project, it enhances performance and usability while remaining fully cross-platform. Whether trimming videos or converting audio formats, Cutcon streamlines your workflow without compromising quality. Perfect for those seeking a simple yet powerful media processing tool. Cutcon offers three core functions that make working with media files fast and simple: Cut – Remove unwanted sections from video, audio, or image files without re-encoding. Keep only what you need. Convert – Change files from one format to another using FFmpeg. Supports a wide range of formats for video, audio, and images. Preview – Play media directly inside the app before cutting or converting. Quickly verify content without opening another program. Cutcon 4 release notes: This release rebases Cutcon on Clipper v1.20.0 bringing support for Linux and macOS and updating the app branding. Also, there is now only one variant of the app with support for most common media types. New features Add support for Linux operating system (common distros) Add support for macOS operating system (experimental) Add support for playing FLAC audio format Add support for playing Opus audio format Improvements Update app brand (logo, colors) Improve media player to hugely boost its performance Use a fake file for the app initial input source Make theme colors change with animation Update the app error window layout Misc Change log file directory to user home Several improvements in app code Download: Cutcon 4.0 | 89.8 MB (Open Source) View: Cutcon Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Dedicated
      Homeless Vagrant earned a badge
      Dedicated
    • One Month Later
      Coolray5432 earned a badge
      One Month Later
    • Week One Done
      Coolray5432 earned a badge
      Week One Done
    • One Year In
      Jonabomuk earned a badge
      One Year In
    • One Month Later
      Jonabomuk earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      498
    2. 2
      ATLien_0
      223
    3. 3
      Michael Scrip
      196
    4. 4
      Xenon
      161
    5. 5
      +FloatingFatMan
      138
  • Tell a friend

    Love Neowin? Tell a friend!