So I'm new to programming and I've been learning on my own through the Odin Project. The first project I've been working on is a recreation of the Google search site. I've got some of the basic HTML layout but my CSS is not being applied, I originally started this project on codepin and everything worked. When I switched to vscode... nothing. Here's what I have so far for HTML and CSS.
.flex-container {
height: 100vh;
border: 3px solid blue;
display: flex;
justify-content: center; /* x-axis */
align-items: center; /* y-axis */
}
.flex-item {
font-size: 90px;
font-family: 'Noto Sans JP', sans-serif;
#G {
color: #4885ed;
}
#o {
color: #db3236;
}
#o1 {
color: #f4c20d;
}
#g {
color: #4885ed;
}
#l {
color: #3cba54;
}
#e {
color: #db3236;
}
.foot {
background-color: #A5A6A1;
height: 2em;
}
.ad {
color: blue;
}
<!DOCTYPE html>
<html>
<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>Google</title>
<style>
#import url('https://fonts.googleapis.com/css2? family=Noto+Sans+JP&display=swap');
</style>
</head>
<body>
<div class ='flex-container'>
<!-- Try using 'span' instead of a div for 'Google'.-->
<div class='flex-item'>
<span id='G'>G</span>
<span id='o'>o</span>
<span id='o1'>o</span>
<span id='g'>g</span>
<span id='l'>l</span>
<span id='e'>e</span>
</div>
<input type="Search">
</div>
<footer class='foot'>
<span id='ad'>Advertising</span>
<span>Business</span>
<span>How search works</span>
</footer>
</body>
</html>
This is my first post so hopefully its a good question. Any and all help is appreciated. Thanks!
You forgot to link your css file to your html file. Add a link tag at the end of the head tag, in case you have the html and css files in the same directory and your css file's name is styles, you can do like this:
<head>
...
<link rel="stylesheet" href="styles.css">
</head>
The reason it works on Codepen is because they do the linking work for you, so the html, js and css file are automatically connected to each other
Looking at CSS code it seems like it is in different file. So in this case you have to link CSS to HTML file you can do this by using <link rel="stylesheet" href="yourfilepath"> inside head tag.
-- You have to call the css file that you made with:
<link rel="stylesheet" href="the file of the css">
Related
Im a beginner in Visual Studio and my html file/code work fine but my css file doesn't work. My problem is not detected in the workspace.
I also try to do this, nothing happen :
<link href= "CSS\index.css" rel="stylesheet" type="text/css">
CSS code :
style
h1 {
background-color: blue;
}
I am also new but I think I can help. You have two options, that I am aware of.
The first and ideal option would be to reference to a separate style.css file to go along side your maim html page (ex: index.html & style.css).
(index.html)
<!DOCTYPE html>
<html>
<head>
<title>yourwebsite.com</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<img src="your.jpg" alt="Handsome Man" width="100"
height="100">
<h1><b>your name</b></h1>
<p>your tag line</p>
<a href="https://twitter.com/yourtwitter"</a>
</body>
</html>
(styles.css)
body{
background-color: #f4f4f4;
color: #555555;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
/* Same as above */
/* font: normal 12px Arial, Helvetica, sans-serif; */
line-height: 1.6em;
}
h1{
color: #00ff00;
}
p{
color: rgb(0,0,255);
}
The second and worst option is to include your css within your main html file.
(Copied from https://ryanstutorials.net/css-tutorial/css-
including.php)
<!doctype html>
<html>
<head>
<title>Embedded CSS example</title>
<meta name="description" content="A page with embedded css">
<meta name="keywords" content="html css embedded">
<style>
h1 {
text-decoration: underline;
color: #4583c2;
}
p {
padding-left: 20px;
font-size: 18px;
}
</style>
</head>
<body>
...
</body>
</html>
Make sure the index.css file is inside the CSS folder, then add the below link tag.
<link rel="stylesheet" href="./CSS/index.css">
In the index.html file I am able to do this an it works as designed:
<!DOCTYPE html>
<html>
<head>
<body style="background-color: #A8E4A0;">
<meta charset="utf-8" />
<title>Demo</title>
My partner would like to keep the background-color in our css file user-interface.css. Which makes sense to me but it is not working as I would expect.
When I enter the background-color it doesn't show up and leaves my background-color as white.
What am I missing?
* Universal Settings */
.body{
background-color : AE8E4A0;
font-family: Arial;
}
/* Search bar */
.heading {
font-size: 30px;
padding: 16px 0;
color: #444;
text-align: center;
}/*Container*/`enter code here`
Thanks
Scott
You have a minor error on your code. You should not put the dot (.) in front of body as it is not a class name, it's an element. Same for the heading. So your code should be like:
/* Universal Settings */
body{
background-color : #AE8E4A0;
font-family: Arial;
}
/* Search bar */
heading {
font-size: 30px;
padding: 16px 0;
color: #444;
text-align: center;
}/*Container*/
<!DOCTYPE html>
<html>
<head>
<link href="cssfilename.css">
<body style="background-color: #A8E4A0;">
<meta charset="utf-8" />
<title>Demo</title>
Also, you would need to link your CSS to your HTML file. Not that the "cssfilename.css" need to be replaced by the filename of your css file, and they need to be in the same directory.
added to CSS background-color: #A8E4A0; and verified the link in my htlm was correct
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My first Website!</title>
<style>
body {
background-color: #A8E4A0;
font-family: arial;
}
p {
color: green;
}
</style>
</head>
<body>
<p>This is a paragraph!</p>
</body>
</html>
If you want the style in a seperate .css file, try this:
/* style.css */
/* Needs to be in the same folder/directory as the .html file is. */
body {
background-color: #A8E4A0;
font-family: arial;
}
p {
color: green;
}
<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<title>My first Website!</title>
</head>
<body>
<p>This is a paragraph!</p>
</body>
</html>
I have an issue and i really dont know how to solve it because of my lack of knowledge( i am a begginer) . Well let me explain you. I am building a blogspot, so i have a header and a footer files which I want to get loaded in every .html files in the project. In order to achieve that I used a script which I found in stack overflow.
The script works fine but I have some minor issues with it. But before continue, let me paste my index.html and header.html and my css files to understand better. This is my index.html file which includes the script.
<!doctype html>
<html lang="en">
<head>
<title>The Spooky Side</title>
<meta charset="utf-8">
<meta name="description" content="Front Page">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="articles-box.css">
<link rel="stylesheet" href="``header-footer-style.css">
<link href="https://fonts.googleapis.com/css?
family=Anton|Dosis|Montserrat|Nosifer&display=swap" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header-id").load("header.html");
$("#footer-id").load("footer.html");
});
</script>
</head>
<body>
<div class="header-cl" id="header-id"></div>
<div class="footer-cl" id="footer-id"></div>
</body>
</html>
This is the header.html file
<!doctype html>
<html lang="en">
<head>
<title>The Spooky Side</title>
<meta charset="utf-8">
<meta name="description" content="Header Page">
<link href="https://fonts.googleapis.com/css?
family=Anton|Dosis|Montserrat|Nosifer&display=swap" rel="stylesheet">
<link rel="stylesheet" href="header-footer-style.css">
</head>
<body>
<div class="header-cl" id="header-id">
<a class="header-company-name" href="">The Spooky Side</a>
<a class="header-content" id="about1" href="">About</a>
<a class="header-content" href="../blog/blog.html">Blog</a>
<a class="header-content" href="">Contact</a>
</div>
</body>
And finally this is my css file.
/*H E A D E R */
.header-cl{
display:flex;
grid-column:1/-1;
background-color: white;
}
.header-company-name{
font-family: 'Nosifer', cursive;
color:black;
font-size: 2em;
padding-top:17px;
padding-left:30px;
text-decoration:none;
transition-duration: 1.2s;
}
.header-content{
font-family: 'Dosis', sans-serif;
color:black;
font-size: 1.6em;
text-decoration:none;
padding: 20px;
transition-duration: 0.7s;
/*^^^space between buttons^^^*/
}
/*F O O T E R */
.footer-cl {width : 100%;grid-column:1/-1;background-color:
black;color:white;
}
.footer-company-name {
display:flex;
justify-content: center;
align-items: center;
font-family: 'Dosis', sans-serif;
font-size: 1.4em;
padding-top:20px
}
.footer-content{
display: flex;
justify-content: center;
align-items: center;
margin:0px;
}
.footer-anchors{
font-family: 'Dosis', sans-serif;
color:white;
font-size: 1em;
text-decoration:none;
}
/*HOVERS DAMN*/
.header-content:hover{
color: #FF0000;
}
.footer-anchors:hover {
color: #510000;
}
.header-company-name:hover{
color:#FF0000;
}
/*I D S */
#about1{
margin-left: auto;
}
/*space between blog's name and other options */
And now which is the issue. I am going to post three screenshot. When I run the header.html I got this result which is the right one,(I dont post the footer.html because is the same with the header)which is looks like this.
header.html
But when I run the index.html in the Atom it looks like this.
index.html run in Atom
And finally when I run my code in google chrome it looks like this[Index HTML run in google chrome3
As you can see this is my problem. In google the header and the footer are not displayed,and i really dont know why. But in the atom the index.html displays the header but without the correct form, and finally in the header.html when I run it its correct. Anyone have idea why this happening or how can I fix that?
how folder looks
It looks like you need to load a fragment (just the contents of #header-id from header.html into #header-id on index.html)
Try this:
$("#header-id").load("header.html #header-id");
https://api.jquery.com/load/#loading-page-fragments
The problem that I have with my code is that the <p>Welcome to my Profile</p> will not center. I've tried using Bootstrap's text-center class but it doesn't work desirably. I've also tried multiple things like using text-align: center; in CSS and even using width: 100%; for both the header and the div. Are there any solutions? Thanks in advance.
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">
<title>Jane's Personal Profile</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<ul>
<li>Social Media</li>
<li>Portfolio</li>
</ul>
</header>
<div class="row">
<div class="span8 offset2 text-center">
<p>Welcome to my Profile</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
header {
height: 75px;
padding-left: 10px;
box-shadow: 5px 5px 10px grey;
width: 100%;
}
header > h1 {
float: left;
}
ul {
display: table-row;
float: right;
list-style: none;
}
ul > li {
display: table-cell;
vertical-align: middle;
height: 70px;
padding: 10px;
padding-right: 20px;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', cursive;
}
Looks like you're using "text-center" as a class. Unless you set your CSS to recognize the class, there is nothing for the CSS to do.
Try adding this to your CSS
.text-center {
text-align: center;
}
You should always provide a jsFiddle for problems like this, btw ;)
If Bootstrap has a class setting the paragraph element to align left, you may also need to change the paragraph to a div. Alternatively, you could add a class to the paragraph such as "center-me" and add CSS
p.center-me {
text-align: center;
}
Bootstrap adds a giant bunch of CSS. Make sure, when you are using Bootstrap, to check if it has CSS styles that are affecting what you want to accomplish. Most browsers contain a developer's window where you can see what styles are being applied to any window. In Chrome, you can right click on any element and select "Inspect" to pull up this window and see both the HTML and the styles that are being applied from any CSS source.
This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 6 years ago.
I was working on an html page, got halfway through, and decided to start styling somethings. . . All of my styling worked fine! That is until I tried to get a Google Font. I followed all of the instructions and inserted everything into css correctly. However, when I view the page on Chrome, it only displays the "fallback" generic sans-serif font. Here is my css:
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Could someone please tell me what I am doing wrong (If I a doing it wrong), or point me in the right direction of getting it to work?
Try to put your import on the top of your file, before any declaration.
Include the #import directive at the top of the file.
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
You can remove:
#import url(https://fonts.googleapis.com/css?family=Raleway);
And add:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
To your <head>. Like so:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Try to add the following in the head section of your html code and see if it fixed the problem:
<meta charset="UTF-8">
In addition, you need to move the #import to the top of the CSS file, so the font will load