Yes: @import url(“base.css”); Note: The @import rule must precede all other rules (except @charset). Additional @import statements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents of base.css and special.css into base-special.css and reference only base-special.css.
There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe. Less calls these “Mixins” Instead of /* CSS */ #header { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #footer { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } You could say /* LESS */ … Read more
Use element.classList .contains method: element.classList.contains(class); This works on all current browsers and there are polyfills to support older browsers too. Alternatively, if you work with older browsers and don’t want to use polyfills to fix them, using indexOf is correct, but you have to tweak it a little: function hasClass(element, className) { return (‘ ‘ … Read more
I learned how to do these sort of things reading “PRO HTML and CSS Design Patterns”. The display:block is the default display value for the div, but I like to make it explicit. The container has to be the right type; position attribute is fixed, relative, or absolute. .stretchedToMargin { display: block; position:absolute; height:auto; bottom:0; … Read more
The answer, from this page in CSS: pre { white-space: pre-wrap; /* Since CSS 2.1 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ }
Depending upon the design being produced, each of the below clearfix CSS solutions has its own benefits. The clearfix does have useful applications but it has also been used as a hack. Before you use a clearfix perhaps these modern css solutions can be useful: css flexbox css grid Modern Clearfix Solutions Container with overflow: … Read more
I think you want something like the following. html, body { height: 100%; } body { margin: 0; } .flex-container { height: 100%; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; } .row { width: auto; border: 1px solid blue; } .flex-item { background-color: tomato; padding: 5px; width: 20px; height: 20px; margin: 10px; … Read more
Likely not. Assign position:relative to #container, and then position:absolute; bottom:0; to #copyright. #container { position: relative; } #copyright { position: absolute; bottom: 0; } <div id=”container”> <!– Other elements here –> <div id=”copyright”> Copyright Foo web designs </div> </div>
I think you should use border-color instead of color, if your intention is to change the color of the line produced by <hr> tag. Although, it has been pointed in comments that, if you change the size of your line, border will still be as wide as you specified in styles, and line will be … Read more
A more flex approach would be to use an auto left margin (flex items treat auto margins a bit differently than when used in a block formatting context). .c { margin-left: auto; } Updated fiddle: .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; … Read more