I am new with HTML and I am trying to center the H1 using css class but it is not working. I
My HTML is the following :
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class='title'>
<h1>Technologies</h1>
</div>
</body>
</html>
and my CSS is the following :
multi-input {
display: inline-block;
margin: 0 20px 20px 0;
}
button {
background-color: #eee;
border: 1px solid #ddd;
font-size: 16px;
height: 30px;
margin: 0 10px 20px 0;
}
body > div {
align-items: center;
display: flex;
justify-content: center;
}
label {
display: block;
margin: 0 20px 20px 0;
}
div.title {
text-align: center;
}
I inspired myself from this tutorial : https://www.w3schools.com/cssref/pr_text_text-align.ASP
I also tried adding this h1 {text-align: center;} in my css so that all H1s would be centered but it is still not working.
Can anyone help? Thanks!
You have to delete the Slash (/) from <link rel="stylesheet" href="/style.css">
like this : <link rel="stylesheet" href="style.css">
<!--not this but u can delete u slice and u css will work again-->
<link type="stylesheet" href="/style.css">
<!--NOT .div title but u can try this in u html-->
<div class="title">
<h1>This Title</h1>
<style>
.title h1{
text-align:center;
}
</style>
</div>
<!--THANKS,greetings from Indonesia-->
Try this if you want to center your h1:
<style>
h1 {text-align: center;}
</style>
Related
Find the image here to understand what i'm talking about
Been googling and fiddling around but I can't seem to seperate the words. The only separation I managed was using "justify-content: space-around".
Here's the HTML. And the CSS is below it
body {
background-color: #3269a8;
}
.header-container {
display: flex;
width: 100%;
height: 50px;
background-color: #282828;
border-radius: 10px;
align-items: center;
justify-content: center;
}
.logo {
color: white;
font-family: 'Titillium Web', sans-serif;
font-size: 25px;
}
.logo:hover p {
transition: 2000ms;
font-size: 30px;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Top 3 Anime</title>
</head>
<body>
<div class="header-container">
<p class="logo-the logo">The</p> <p class="logo-big logo">Big</p> <p class="logo-three logo">Three</p>
</div>
<div class="top3">
<div class="onepiece">One Piece</div>
<div class="dragonball">Dragon Ball Z</div>
<div class="naruto">Naruto</div>
</div>
</body>
</html>
You have used display:flex in your header-container with justify-content:center; that will make the child p tags to be in a line without any space. if you just want little space around p tags you can add
.header-container p {
padding: 0 5px;
}
and if you want to learn about flex and its properties you can learn from here csstricks , the have explained it beautifully.
I hope this will work for you
Thanks
You can change the <p>Your header</p> to <pre>Your Header</pre>. Here <pre> keeps the format of the text including spaces. You can check this page: https://www.w3schools.com/tags/tag_pre.asp
Basically you just need to editted the following in your code:
<pre class="logo-the logo">The </pre> <pre class="logo-big logo">Big </pre> <p class="logo-three logo">Three</p>
I added a space after "The" and "Big" so converted them to <pre>.
Im trying to create my first web project using Brackets and cannot get the background image to show up.
My css code is
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
.header {
background-image: url(../img/hero.jpg);
background-size: cover;
height: 100vh;
}
h1 {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&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>
I've been following a course online and have typed all the code in identically. I don't know why my background image wont appear. I dont think its a problem with the file tree as when I click on the url(../img/hero.jpg) Brackets shows me that it recognizes the image. Any help would by greatly appreciated. Thank you.
You are targeting the class .header instead of the tag header.
header { /* Change from .header to header */
background-image: url("../img/hero.jpg"); /* Add Quotes */
background-size: cover;
height: 100vh;
}
I think there are two things going on here that will get it working again:
Your css declaration for header is referencing a class but I think you want it to reference a tag header.
Will want to make sure the url path is relative and surrounded by quotes. The example below references one that is hosted online. The snippet you supplied didn't have the path inside quotes: '../url/destination'
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
header {
background-image: url('https://global-uploads.webflow.com/5ef5480befd392489dacf544/5f9f5e5943de7e69a1339242_5f44a7398c0cdf460857e744_img-image-p-1080.jpeg');
background-size: cover;
height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&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>
Apparently CSS is not recognizing the file path. I suggest you describe it more extensively to resolve this error: "C:\Users\Name\img\hero.jpg"
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");
I'm trying to create a hero image for a website, and I'm receiving a random white bar the bottom of my website.
This is the HTML
* {
margin: 0;
padding: 0;
box-sizing: padding-box;
}
img {
width: 100%;
overflow: hidden;
}
body {
margin: 0px 0px;
}
<img src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg' />
img element is by default display:inline-block; vertical-align:baseline;
That baseline alignment is what you see.
So either display:block; or vertical-align:top;:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel='stylesheet' type="text/css" href="styles.css"/>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<img style="display:block" src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg'/>
</body>
</html
Another option - to set your image to background:
body {
background: no-repeat url(https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg);
background-size:cover;
}
<body>test</body>