I am really basic at HTML/CSS but with the help from this website I managed to get the following working. The colour looks right, so its all working.
But when I put this in the HTML Source Editor in Moodle the colour disappears, so I know that its a HTML editor and the colour is contained in style as CSS. So i guess I need to link to a style sheet to give me that colour, but I have no idea how to do that. Or maybe I am wrong about that, and something else could be done.
I already checked W3 Schools, and its most likely I just don't have the jargon yet to properly look for the answer to this problem, so a google search when you simply don't have the vocab for what exactly I am looking for is difficult.
Please if you can help that's great, but I also want to better know what it is I should be looking at, as I am only doing this for Moodle, any places you can point me to where I can find or see how HTML/CSS works with Moodle so I can learn about it so I can slowly build up my own knowledge. I greatly appreciate this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.label.label-default {
background-color:#009999;
</style>
</head>
<body>
<h1><span class="label label-default">Survey</span></h1>
</body>
</html>
I will answer to you , first you put style css in same file of html ,so remove the whole link of style . then in style write like this
I advise to you use Adobe Dreamweaver program , I hope my answer solve your problem.
Related
I am making a website and my client wants what he refers to as a "Eraser file" to be on the top section of the site. Here is a example website that uses this feature http://flashpoint.gatech.edu/
How can I use this file and implement it in html? I have searched for eraser and zap file answers, but could not find anything on them.
This is very easy because it is actually a jQuery plugin...
(I did not find any viable CDN for that library, so I cannot give you the live example in a JSFiddle. Please download this in a file called "eraser.js" and put it in the same directory as this HTML file. You should be able to erase the Stack Overflow logo.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Eraser</title>
</head>
<body>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="eraser.js"></script>
<script>$('img').eraser();</script>
</body>
</html>
I named my css file newstyle.css
Any change that I make to the css style sheet in sublime text won't show up when I look at the webpage.
How can I make sure my link works?
<!DOCTYPE html>
<html>
<head>
<title>Ana Yasmeen </title>
<link href="css/newstyle.css" type="text/css" rel="stylesheet" />
</head>
<body>
Your tag looks good so check your link to your css file ie, yourlocalwebsite.com/css/newstyle.css should list your css styles, otherwise the link is wrong and you need to rewrite it to the correct path.
I got to improve some website. The W3C validator shows me a problem with &:
& did not start a character reference. (& probably should have been escaped as &.)
What is weird, in my code I use $amp;:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Noto+Sans%7COpen+Sans:400,600,700%7COswald&subset=latin,latin-ext" >
I read a lot of articles, support topics, but I can't find the solution. Someone knows the solution?
I put your link in the online W3C validator as follow and it passes. You may need to put more code for us to check it.
<!doctype html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="//fonts.googleapis.comcss?family=Noto+Sans%7COpen+Sans:400,600,700%7COswald&subset=latin,latin-ext" >
</head>
<body>
</body>
</html>
And make sure your link tag is in the header section.
This was asked before, but it wasn't clear what the solution was, so I'm asking now. I have written an HTML5 page that is not only showing the element in the bar (as, of course, it should) but also in the first line of the web page. WTH? I have never encountered this problem before and it's completely baffling. What have I done wrong? Any help would be appreciated. My code is below and I've stripped it down to the bare minimum so as to pinpoint the issue.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MBSeacott.com</title>
<link rel="stylesheet" href="css/fullscreenimg.css" type="text/css" />
<link rel="stylesheet" href="css/mainstyle.css" type="text/css" />
</head>
<body></body>
</html>
Thanks in advance,
MB
Maybe you have set display:block for the title element? E.g., with * {display:block;} (resp. something other than none).
If so, then you could overwrite it, e.g., with title {display:none;}. Or, to make sure that no other childs of the head element may appear in the future: head {display:none;}.
use:
body * {}
instead of
* {}
I'm completely new at HTML/CSS.
I'm currently using a Mac and I don't know how to link HTML/CSS files in Komodo. Oddly enough, I cannot find anything online that explains how. Is there any one who can explain in DETAIL how to go about doing so?
You link a CSS file with a <link> tag in the <head> of your HTML file:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
You can find more information from the HTML Dog: Applying CSS article.