Should font size, line height, and font-family be declared to the body before or after the CSS reset?

Let's say I am using the Eric Meyer Reset and I need to apply a style to the body element.

body { font: 100%/1.5 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/ }

Should I place this before or after the reset CSS?

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* Remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* Tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

Answer №1

In the context of not resetting any font properties that are specified within your mentioned font rule, it is inconsequential whether you place it before or after the reset since the reset will not impact those properties.


Revision: Now that I understand the type of reset you are using:

When it comes to the inherit values, the positioning of your font rule relative to the reset does not matter. Therefore, the font-family (

"Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif
) remains consistent in both cases. This also applies to properties with identical values like font-size.

On the other hand, the line-height values differ between the two body rule sets (reset: 1; your rule: 1.5). It is important to choose which value you prefer: If you want it to be 1, then place your rule before the reset; if you prefer 1.5 (which seems likely), then position your rule after the reset.

Answer №2

Like Gumbo mentioned, the placement of your font declaration is crucial in ensuring it functions properly. Eric Meyer's reset approach includes inheriting font properties, making it acceptable to declare them before the reset. However, adhering to architectural principles suggests that once you set properties for an object and then reset them, those properties should no longer be relevant.

It would be wise to make any font declarations after the reset to avoid potential conflicts or unintended consequences down the line. It's easy to forget which styles have been overwritten and accidentally add conflicting styles that will also be reset when they shouldn't be.

In my practice, I always place my custom general styles after the reset for a smoother workflow.

Answer №3

To guarantee the utilization of your CSS rules, it is best to place them after any reset declarations.

Answer №4

When implementing Eric Meyer's reset, don't forget that the font values for body are reset to inherit. This means you will need to include your font declaration after applying the reset.

Answer №5

Before anything else, starting with a reset lays the foundation for your work. By resetting first, you can achieve more stable and consistent results across different browsers - essentially following your usual workflow after the reset.

Cascades follow a pattern from top to bottom, utilizing less-specific selectors before moving on to more specific ones.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Convert a form into plain text utilizing CSS with minimal usage of jQuery or Javascript

I am working on an HTML page which has a form with various tags such as checkboxes, dropdowns, and more. When a button is clicked, I want to display the same form as plain text in a popup using jQuery dialog. Currently, I have managed to show the form in ...

CSS Selector for when a radio button is selected

I'm currently using images in place of radio buttons: <label class="radio-inline thumbs"><input type="radio" id="type_nee" name="type" value="nee" onkeyup="validate()" onclick=" ...

Fixed width blocks automatically adjusting to small containers

When I try to add text to my absolute block inner div, it doesn't expand as expected. I am aware that expanding within a parent container with a specified width, such as <div class="main_wrap"></div>, can be problematic. Unfortunately, I ...

Event delegation will be ineffective when the target element is nested within another element

After receiving a recommendation from my colleagues on Stackoverflow (mplungjan, Michel), I implemented the event delegation pattern for a comment list. It has been working well and I am quite excited about this approach. However, I have encountered an iss ...

Transform the check box into a button with a click feature

I've customized a checkbox to resemble a button, but I'm encountering an issue where the checkbox is only clickable when you click on the text. Is there a way to make the entire button clickable to activate the checkbox? .nft-item-category-lis ...

Styling Challenges with CSS/AngularJS Accordion in Footer

I want to create a page layout as shown below: +---------------------------+ | Auto-fill / v scrollable ^| | || | || | v| +---------------------------+ | Fixed [][][] ...

How can the "Search within page" feature locate words that are divided between different elements?

I need to present text in groups of a specific length while still being able to search for text that spans multiple groups on the page. Additionally, I want to include a character above each group. My current approach is as follows: body { marg ...

Erase blob_over from the Wordpress menu hover effect

I've created a unique style for the Donate button on this website, but I'm struggling to remove the hover effect. Any suggestions on where to start? Website URL: This is my Custom Class CSS: .donate { background:#4A1383; padding:0px 10px 0px 1 ...

Stop the span within the paragraph from breaking onto a new line

I have a situation where I need quote symbols to be placed inside span elements that are children of a p element. Each quote symbol requires slightly different CSS styles, and they must be included in the HTML rather than in the CSS due to backend restrict ...

The dimensions of the box are not predetermined by the size of the photo

I'm attempting to develop a photo gallery that emulates the style of (using the Unsplash API -> ) However, the size of the container box does not adjust properly with the photos. https://i.sstatic.net/1PAQF.jpg <div className="imageGrid_ ...

Guide on showing a toast message labeled as "Busy" using Google Docs extension

Whenever I launch Spreadsheet or Doc add-ons from the respective stores, I notice a dynamic progress toast appearing at the bottom of the window: This feature doesn't seem to be present in my own add-ons, leading me to believe that it is not integrat ...

The elements at the bottom of the Google homepage do not stay in place when hovering

I'm facing an issue and seeking guidance on how to make the footer and 'Google in different languages' fixed when hovering over the buttons. I'm attempting to create this on my own without referencing the Google homepage code in Chrome ...

CSS mismatch detected between production and development modes

Currently, I am utilizing the Vuetify framework coupled with custom CSS for a project developed using a webpack template. During development mode, my custom CSS modifications are successfully applied to HTML elements; however, in Production mode, these cha ...

Vue 3 has officially deprecated the use of ::v-deep as a combinator. Going forward, please utilize ::v-deep(<inner-selector>) instead

Recently, an error message has been popping up in Vue 3 regarding the use of ::v-deep. The warning states that using ::v-deep as a combinator is deprecated. Instead, it recommends using ::v-deep(<inner-selector>) Here is an example of the CSS ...

What is the best way to use CSS in ReactJS to insert an image into a specific area or shape?

Currently, I'm working on developing a team picker tool specifically for Overwatch. The layout consists of cards arranged horizontally on a website, all appearing as blank gray placeholders. These cards are positioned using the JSX code snippet shown ...

The background image item in C# Outlook Mail does not repeat as expected when used inline

Hey there, I need to set up an email campaign with data in the mail body and a background image. However, I'm running into issues with the background image repeating. When I try to prevent repetition using background-repeat: no-repeat;, the image does ...

Utilizing Bootstrap 3: Mastering the Implementation of .col Classes with .form-control Classes

In my form, I have utilized the .form-control classes for the form elements. To arrange two inputs side by side, I am applying .col-md-6 on each of these inputs. However, the width generated by .col-md-6 is being overridden by the .form-control class. Is ...

Adjust Navbar Header Color Based on Screen Size

I am completely new to front-end development. I am in the process of building my own responsive website using Bootstrap 3. One issue I am facing is that when I resize my browser window to simulate a phone screen, I want the navigation bar color to change ...

Troubleshooting a problem with a personalized webkit scrollbar in Chrome

Using the CSS property scroll-snap-type: y mandatory; to customize my scrollbar with the following styles: ::-webkit-scrollbar { width: 12px; background: transparent; } ::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.5); -webkit-box-s ...

Remove a div element with Javascript when a button is clicked

I am working on a project where I need to dynamically add and remove divs from a webpage. These divs contain inner divs, and while the functionality to add new divs is working fine for me, I'm facing some issues with removing them. The code snippet b ...