I am using Twitter Bootstrap via cdn and I need to change a little bit the column height of a table but I am not sure how to do it. I am using cdn so I don't have the downloaded bootstrap.css file. I tried to overwrite the class table-striped and change it's default styling but no luck.
Is it possible to do it with cdn?
Thanks.
You, obviously, can't change the existing CSS file.
You need to load another CSS file and write a new rule-set to replace the rules in the existing one.
The trickiest part of this will be making sure that the selector you use is specific enough so that it overwrites the earlier rules.
You can file the exact selector used to apply the rules you want to change using the Inspector built into the developer tools in your browser. Inspect the element and look at the styles.
You can copy/paste the selector directly. That way your selector will be equally specific and, because your stylesheet is loaded after the Bootstrap one, will replace any rules that set the same property.
Related
I have this footer and a logo that works fine without bootstrap, but bootstrap is just messing it up. I can't find whats wrong, because I don't know what bootstrap applied to the element. I know I can overwrite it, but I need to know what to overwrite. Is there any way of showing the styling bootstrap applied to the element or just disable all bootstrap styling for that element, not knowing what it is? Also, I need the bootstrap for the rest of the site, so I can't remove the link.
You have the override the governing style rule. Follow these simple ways, you can use Google Chrome to find out the inherited styles:
Open the URL in the browser.
Right click and select inspect on the Inspect.
On the right side, click on the computed.
You will be able to see from where it's inherited.
In the above example, check out the font-size and font-weight. There are so many inherits. Hope this was helpful.
CSS is hierarchical, meaning the styles from the firstly included CSS file gets overwritten with a secondly included file, if both have definitions for the same tag/class/id.
Add bootstrap as the first include CSS in your head of the document and then include your custom CSS files.
This should solve most clashing CSS styles automatically.
I'm new to web design and I'm realizing that it's possible to use the html just for the page structure and the css for the page design. Is it ok to use inline commands like style="display: block" or style="background-image: url(image.com), in the html file? Or is it considered a bad practice?
Using CSS within a <style> tag or importing in from a .css file provides all of your selectors with a specificity range that will be overridden by any CSS provided through the style attribute.
As a general rule you want to try to keep as much CSS as possible within your .css files or <style> tags.
I try to keep over 90% of all CSS in files and I only put css into the style attribute when I am changing specific values that are difficult to code in a CSS file. Like rotation angle, top and left positions of things that are drug around the screen, etc.
It's best to insert css in the css file, because as a developer, you'll have a lot of code in your html file and if you add inline css then it could get messy. Adding css in the css file is easier to read and easier to edit.
Keeping all your css inside a .css file will give you much cleaner html file and enable you to make changes to your styling much easier as everything is in one place.
There will be times where it is much easier to add an inline style attribute to an element but even this can be avoided with couple extra lines of code on the css side to make your html look as clean as possible.
I think that anyway that helps you achieve your style goal is ok to use as long as it works for you.
That said, I usually try to keep all the styles that affect the site in general in a .css file and link it in globally to the site pages.
In some cases, there may be a page or two that need styles that are not needed by the rest of the site, therefore I add the <style> tag with the style rules in those few pages.
When an inline element in the html needs a special distinction using a style not defined in the locations mentioned above, I added it there inline with the style attribute. In these cases I have to make a note that, those elements will not change when the other css changes throughout the site.
Of course there are other things like the !important directive, etc, that can affect or override the inline style.
As mention by others in this post, there are other considerations to take into account, on where to place your css for individual reasons deemed by the designer.
Been trying to find a good inline tool and http://premailer.dialect.ca/ is the best I’ve found, but I believe it may not support styling (not certain). It could also be an issue with the pseudo classes “first-child”, “nth-child”, etc.
It may also have something to do with the table style “table-layout” however I do not know how to get around this. I’ve tried all the values found on MDN, but my styles are still not showing up when converted.
Been working at this for a while with little progress. I could always go back and change my CSS to not use pseudo classes, but hoping there’s another option. Let me know if there are any better tools out there for converting to inline CSS.
Using SCSS and importing all scss files into a single all.scss file.
References:
What tools to automatically inline CSS style to create email HTML code?
styling tr or td in emails?
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Closing off this question as it seems it is not the appropriate area to discuss email inlining tools.
I am trying to create a website on Squarespace and am having trouble selecting elements on my HTML page to use in the custom css. When I use the inspect element on my browser, the ID's for some elements change while others are constant.
I am running the developer mode and downloaded the code to my local machine via github.
In the downloaded site.region file I found the div element which contains the content I am trying to style:
<div id="content" class="main-content" data-content-field="main-content" data-collection-id="{collection.id}" {.equal? collection.typeName "gallery"}{.or}{.equal? collection.typeName "index"}{.or}data-edit-main-image="Banner"{.end}{.end}>
{squarespace.main-content}
</div>
Where is {squarespace.main-content} coming from and how do I select elements inside of it to style?
Regarding some IDs changing and some staying constant, indeed, this is the case. See this answer for more information on this. In summary:
...any ID starting with "yui" can/will change on page
refresh...however...block IDs (ID's starting with "block-" do not
change as long as the block is not removed...
Regarding where the {squarespace.main-content} coming from, that is a JSON-T tag that tells the server to load the content as entered within the content management system (a.k.a. "Layout Engine") for that page. Wherever that tag is, the content from Layout Engine for that page will be loaded.
Finally, regarding how to select the elements within the main-content for styling with CSS, you are on the right track. Inspect the elements as you are doing. If you want to target a specific block, look for ID's starting with block- and target those. Or find other ways to target the element, such as :first-child or nth-child selectors. Then enter your CSS in the CSS Editor or, if you're using Developer Mode (as you indicated that you are), then add the rules to your base.less file (or other CSS files as the case may be) and then update your template using Git or SFTP.
One last note that you do not need to use Developer Mode to target elements with CSS. You can simply target the right elements as mentioned then enter the rules in the CSS editor as mentioned, so there may be no need for the added complexity of Developer Mode at all.
In squarespace do this:
Turn ON the developer option ( to edit JS it is mandatory at least, not sure about CSS),
go to DESIGN »» CUSTOM CSS
add/change whatever you like there, you should style classes or css selector like nth-child/nth-of-type instead of those dynamic ID's.
You can see more info here:
Adding custom HTML, CSS, and JavaScript
Using the CSS Editor
I have a bunch of css classes with respective css properties which I am using for my web page. My question is, can I change the css properties of those classes as those classes are being used in other web forms as well?Does it affect all the other forms if I change any css proeprty in any of the css class?
Thanks!
Changing the css in an external css file will most likely change the forms on the other pages, too, provided they are linked to that css file and are using that same class to get their stylings.
That’s sort of the idea behind it, where normally people want to make changes “across the board” by changing the CSS sheet only. I wasn’t sure from your comment if this was desirable or not in your case.
Did you want to change just one form, without affecting the others?