Here's my code of index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeWare</title>
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<div class="hero">
<h1>Coding</h1
<h1>Redefined.</h1>
</div>
</body>
</html>
Styles.css:
:root {
--color-Primary: #ff0505;
}
html {
font-size: 62.5%;
}
body {
font-family: Inter, Arial, Helvetica, sans-serif;
}
.hero {
background-color: var(--color-Primary);
height: 50rem;
}
h1 {
padding-left: 2rem;
padding-top: 2rem;
color: #ffffff;
margin-top: 0px;
font-size: 9rem;
font-weight: 700;
}
In index.html, it works if I use style="margin-top: 0px;" in the h1 attribute. If I instead type it in styles.css as margin-top: 0px;, It doesn't work. Like why? Some one please help me
You only need to change the order of 2 css files (styles.css and normalize.css)! The order matters! (Now the h1 rule in normalize.css (h1{font-size: 2em;margin: 0.67em 0;}) override your rule from styles.css)
You are injecting normalize.css after your own styles, that's why "margin:0px" is overriden by "margin: 0.67em 0;" rule from normalize.css.
All you need to do is to include normalize.css first.
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
Related
css causes some red boxes that cannot be understood.
Chrome/80.0.3987.149 Linux x86_64
code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flow</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="assets/css/b.css">
<style>
/* aaaaaaaaaa */
</style>
</head>
<body>
<style>
*:not(body):not(p) {
color: red;
font: 18px serif;
height: 100px;
width: 100px;
overflow: auto;
display: block;
border: 1px red solid;
}
</style>
</body>
</html>
demo:
https://stackblitz.com/edit/js-z6wf15?file=index.html
Is this a bug?
"special" doesn't have any defined meaning in HTML or CSS terms.
*:not(body):not(p) will select all elements that aren't the body or a p including html, head meta, etc.
Not too sure why, but it is showing up as a blank screen.
How it looks:
Here is my file structure:
css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #ffffff;
color: #555;
font-family: 'lato', 'Arial';
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header{
background-image: url(/resources/css/images/hero.jpg);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="resources/vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OmniFoods</title>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super Healthy meals</h1>
I’m hungry
Show me more
</div>
</header>
</head>
<body>
</body>
</html>
I guess you are looking for this in wrong directory, beacuse your style is already in "resources/css/". Try to continue this directory by doing this:
header{
background-image: url("./images/hero.jpg");
}
You need to wrap the soure in quotes like this
background-image: url("./resources/css/images/hero.jpg");
As the title suggests, my style.css isn't loading.
This is the head section off my html code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caculator</title>
<style type="text/css" src="style.css"></style>
</head>
This is the first part off my style.css:
button {
font-size: 50pt;
font-family: Arial, Helvetica, sans-serif;
color: grey;
border-radius: 7pt;
border: 1pt solid grey;
background-color: lightgrey;
width: 54pt;
height: 70pt;
margin: 2pt;
}
Does anyone know why this isn't working?
Edit: all my files are in the same folder, no subfolders
Try using <link href="style.css" rel="stylesheet"> instead of <style type="text/css" src="style.css"></style>.
add this to your head tag
<link rel="stylesheet" href="style.css" />
instead of
the link tag currently in yout html
Stylesheet import method try.
Sample: https://www.w3schools.com/tags/att_link_rel.asp
<link rel="stylesheet" type="text/css" href="style.css">
I am trying to add a custom font in CSS but it does not work.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shout!</title>
<meta name="author" content="Jordan Baron">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div>
<img src=images/logo.png alt="logo" height="54" wdth="133" class="logo">
<hr class="divider">
<h1 id="wis">Shout!</h1>
</div>
<script src="scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</body>
</html>
My CSS:
#font-face {
font-family: SanFran;
src: url(SF-UI-Display-Thin.otf);
}
div {
text-align: center;
}
.divider {
margin: 0;
padding: 5px;
}
.logo {
margin: 0;
padding: 5px;
}
.wis {
font-family: SanFran;
}
I am using Bootstrap 3 on Mac OS X. I am using Chrome.
The font changes when I don't use Bootstrap but when I do use Bootstrap the font doesn't change
It won't change because you're using an ID on your <h1> but you're trying to target a class of .wis instead of an ID of #wis.
Try changing
.wis {
font-family: SanFran;
}
to
#wis {
font-family: SanFran;
}
I am currently working on developing an HTML and I am using Bootstrap to make it more mobile-friendly. However, the bootstrap font sucks and I am looking to override it and replace it with a better looking font. I am posting the head of my HTML file. It looks like this:
<head>
<title> Connotate Engineering </title>
<meta name=viewport content='width=700'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>
And this is what my CSS looks like:
body{
font-family: 'Arial';
font-size: 12px;
}
#images{
font-family: 'Arial';
text-align:left;
font-style: regular;
letter-spacing: 0;
line-height: 1.5em;
text-decoration: none;
word-spacing: 0;
}
#images a{
margin:0px 20px;
display:inline-block;
height: 100%;
text-decoration:none;
color:black;
font-family: 'Arial', serif;
}
.caption {
width: 200px;
text-align: center;
}
#media screen and (max-width:480px) {
#sidebar { display: none;}
}
Change the link positions in your <head> from this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
To this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
The order matters, you want your final changes to be below all others.
And as Arham pointed out, if you put in an inline style, it will have a higher priority than the bootstrap.
If you want the whole page to have that font then you should either remove all font rules in all elements then add body { font-family: 'Indie Flower', cursive; } or include all elements you want to have that font like:
body, #images, #images a {
font-family: 'Indie Flower', cursive;
}
One way is to add the style attributes within the desired tag itself.
ie: (you want to override a certain style on a div)
<div style = "font-family: Arial">