Somehow i am unable to override normalize.css? - html

Screenshot
CSS code
I am beginner , somehow i am unable to remove the margins from h1 element. I Don't know what the problem is.
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
I’m hungry
Show me more
</div>
</header>
</body>
</html>

re-order your link tags as below
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> <!-- reset default styling -->
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css"> <!-- add grid support -->
<link rel="stylesheet" type="text/css" href="Resources/css/style.css"> <!-- apply custom styles to your code -->

You can re-order the style.css to be after normalize.css, or you can use !important to force the CSS:
h1 {
margin: 0 !important;
}

Three possible solutions here:
1- In your HTML, include normalize.css first, and then the other CSS files that will override it:
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
2- You can override style properties from normalize.css by using more precise selectors in your style.css file. For example, assume that your h1 is in a div with class container, you can do:
.container h1 {
margin: 0;
}
As .container h1 is more precise than the h1 selector in normalize.css, the property will be overridden automatically.
3- If neither of these work for you, you can use !important to force the margin property to be overridden, like so:
h1 {
margin: 0 !important;
}

First reorder your resource files and simply use below in your css. Make note of the px part.
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
CSS Code
h1 {
margin: 0px;
}

Related

Font awesome icon does not show up when I use it with other css file

I have a situation where my font-awesome is not working as expected.
I have my style sheet and the one from the font-awesome
<head>
<title> Millionique Square </title>
<script src="https://kit.fontawesome.com/e9148616db.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
If I comment this line:
<link rel="stylesheet" type="text/css" href="style.css">
It works. How can I fix this issue?
Github Repo: https://github.com/rjain09/formValidation.git
You have to load scripts in after body not in head.
<html>
<head>
<title> Millionique Square </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Your body content -->
</body>
<script src="https://kit.fontawesome.com/e9148616db.js" crossorigin="anonymous"></script>
</html>
Try this
<head>
<script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
</head>
It’s because you didn’t import your index.js script file
So no code added the success or error class to form-control which would override the visibility
.form-control i {
visibility: hidden; /* <- hide the icon*/
position: absolute;
top: 40px;
right: 10px;
}
here

How to embed external html and change css styles?

I have a local /swagger-ui.html that is served from a different package/library. I want modify the style, thus I thought about embedding it into my own index.html and adding some css style overrides to it:
index.html:
<head>
<link rel="stylesheet" href="styles.css">
<link rel="import" href="/swagger-ui.html">
</head>
styles.css (same folder):
.swagger-ui .scheme-container,
.swagger-ui .topbar {
background-color: red !important;
display: none !important;
}
Result: I'm not seeing any changes on the styles. Why?
Try to switch the following lines
<link rel="stylesheet" href="styles.css">
<link rel="import" href="/swagger-ui.html">
to:
<link rel="import" href="/swagger-ui.html">
<link rel="stylesheet" href="styles.css">

Does having a separate CSS file have an effect on the code running?

I am learning CSS and HTML, and I was creating a template locally, first time I had a separate local CSS file, in this file the body will not be styled but a div was, the second time I tried to include the CSS in the HTML body and not in a separate CSS file and everything worked fine.
First time, the div was styled but the body was not.when a separate CSS file was created:
<!DOCTYPE html>
<html>
<head>
<title>Quote Machine</title>
<script src="scripting.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div>hello</div>
<style>
</style>
</body>
</html>
<!-- separate CSS file-->
body {
background-color:black;
}
div {
background-color:yellow;
}
Second time, everything was styled as required when the CSS was inside the HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Quote Machine</title>
<script src="scripting.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div>hello</div>
<style>
body {
background-color:black;
}
div {
background-color:yellow;
}
</style>
</body>
</html>
You need to include your stylesheet after the bootstrap one for it to override the default bootstrap styling.
What's happening in your first example is it's loading your stylesheet, then loading the bootstrap stylesheet.
In the second example, it's loading your stylesheet, then the bootstrap stylesheet, then overriding the bootstrap stylesheet with the styling you've declared in the html.
In addition to M P's answer, in your second example, using elements as child tags of tags is not proper html. They elements belong in the section.
Your style.css is comimg before your bootstrap file . This needs to be the other way around . The reason your style is working internally is because the dom is compiled last and will override any external styles that do not include !important .
Example
4rd Priority
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
3rd Priority
<link href="style.css" rel="stylesheet" type="text/css">
2nd Priority
<head>
<style></style>
</head>
1st Priority
<div style="color:red;"></div>
All work in this order .
Hope this helps

Unable to override css property

Hi I have provided with a project which has many CSS files included. with following structure
<link href="./Premium Nutritional Supplements_files/jquery.owl.carousel.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/jquery.fancybox.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/jquery.fancybox-buttons.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/bootstrap-modal.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/bootstrap-switch.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/kumi.global.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/kumi.style.scss.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/kumi.media.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/custom.css" rel="stylesheet" type="text/css" media="all">
I have included custom.css at the end to override a property
.post-author-image{
border-radius: 50%;
}
in kumi.global.css which is above custom.css and contains
div, input, select, textarea, span, img, table, td, th, p, a, button, ul, li {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0!important;
}
But I m unable to override border-radius in custom.css. How can I override border-radius from 0 to 50%?
using !important should do it since custom.css loads at last.
.post-author-image{
border-radius: 50% !important;
}
!important gives css a higher priority and since "kumi" css has !important, no matter where you put your custom css, "kumi" css will take effect.
It is generally a bad idea to use !important especially when you are selecting a generic dom element which is in your case with "kumi css" where !important is used for almost everything.
If possible, a better solution will be to remove !important from "Kumi" css
Woah. I hope that you can change kumi.global.css, because that !important tag is put to horrific use. It almost seems like a hard-artillery approach to banning use of border-radius.
Here's the direct solution:
.post-author-image{
border-radius: 50% !important;
}
But I hope you're able to remove that tag from the global file.

bootstrap & Normalize.css: spacing problems

Bootstrap normalize does not seem to remove top and left/right spacing from theme i am developing. Could somebody give hint where is the problem in my code. I have tried several reset css files also without any effects.
Index
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- /GOOGLE FONTS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/flaticon.css">
<!--do not edit-->
<link rel="stylesheet" href="css/style.css">
<!-- do not edit-->
<!-- add override css here-->
<link rel="stylesheet" href="css/mystyle.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Favicons ================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
topbar-content
http://codepen.io/anon/pen/ZGJaVb
As far as I see you have this style
.wrapper {
border: 1px solid white;
}
Try to remove the border style. It should help you.