I am working on a css template, which of course helps me to develop a beautiful website. I mean, good to see. Now, I am trying to integrate code from all over the web, such as, for example, a beauatiful contact form that I absolutely want in my website. The problem is that the css of the element conflicts with the css of the website and overwrites many rules.
How can I avoid this?
could you please share the codes or the link of your site and the form? Try to write the css after the main website css. If not solved the problem then try to rewrite the classname alongside with the css. It is quite impossible to solve problem without seeing your code.
you can add div tag surrounded in page and add a special class or id and define this class before CSS styles. actually you define the special styles for certain styles
Related
This might seem a bit unorthodox, but I am trying to use Bootstrap with the website I'm working on now, but don't have access to the head section of the site itself.
Ideally what I'd like to do is to use the Bootstrap CDN, which is available from getbootstrap.
The other option would be to take the CSS I might need from the Bootstrap downloaded CSS files and do the code inline, but this, obviously, would be a bit more work.
So, my question would be -
1) Is it possible to link to the Bootstrap CDN outside of the head?
2) Are there any alternatives I'm not thinking of?
3) Is copying and pasting inline the only way to do it?
We'd need the head developer, with full access, to implement it in the head itself, who has a lot on their plate and this would likely feature quite low on the list of things to do, so if I could do something myself then it'd be great.
You can include external CSS like Bootstrap in the body section however it is considered as a bad practice. What actually happens when you include the external CSS in your body section is that your content gets posted before getting styled and then gets styled later. In short, what im trying to say is that it works but it has a few drawbacks.
I can not think of any other alternatives.
how are you I know too late to answer but I just wanted to tell my opinion.
I think no, there is no solution to add CSS link stylesheet outside the head section.
with my all love and respect, Ahmad Itani
I have used HTML in its basic form, and I mainly work on "server side" (of Enterprise application, mainly based in Java EE).
From what I understand, HTML is the "pages" which we see in an browser (that source code which a GUI developer writes and which a browser renders appropriately).
For example in an HTML tag, we write "h1" element, and the browser displays the text within as bold.
Now why there is any need of css? From what I am aware of, CSS is used to give "style" to a html page. The confusion that I have, doesn't HTML in itself able to give the style? what were the compelling reasons for creation of css?
Can anyone help me understand this in simple words.
The code that you put in your html to style it is actually CSS. HTML actually has some built in CSS. So really, you are using CSS when you do that. Also people like to connect a separate file for CSS in bigger projects. It looks more organized, and it easier to keep track of. It is also easier to code the CSS, because it is less messy and it seems like you have a bit more functionality. In conclusion, the code in the html that you are using to style with, is actually CSS, just built in. Also, I would highly recommend separating your stylesheet and HTML file(the stylesheet is CSS). If you need help, go to codecademy and create an account. Take the HTML and CSS lesson. I found this very useful and is where I learned most of my knowledge. I would highly recommend going to that site also. The site is also free.
(like how override cms' css file like using classes under bootstrap instead of main.css)
..
I having a problem with my website which i made by developing only front end using HTML& CSS. (website is in .HTML).
I decided to use the website under a CMS so that it can be more secured and efficient and i chose fuelCMS1.3.1 under CI.
But i faced a problem when pasting my code into the CMS, my website itself has a css file called 'main.css'..while the fuelCMS itself uses its own 'main.css'!
when it came to pasting code of a dropdown menu from bootstrap, my website under CMS, dropdown menu is not working!
I went to inspect element to see my .HTML website, and it shows that its making FULL use of bootstrap.min.css & few main.css.
but in CMS, when checking inspect elemtn, i found that HALF of the dropdown menu css is using 'main.css' instead of boot strap!
how is possible that 'main.css' in fuel cms is being used instead of my bootstrap link?
i mean, i understand that 'main.css' in fuelCMS is having same classes as in bootstrap, so it is overriding them..how do i solve this and force fuel cms to use classes from my bootstrap link ONLY?
im also facing the same problem with 'body', becuase when i check the inspect element for the 'body' in css, in my HTML website its only used once, But when i check inspect element is FuelCMS, its being surprisingly being used more frequently.
body tag is used in several css files
(as if fuel cms has its own css identification and classes for 'body' instead of making use of my own 'body' tag for local HTML files..same goes for the main.css, fuelcms is identifying my site css tags using its own css files rather than my ones (its overriding them)..not to mention missing classes from my own css files being ignored)
its like my css are clashing with css of the cms, where the cms is overriding my ones.
hope i was able to explain well.
im quite new with front end developing, so I'm still managing and learning trying to track the problem and solve it.
Any suggestions? Thanks in advance.
The main.css is placed under assets folder.
Just remove the main.css and use yours instead.
Or you can use custom.css to override the main.css.
Just include the custom.css in your layout.
I have site created already which is not bootstrap, and now i need to implement the bootstrapValidator for the validation purpose, if i include bootstrap css then my site style also changing,
Is there any way to include bootstrap form styles alone in html, apart from cut copy in bootstrap css file?
You can use the Bootstrap Customizer
and check only the "form" checkbox to download only the part you need...
Use customize css download from bootstrap site, here you see the options of customizations. You can choose what you want in your CSS. Or you can use less css, download the bootstrap less master from github and compile theme as per your project needs.
The only way to do this is to find a stylesheet that someone else took the time to copy / paste from the Bootstrap. I've done this on several occasions, and its pretty simple as all the form-styling elements are placed next to each other in the bootstrap stylesheet.
So, find you scissors :)
You can't import a part of a css file, so you can copy/paste your desires classes on your actual css or rename your classes in your css file to not have conflicts with bootstrap's classes name and then your site's style will not change when you include bootstrap.
Do you know a source for pure CSS Templates? After setting up a simple Web Project I always wish to have a CSS file to:
Set reasonable font settings for paragraphs and headers
Polish my anchor tags
Style my forms (if I have to touch the HTML for this one - no problem)
Style my tables (I use headers and footers etc) using even & odd
Maybe give me some handy classes for error boxes, etc.
So if I Google for a such CSS file I find CSS Homepage Templates with HTML Structure and massive CSS which I can't use without changing much. I find CSS examples for perfect tables, other examples for perfect forms but what I don't find is a single CSS File which when loaded in a properly formatted HTML website will make it look "okay" instead of the pure HTML look.
Do you get me?
Does anybody have a hint for me?
Twitter Bootstrap might interested you but I believe it has a bit of javascript in it as well.
Edit: As mentioned in comment you can use many of the Bootstrap features without using any javascript.
I've personally used bootstrap and I love it. I've also bookmarked few others to play with when bandwidth permits.
Bootstrap
Blueprint
960 Grid
Update: On related matter, I would also checkout CSS Preprocessors such as Sass and LESS that could help in writing better CSS and build up a custom library to use across projects.
Perhaps try the CSS off of Twitter Bootstrap. Provides all sorts of consistent styling that's simple but elegant, in addition to some fancier element behaviors.
Update:
Adding to Yonix's related list, the following are alternative CSS preprocessors, which makes working with CSS a little more digestible:
Compass
Stylus
There's a bit of a learning curve when teaching yourself CSS, but some basic CSS is easier than you think.
For quick prototyping/wireframing and pre-made HTML templates, I use Zurb Foundation, as compared to Twitter Bootstrap. My advice is to familiarize yourself with their online documentation and delve into the main CSS file (foundation.css). You can build on top of that CSS file with the provided app.css file.
It comes with a lot of pre-made styles (buttons, forms, etc) and everything is responsive (fits on any size screen). You can choose to include all the plugins, or just the HTML and CSS. It also has an option to download the HTML templates, which come with a variety a layouts, such as a blog or a basic structure. I absolutely love it!