I am VERY new to html and have very limited skills so please bear with me.
I am trying to put an infinite image carousel with links on the front page of my website. But Bootstrap overrides my web styles. I thought I knew where my styles where( I obviously do not) and tried to add them after the carousel but it did not work.
I need the carousel in a specific place on the page.
I tried putting the carousel in a table or adding etc.(pretty much anything I could think of) all in vain. Not sure what to do as I am far from being a master code writer......
any help with this would be greatly appreciated!!!
Thank you in advance!!!
In almost all cases for bootstrap that I am aware of, Bootstrap styles will not override custom styles if you load your own styles after the bootstrap styles.
correct way:
<head>
<link rel="stylesheet" type="text/css" href="link-to-boostrap.css">
<link rel="stylesheet" type="text/css" href="custom-styles.css">
</head>
incorrect way:
<head>
<link rel="stylesheet" type="text/css" href="custom-styles.css">
<link rel="stylesheet" type="text/css" href="link-to-boostrap.css">
</head>
Stylesheets should always be in the header except for very specific circumstances.
If you are putting styles directly on the page in a <style> tag you can move them to the external style sheet following these instuctions: https://www.w3schools.com/css/css_howto.asp
Related
I have this problem with a website I'm building. I'm trying to implement php code to connect to some external search engine but I found myself having some problems I can't fix. I realised somehow my bootstrap is overriding with the one from the server I want to implement it so it doesn't allow my web to find my style.css. I don't know if I'm making any sense. If anyone could have a look would be super great.
<link rel="stylesheet" type="text/css" href="http://lostonyouagency.com/css/bootstrap.min.css?8656">
<link rel="stylesheet" type="text/css" href="http://lostonyouagency.com/style.css?6959">
<link rel="stylesheet" type="text/css" href="http://lostonyouagency.com/css/animate.min.css?2803">
<link rel="stylesheet" type="text/css" href="http://lostonyouagency.com/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://lostonyouagency.com/css/ionicons.min.css">
Here are some pictures of my issue:
If I remove <link rel="stylesheet" type="text/css" href="http://lostonyouagency.com/css/bootstrap.min.css?8656"> all the external widgets will work but then I will face some serious problems on my menu bar. I don't know what else to do, I have tried quite a few things! Someone told me I need to edit the Css class but I don't know how to do it!
Also chrome is telling me it can find the assets/css/style.css.map
This is because you have 2 version of Bootstrap in your page. Bootstrap 4 and bootstrap 3.x
The first highlighted CSS has Bootstrap version 4. Second highlight has Bootstrap 3x inside it along with other styles.
This looks like a conflict between both versions and your styles.
I am designing a fitness website, for testimonials, I tried using bootstrap code. but as soon as I enter the link for bootstrap CSS my own CSS stopped working.
first, I gave the link to bootstrap file than on second line gave the link of my own CSS file but still not working
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>NewliFit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" type="text/css" href="css/firstone.css">
<script src="javascript/fade.js"></script>
</head>
.
That’s weird, I know that you must add a link to Bootstrap before you add your own files, but unless you have a name conflict in your own CSS, everything should work as planned. A strange tip, would be to check that you don’t have uncalled for spacing between your HTML tags. Apart from that you’d need to post your code.
Cheers
I have a wordpress theme which have its default styling, I developed a new page template and wrote some styles specifically for it but for some reason the styles aren't being applied.
The styles include table cell-padding.
When inspecting the code, the css I applied is being stroked out. How can I force that CSS to apply itself. I have already tried using the !important but still no success
usually if you are developing your own theme for wordpress that there are no problems with the application of styles possible presence of an error in the connection of style, even when finished remaking theme personally I have no problems
Sometimes you have to use all classes and ids of div to declare style for it. Anyway you shouldn't use !important, but try to describe your div precisely.
Write CSS (stylesheet) at the end of the all css files in header, Write css in Hierarchy level. select parent class or id and written down css
CSS Declaration in Header
<head>
<link rel="stylesheet" type="text/css" href="defaultwordpress.css">
<link rel="stylesheet" type="text/css" href="own.css">
</head>
Can you make sure your own CSS code is called after the main CSS code ?
Maybe by changing the order of CSS calls in your head section like this :
<head>
<link rel="stylesheet" type="text/css" href="defaultWordpress.css">
<link rel="stylesheet" type="text/css" href="myOwn.css">
</head>
edit : default Wordpress css first :-)
I have something like this in the body of my Html page.
<link rel="stylesheet" type="text/css" href="/untitled2.css">
I'm pretty sure this correct, but it's not working. What is wrong here?
You add your style sheets to the header such as
<head>
<!-- everything else -->
<link href="css/main.css"type="text/css" rel="stylesheet">
</head>
If you want to add it to the body you can style each element by using the style attribute such as ...
<body style="color:black;"></body>
or on each element itself
The answer is right inside the page you are looking at, try to figure out yourself as much as possible before asking the question here.
<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/stackoverflow/all.css?v=7bbb71ecd5eb">
( from StackOverflow's page source )
I'm a new web design student and I just learned about Cascading Style sheets and how to link them externally; however, I'm encountering a problem. I have the file linked in my <head> with no problem and the file directory is correct, but my changes are not showing up. If I had a <style> tag or attribute then my CSS works, but not from the external file. Any help?
<!DOCTYPE html>
<html>
<head>
<title>Protein Structures</title>
<link href="styles/main.css">
</head>
I make this same mistake when I'm in a rush. The problem is, you're linking the file correctly, but the browser doesn't know how to interpret the file. Is it a stylesheet, icon, alternate stylesheet? You need to add the rel attribute and set it equal to stylesheet.
<link rel="stylesheet" type="text/css" href="styles/main.css">
I'm not sure if type="text/css" is still mandatory. I know that when doing Javascript you don't have to have type="text/javascript".
Here's a good link explaining why.
You need to add what the relationship of the link is. Change your <link> tag to:
<link href="styles/main.css" rel="stylesheet">
You might want to take a look at the documentation for link types to understand why the rel is necessary.
try this i hope this is working.
<link type="text/css" rel="stylesheet" href="styles/main.css" media="all">