I've linked properly my css file to the html intended, and when I check the sources on chrome, the file is being actually loaded but it has nothing inside, its totally blank. However, in my ide, the file has the actual code I want to implement.
Forgot the code:
HTML
<head>
<link rel="stylesheet" href="static/styles.css">
<title>Title</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <!-- load bootstrap css -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<style>
body { padding-top:80px; }
</style>
</head>
CSS inside static folder:
.style1{
width:38%;
float: left;
margin-right:4%;
}
Related
I am trying to learn HTML and CSS. I have tried using my CSS but it doesn't seem to be working properly.
HTML:
<head>
<link rel="stylesheet" type="text/css" src="styling.css">
<script src="../(public)/js/js.js"></script>
<meta charset="utf-8" />
<title>MyPortfolio</title>
</head>
CSS:
body
{
background : (red);
}
<link rel="stylesheet" href="./styling.css">
The folder directory of your CSS file determines how you link it.
Its best practice to link your script at the end of your web page, before the end of the body tag.
Its not "src", its "href".
<link rel="stylesheet" href="style.css">
I suggest you put that script tag on the bottom of your page.
Oh and one last thing, that css is incorrect. Here's what you should use:
body{
background:red; /* Or #ff0000 */
}
I have my layout.html file in the 'templates' directory and my styles.css file in the 'static' directory. Both are in my project folder named 'books-cs50w'. does not work though. I ve probably read all the google-able posts on absolute and relative paths, but for some reason my css is not applied to my layout.html. I had it at the bottom and and at the top of my bootstrap-stylesheets to make sure it's not a matter of being overwritten. To test the actual CSS, I pasted the code directly in -tags inside the layout.html file - it works. But no matter what I do when it's external - it won't read it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384- Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" rel="stylesheet">
<link href="/static/styles.css" rel="stylesheet" >
</head>
The CSS to test it is:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
h1, h2 {
color: red;
background-color: green;
}
body, head {background-color: green;
color: yellow;
}
enter image description here
You need to go one level up from your current templates folder by prepending ../ to your css path and now that you're one level up and currently in the main books-cs50w project folder, you can just navigate to your static folder and access the css file.
Change this line:
<link href="/static/styles.css" rel="stylesheet" >
To this:
<link href="../static/styles.css" rel="stylesheet" >
My problem is that my website that I'm attempting to host with Github pages will not read the CSS that I have linked to it.
My HTML looks like this:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">
<html>
<body>
<h1>Hello World</h1>
<p>I'm under construction!</p>
<h6>Copyright MIT Licence 2018</h6>
</body>
</html>
My CSS looks like this:
body {
background-color: lightblue;
}
h6 {
color: navy;
margin-left: 20px;
}
Link repository: legoman8304.github.io
I'm guessing I linked the CSS wrong because when I using inspect element on the site itself it does show style.css but when opened it's empty. Any help?
You need to link your HTML to the github page rendered style.css and not the file itself in the repo.
Change this:
<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">
To this:
<link rel="stylesheet" type="text/css" href="https://legoman8304.github.io/style.css">
And move that stylesheet reference inside your <head> tag.
You can use some way:
Recommend: <link type="text/css" rel="stylesheet" href="style.css" />
Use from raw your css with href: https://raw.githubusercontent.com/legoman8304/legoman8304.github.io/master/style.css
my code is acting super strange, first, i cant get css to work.
randomly in my code there was lines that were grayed out like if it was a comment but there was no comments, i pressed the spacebar after each end of line and it went back to normal, pretty strange.
then whenever i tries to give css properties and classes, it wouldnt give them. i just reopened my computer and last time it worked perfectly fine.
i gave the right link to the css stylesheet in html, ive checked.
here is just one example :
home.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="homestyle.css"
media="screen" />
</head>
(... more code)
<h1 class="lorem">hello</h1>
stylesheet.css
body {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
(... more code)
.lorem{
color: white;
background-color: aqua;
}
(... more code)
Change
<link rel="stylesheet" type="text/css" href="homestyle.css"
media="screen" />
by
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
because the file called stylesheet.css and you call homestyle.css, Or just rename your css file to homestyle.css .
I have a angular 2 application on which i have to use seperate background images on home page and other pages, i have applied image on index.html to have a background image but i need to add different image on different pages.
This is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="resources/js/semantic.min.js"></script>
<script src="resources/js/slideshow.js"></script>
<link rel="stylesheet" type="text/css" class="ui" href="resources/css/semantic.css" />
<link rel="stylesheet" type="text/css" class="ui" href="resources/css/angularSwitch.css" />
<link rel="stylesheet" type="text/css" class="ui" href="resources/css/main.css" />
<link href="resources/css/datepicker3.css" rel="stylesheet" type="text/css">
<link href="resources/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="resources/css/styles.css" rel="stylesheet" type="text/css">
<script src="resources/js/jquery-1.11.1.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/chart.min.js"></script>
<script src="resources/js/chart-data.js"></script>
<script src="resources/js/easypiechart.js"></script>
<script src="resources/js/easypiechart-data.js"></script>
<script src="resources/js/bootstrap-datepicker.js"></script>
<script>
<!--Icons-->
<script src="resources/js/lumino.glyphs.js"></script>
</head>
<body style="background-image: url("resources/static/pic/slide_1.jpg");" >
<app-root></app-root>
</body>
</html>
Please suggest me how to achieve this.
What about applying a background image at the component level instead of inside the index.html? Then each component could have a different background image. You could even have a separate css file that includes a snippet of code like this:
body { background-image: url("resources/static/pic/slide_1.jpg"); }
and include it in each component "styleUrls" that you want that background image to appear on. Use a different css for the components you want a different image on.
Hope this helps
Yes you can do this like you can have different background images on different components of your app. To do this please follow the instructions given below.
In your main css file that is style.css give the height 100% to the body & html please refer the below code.
Style.css
body,html{
height: 100%;
}
Now in your components css file that is namespace.component.css file add the below code
.component-body{
background-image: url(/assets/images/background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
Now make sure that you are having all the contents inside the div contains this class. You can have the dive classes & the css into their css files accordingly. For more information you can refer this link