Member Avatar for larry29936

I have some inline css that I'd like to add to an existing styles.css file but have no idea what the format needs to be. Here's what the inline css looks like:

<style>
      .container {
        display: flex;
        max-width: 1350px;
        margin-right: auto; 
        margin-left: auto; 
        padding-top: .3rem;
        padding-bottom: 1.5rem;
      }

      .divL {
        box-sizing: border-box;
        padding: 5px; 
        border-right: solid 1px #000000;
        border-left: solid 1px #000000;
        background: #eaeaea;
        width: 50% ;
        }

    .divR {
        box-sizing: border-box;
        padding: 5px; 
        border-right: solid 1px #000000;
        border-left: solid 1px #000000;
        background: #eaeaea;
        width: 50% ;
       }

     .divR h1 {
        font-size:24px;
        font-weight:bold;
        margin-bottom:8px;
        border-bottom:solid 1px #000000;
        padding-bottom:10px;
        text-align: center;
    }
     .divR h2 {
        font-size:18px;
        font-weight:bold;
        margin-bottom:4px;
        padding-bottom:5px;
        text-align: center;
    }
     .divR h4 {
        font-size:16px;
        font-weight:normal;
        margin-bottom:4px;
        padding-bottom:5px;
        text-align:left;
    }
     .divL h1 {
        font-size:24px;
        font-weight:bold;
        margin-bottom:8px;
        border-bottom:solid 1px #000000;
        padding-bottom:10px;
        text-align: center;
    }
     .divL h2 {
        font-size:18px;
        font-weight:bold;
        margin-bottom:4px;
        padding-bottom:5px;
        text-align: center;
    }
     .divL h4 {
        font-size:16px;
        font-weight:normal;
        margin-bottom:4px;
        padding-bottom:5px;
        text-align: left;
    }
     .p {
        font-size:16px;
        color:#000000;
        font-weight:normal;
        margin-bottom:8px;
        padding-bottom:10px;
    }
     .h1 {
        font-size:24px;
        font-weight:bold;
        margin-bottom:4px;
        border-bottom:solid 3px #000000;
        padding-bottom:5px;
        text-align: center;
    } 
</style>

How do I merge it into the pre-existing styles.css?

Edited by larry29936
  • 2 Contributors
  • 4 Replies
  • 287 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Quick clarifications and practical steps that build on 's point about cascade and on 's markup.

The rules shown live in an internal stylesheet (inside a style element). Move the rule blocks into the external file and keep the HTML linking that stylesheet. Example link to put in the document head:

<link rel="stylesheet" href="styles.css">

Keep the stylesheet organized. Mark each section with a comment so the file is easy to scan:

/* ===== Download / stylized section ===== */

When similar selectors share most properties, group them to avoid repetition and make maintenance easier. For example, two column classes that share box model and background can be combined:

.col-left, .col-right {
  box-sizing: border-box;
  padding: 5px;
  background: #eaeaea;
}

Remember how the cascade works (as pointed out): specificity and order decide which rule applies. Inline style attributes trump ID selectors, ID selectors trump class selectors, and later rules win when specificity is equal. Use browser developer tools to inspect the element and see which rule and file/line are active. During testing, force-refresh or append a query string to the href (for example, styles.css?v=2) to bypass cached copies.

A few best practices: avoid class names that mimic element names (use semantic class names instead of names like .p or .h1), keep layout rules separate from typography, and tidy duplicate rules into shared selectors. If a rule still doesn't apply, check for a more specific selector elsewhere in the stylesheet or another stylesheet loaded after this one.

Recommended Answers

All 4 Replies

Member Avatar for larry29936

Another question. How do I identify the section of the styles.css file so that the html file knows how to format a section of the page? In other words, the tag in the html, like ?

Member Avatar for Dani

If you want to copy/paste that and stick it into an external .CSS file, then just remove the opening <style> and the closing <style> tags and put the actual CSS somewhere in the file.

Something to note is that, with CSS, order matters. So, for example, if at the top of the page you say the background color should be blue, and then later on you say it should be red, it will overwrite the blue with red. So if any of the styles are already in the .CSS file, you might want to take care where you copy/paste the above within the file.

I'm not quite sure what you mean about how to identify the section? For example, line 2 of your markup above begins how a container should look. Then, in HTML code, if you have <div class="container">Foo</div> then that div wil be formatted based on how the CSS file says.

Member Avatar for larry29936

my html is formated like so:<div id="download" class="stylized">. I assume that the class="stylized" refers to a section of the css file. Am I wrong? If not, how do I identify the new section of the .css file?

Edited by larry29936
Member Avatar for Dani

If your HTML looks like that, then the part of the CSS file could be:

.stylized
{
    ...
}

I say could be because CSS is inherited, meaning it could also be:

#download { ... }

or

#download.stylized { ... }

or

div { ... }

or, it could reference multiple levels of HTML. For example, take the code:

<div class="foo">
    <div class="bar">
        Baz Bat
    </div>
</div>

If you want to use a selector to stylize the text Baz Bat, it could be done as so:

.foo { ... }
.bar { ... }
.foo .bar { ... }
div { ... }    
etc.

The more narrower you get, the higher precedence the style takes. For example, you can set one color for your entire site, another color for a section, and then a third color just for a sub-section of that section.

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.