So this is my first html code and I'm having trouble with the internal style of the h1 heading although I wrote body style after h1 and it works fine and i removed all the inline styles in heading. Could someone tell me where the problem is ??
<head>
<style>
h1{
color: DarkCyan !important;
border: 10px solid crimson !important;
font-family: courier !important;
text-align: center !important;
}
</style>
</head>
<body>
<h1> My First trial of a site </h1>
</body>
This is the whole code as when i ran this code snippet above it on jsfiddle it worked fine but the whole code didn't show the styling.(If it is not okay to post the whole code please tell me to delete it as I'm a newbie here.)
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>
Page title
</title>
<style> <!-- Internal CSS style-->
h1{
color: DarkCyan !important;
border: 10px solid crimson !important;
font-family: courier !important;
text-align: center !important;
}
body{
color: #8e0035;
background-color: Beige;
font-family:verdana;
}
a:link{
color:Purple;
text-decoration: transparent;
}
a:visited{
color:grey;
text-decoration: transparent;
}
a:hover{
color: green;
text-decoration: underline;
}
</style>
</head>
<body>
<h1> My First trial of a site </h1>
<hr>
<p title = "Hover over the paragraph one more time!" style="color:
black;"><a href="https://www.sololearn.com target="_blank""> This link will
take you to sololearn site <br/> with a link anchored to it </a></p>
<img src="download (6).jpg" alt="An image here">
<hr>
<pre> <!-- font family in body doean't apply here -->
The preformatted tag
will preserve line breaks and spaces.
</pre>
<hr>
<!-- Formatting of text -->
<h3>Formatting of text:</h3>
<ul>
<li><b>Bold</b></li>
<li><strong>Strong</strong></li>
<li><i>Italic</i></li>
<li><em>Emphasized</em></li>
<li><mark>Marked</mark></li>
<li><small>Small</small></li>
<li><del>Deleted</del></li>
<li><ins>Inserted</ins></li>
<li><sub>Subscrpted</sub>text</li>
<li><sup>Superscripted</sup>text</li>
</ul>
<hr>
<h3>Quotations forms:</h3>
<p><ins>Small Quote:</ins><q>This one here with double quotes</q></p>
<p><ins>Block quote:</ins><blockquote>This is a large quote with
indentation</blockquote></p>
<p>This word here "<abbr title="Laughing Out Loud">LOL</abbr>" is written
using abbreviation. </p>
<p><bdo dir="rtl">This text will be written from right to left.</bdo>(Bi-
directional override)</p>
<p style="border: 1px solid crimson;"> This is a bordered Paragraph. </p>
<!--Inline CSS style-->
</body>
</html>
comments in css use of /* */ no <!-- -->.
Change :
<style> <!-- Internal CSS style-->
To:
<style> /* Internal CSS style */
what browser are you trying to open your code in and what application are you using to edit your code?
That should work fine but try adding this -
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: DarkCyan !important;
border: 10px solid crimson !important;
font-family: courier !important;
text-align: center !important;
}
</style>
</head>
<body>
<h1> My First trial of a site </h1>
</body>
</html>
Well, this code works in js fiddle see:
https://jsfiddle.net/5ue1p3or/
<head>
<style>
h1{
color: DarkCyan !important;
border: 10px solid crimson !important;
font-family: courier !important;
text-align: center !important;
}
</style>
</head>
<body>
<h1> My First trial of a site </h1>
</body>
However you should use external css file for styling and try not use !important when you are not force to, as there are some basics rules to follow.
Also always remember to put doctype declaration and remember to refresh your browser after changing in css files.
Related
I'm attempting to break my html into separate php files and have an error I can't seem to crack. Here is the first file, index.php
.topheader {
background-color: #404040;
color: white;
padding: 16px;
}
.footer {
background-color: #404040;
color: white;
padding: 16px;
}
<head>
<link rel="stylesheet" href="./css/main.css">
</head>
<div class="topheader">
<h1>KivaGIS</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
As of right now, only .topheader is applying to the html. I understand that both classes are identical, I plan to expand on each once I confirm they are applying individually. Can someone please take a look and advise why .footer wouldn't be applying to the sheet?
Here is a sample of the output on my machine
Seems working for me, .topheader and .footer having different styles
.topheader {
background-color: #404040;
color: blue;
padding: 16px;
}
.footer {
background-color: #404040;
color: red;
padding: 16px;
}
<head>
<link rel="stylesheet" href="./css/main.css">
</head>
<div class="topheader">
<h1>I AM BLUE</h1>
</div>
<br>
<div class="footer">
<h1>I AM RED</h1>
</div>
This is Applying to your file, both .topheader and .footer class contain same style. just change the style values, you can see the difference
.topheader {
background-color: #404040;
color: white;
padding:16px;
}
.footer {
background-color: #FFEE00;
color: Red;
padding:16px;
}
Check this code once and in your code check once href of your stylesheet.
<!DOCTYPE html>
<html>
<head>
<style>
.topheader {background-color: #404040;color: white;padding:16px;}
.footer {background-color: #404040;color: white;padding:16px;}
</style>
</head>
<body>
<div class="topheader">
<h1>KivaGIS</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
</body>
As many on here pointed out, the code itself was fine. I did not realize that Chrome would cache the CSS file. I've spent all night updating the file without seeing any changes because Chrome was using an older version.
As you can see from the attached screencap, I disabled the cache and everything is working perfectly now.
I want to line it up clearly but I just can't. What should I do for it?
<html>
<head>
<style type="text/css">
.article-topic-list a {
color: black;
text-decoration: none;
margin-left: 15px;
margin-top: 20px;
}`enter code here`
</style>
</head>
<body>
<div class="article-topic-list"> Sale of Kodi TV boxes faces <br> legal test </div>
<div class="article-topic-list"> Piracy fighters battle Kodi 'epidemic'</div>
</body>
</html>
To get the results you're asking for, designwise, you'll have to move the margin-styles to the div, and keep the color and text-decoration on your a-tag. If you simply remove the 'a' from the style tag, you won't get any color or text-decoration changes, since the style from the browser (directly on a), would take precedence.
.article-topic-list {
margin-left: 15px;
margin-top: 20px;
}
.article-topic-list a {
color: black;
text-decoration: none;
}
<body>
<div class="article-topic-list">
Sale of Kodi TV boxes faces <br> legal test
</div>
<div class="article-topic-list">
Piracy fighters battle Kodi 'epidemic'
</div>
</body>
See this example.
Instead of applying the css rule to the tag, if you apply the rule to the entire div, i believe it should line up correctly. Your style script would be like this:
<style type="text/css">
.article-topic-list {
color: black;
text-decoration: none;
margin-left: 15px;
margin-top: 20px;
}
</style>
And the output would be something like this.
I am trying to create a resizable html page that mimics the java applet clock layout and am not sure if I am approaching this in the right way. This 3 clock picture below is what I am trying to create now. Currently I used div, margins, padding to lay out a 1 clock using css but since the font-size are all different per line I am used the vmin font to handle the auto-resizing; but with mixed results. I have being looking online for a tutorial or examples that would address how to do this problem without success since the examples are resizing text paragraphs that are the same font-size throughout or images.
Does anyone know of a tutorial site or example that addresses this type of problem? Maybe I should be doing this using canvas or something instead of div tags. Thanks.
This was my 1 clock page (minus all the css stuff):
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="AOS/LOS Clock" />
<title>AOS/LOS Clock</title>
<link rel="stylesheet" type="text/css" href="css/mc_style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type=\"text/javascript\" src=\"js/mc_clocks.js?color=00ff00&file=input/aos_times_json;\"></script>
<script type="text/javascript" src="js/mc_engine.js"></script>
</head>
<body id="body">
<div id="wrapper">
<div id="clockAOS" class="clock missionColor"></div>
<div class="title missionColor"><span>Acquisition of Signal</span></div>
<div id="relay" class="siteTdrs"></div>
<div id="clockLOS" class="clock missionColor"></div>
<div class="title missionColor"><span>Loss of Signal</span></div>
</div>
<p id="Msgs"></p>
</body>
</html>
I suggest checking out bootstrap for laying out elements on a page. You can create a simple layout easily and it will be responsive.
As far as font size goes, there is no way to show the page the same across all browsers and devices. Even using pixels which is a fairly common standard will have different results on retina displays. Read this to learn more about font sizing.
I re-read the vs font descriptions and redid my css sheet. This resizes the fonts but the negative margin-left doesn't look the same on the linux box vs. PC even though I am using the same terminal screen. Its better then before however.
<!DOCTYPE html>
<html>
<style>
body {
font-family: helvetica, arial, sans-serif;
font-weight: bold;
color: #fff;
background: #000;
margin: 2vw 10vw 2vw 10vw;
}
span {
white-space: nowrap; /* Specify that the text in element will never wrap */
}
.header {
font-size: 4vw;
font-weight: bold; /* bold font */
color: lightGray; // color for tdrs/site
}
.header-split {
display:block;
margin-left:15vw;
}
.header-split span {
display:block;
float:right;
width:30%;
}
#header-ul {
border-bottom: 3px solid lightgrey
}
#rm {
text-align: center;
margin-left:-10vw;
}
.siteTdrs {
font-size: 3vw;
font-weight: bold; /* bold font */
color: lightGray; // color for tdrs/site
}
.mission {
font-size: 4vw;
}
.clock {
font-size: 8vw;
text-align: center;
}
.terraColor {
color: #00ff00; // GREEN
}
.aquaColor {
color: #00ffff; // CYAN
}
.auraColor {
color: #ffc800; // ORANGE
}
</style>
<body>
<div id="wrapper">
<div id="header-ul"><div class="header header-split">AOS<span>LOS</span></div></div>
<div id="rm" ><span id="terraRelay" class="siteTdrs">TDE</span> <span class="mission terraColor">TERRA</span></div>
<div id="terraTime" class="clock terraColor"><span>00:00:00 00:00:00</span></div>
<div id="rm" ><span id="aquaaRelay" class="siteTdrs">SG1</span> <span class="mission aquaColor">AQUA</span></div>
<div id="aquaTime" class="clock aquaColor"><span>00:00:00 00:00:00</span></div>
<div id="rm" ><span id="auraRelay" class="siteTdrs">TDW</span> <span class="mission auraColor">AURA</span></div>
<div id="auraTime" class="clock auraColor"><span>00:00:00 00:00:00</span></div>
</div>
<p id="Msgs">this is a error</p>
</body>
</html>
Hello I am just getting started with HTML and CSS but having a weird issue.
If I use border:0; and padding:0; I still get a white space all the way around my div. I can fix the issue by doing margin:-8; but that doesn't seem right to me. I am using Dreamweaver if that matters. thanks!
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navbar">Home - Introduction - Stakeholders - Implementation Plan - Proposal - Training</div>
</body>
</html>
and the CSS:
#charset "utf-8";
#navbar {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
font-weight: bold;
text-decoration: none;
background-color: #CCC;
height: 25px;
text-align: center;
border: 1px solid #000;
margin: 0px;
}
I figured it out thanks!
Adding a body tag in my CSS and setting the margins to auto fixed this.
I have an html document which has a body with many <p>, each with their own style (see below). There is also 1 image in the document. I would like a red background to appear behind all the text and the image in the body. How can I do this please?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<br /><br />
<p style="color:rgb(0,0,0);margin: 0px;font-family: Helvetica, Helvetica;font-size:20px;">
<b>John Dow</b>
</p>
<p style="color:rgb(0,0,0);margin: 0px;font-family: Helvetica, Helvetica;font-size:20px;">
123 Street
Cape Town
8005
</p>
<img style="border:none; margin: 8px 0px 0px 0px;" src="https://s3.amazonaws.com/kruranimagestest/50CB6EA7-A5F8-43C7-A826-8DBD4DBC0DB1.jpg" alt="image">
</body>
</html>
If you want your whole website to be red, just adjust the body tag: <body style="background-color:red;">.... If you want to have a red background only behind the elements inside your body use the following style in your <head> instead:
<style>body > *{ background-color:red;}</style>
Note that you can simplify your code if you put your css rules into a global stylesheet:
body > p{
color:rgb(0,0,0);
margin: 0px;
font-family: Helvetica, Helvetica;
font-size:20px;
}
You can use CSS to add a red background to the entire body or just the image a paragraph tags.
Entire body:
<style type="text/css">
body {
background: red;
}
</style>
<p> and <img> tags only:
<style type="text/css">
p, img {
background: red;
}
</style>
Add this to where you want:
background-color:red;
It can be added to the body element to have all the page colored or to any p element to color it only.
<body style="background-color: #FF0000">
On a side note, is there reason why you are not using a CSS (.css) file?