Fonts won't change and id height wont show - html

problem 1.Fonts wont change
problem 2.Height on the "id's" wont change
problem one, is there something out of place with the font codes?
<head>
<title>Jubilee Austin Developer</title>
<link rel="stylesheet" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
</head>
problem two, Ex. this is 1 of the 3 "id's" i have. its not responding to the CSS or at least its not physically showing height change
<section id="about">
<div class="full-width">
<h2>A little bit about me</h2>
<div class="half-width">
<p> i've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism.As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
</div>
<div class="half-width">
<p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now i've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
</div>
</div>
</section>
My entire css
/****Base syles***/
body {
font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
height: 600px;
}
Entire code in case you need it for anything
http://i.stack.imgur.com/Q73h1.png
If i left anything out that you need please feel free to ask

About the height part: You won't see the height if the content is less high than the parent element and if there is no background or border. Add something like border: 1px solid red; to see the full height of your element.
#about, #work, #contact {
height: 600px;
border: 1px solid red;
}

Simply invert the order you call your styles:
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" type='text/css'>

Related

Why is <style> tag not working in this code?

So tag never seemed to like me a lot. It always caused me problems, but it was always turning out that their solution was obvious and I was just stupid. But this time, I am spending 4TH HOUR trying to figure out what could've gone wrong (this is exactly why I even named a body content div "body", IK this is unnecessary lol). Here is the code:
<!DOCTYPE html>
<!--© Copyright LightVoid Studio-->
<html style="font-family: Helvetica, Cursive; color:white;">
<head>
<meta charset="UTF-8">
<title>LightVoid Studio</title>
</head>
<style>
.body {
background-color:#1A2B30;
}
</style>
<!--break-->
<body>
<div class="body">
<strong>
<p style="position:absolute;top:100px;left:20px;font-size:40px;">Hello</p>
<p style="position:absolute;top:140px;left:20px;">This is the official LightVoid Studio
website. If You're here for the first time, let's tell Ya what We're exactly doing. LightVoid
Studio is a relatively fresh Indie game studio that develops various software, such as games for Your computer.</p>
</div>
</body>
<!--break-->
</html>`
It's because the <div class="body"> has a height of 0. It only contains absolute positioned elements, which don't take up any space, so its basically empty.
Some suggestions:
Learn to use the browser's debugger (DOM Inspector). It will show you information about the elements such as their size and applied styles.
Avoid absolute positioning. It basically breaks how CSS works which makes it difficult for beginners.
EDIT: One more thing: You have a opening <strong> tag without a closing </strong>. Keep in mind you can't put block elements (such as <p>) inside inline elements such as <strong>.
I found your mistake.
Navigate to html tag, there you can see the style attribute, with color=white.
This is making all the text white, which is same as canvas therefore it is invisible.
Now, the text tags are absolutely positioned, meaning they are outside the flow, so the height and width of the DIV is 0, so you cannot see any color because the div is essentially a 0x0 box.
I have adjusted the changes, please check:
<!DOCTYPE html>
<!--© Copyright LightVoid Studio-->
<html style="font-family: Helvetica, Cursive;">
<head>
<meta charset="UTF-8">
<title>LightVoid Studio</title>
</head>
<style>
.body {
background-color:#1A2B30;
}
</style>
<!--break-->
<body>
<div class="body">
<strong>
<p>Hello</p>
<p>This is the official LightVoid Studio
website. If You're here for the first time, let's tell Ya what We're exactly doing. LightVoid
Studio is a relatively fresh Indie game studio that develops various software, such as games for Your computer.</p>
</strong>
</div>
</body>
<!--break-->
</html>`
I don't think it's about where <style> is.
But it's your children (elements) are postition: absolute; so .body is 0 height.
Try:
<div class="body" style="height:100px">
So you I will see the problem
(This is just testing, please look at RoToRa's answer)
Because it's outside of closing </head> and opening <body>
It supposed to be between <head> and </head>

Why won´t Atom read my first segment of CSS code but reads everything below it?

I have checked the file order and closed off tags. It seems whatever I put at the top of the CSS file will not be read, however, everything below the very top segment of cod ,in this case, #tribute-info will not be applied to the HTML. If I moved #title to the top and refreshed the browser #title will not have its CSS anymore. Same situation for #img-caption.
<style>
#tribute-info{ /* <-- anything I put at the top of the file is not getting read. If I moved #img-caption here, and #tribute-info below it, #img-caption will not work. */
color: blue;
}
#img-caption{
color: red;
}
#title{
text-align: center;
color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/design.css" />
<meta charset="utf-8">
</head>
<body>
<div id="main">
<h1 id="title">History´s First Programmer</h1>
<div id="img-div">
<div class="row">
<div class="column">
<img src="images/ada_lovelace_house_emblem.jpg" alt="Ada Lovelace depicted in an emblem" id="image">
</div>
</div>
<p id="img-caption">The Mother of computer programming</p>
<div id="tribute-info">
<p>“The more I study, the more insatiable do I feel my genius for it to be.”</p>
<p>“Your best and wisest refuge from all troubles is in your science.”</p>
<p>“Mathematical science shows what is. It is the language of unseen relations between things.
But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious.”</p> <!-- this segment of code is not changing -->
</div>
<a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank" id="tribute-link">Click here to learn
more about Ada Ada_Lovelace</a>
</div>
</div>
</body>
</html>
The code works fine if you remove the <style> tag from your css file

I am coding a website, but bold and italics aren't working [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am trying to make a website (Sponge) and when I try to do bold and stuff but it just wont work!
look at it and see how annoying it is!
My code:
Hastebin
Header tags <h#> often apply font-weight: bold by default. I'm not sure why all of your text is in headers, but it probably shouldn't be.
Put the bulk of your text in paragraph <p> tags and adjust your CSS to format the paragraphs how you'd like, using:
p { /*Style goes here*/ }
Or, you can apply a class to your paragraphs to adjust their styles individually or in groups. If you're not sure how, Google a CSS tutorial.
This is just a quick edit of your code. It's not going to be perfect, but hopefully it leads you in the right direction.
<!DOCTYPE html>
<html>
<head>
<title>Sponge - Home</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
.hotbar {
background-color: #808080;
height: 20%;
width: 100%;
font-family: 'Quicksand', sans-serif;
}
.about {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<div class="hotbar" height="7%" width="100%">
<img align="left" src="http://www.spongemc.cf/home/images/logo.png" alt="logo" height="7%" width="7%">
<h1 align="center"><a style="text-decoration: none;" href="http://www.spongemc.cf/home/">Home</a></h1>
</div>
<div class="about">
<br /> <!-- Assuming all those empty header tags for for spaces - you could also use padding-top in the div or margin-top for the first h2 tag -->
<h2>What are we?<h2>
<p>We are a Minecraft server dedicated to people having fun!</p>
<p>You can have fun and play prison at <i>Sponge.minehut.gg</i>,</p>
<p>or you can play farming and Skyblock at <i>spongemc.net</i></p>
<p>Or you could just sit there doing nothing (I don't recomend this),</p>
<p>so what are you doing, <b>JOIN NOW!</b></p>
</div>
</body>
</html>

How to make an arrow character as seen in the attached image?

I'm working to reproduce a design I found, the design shows a text arrow like so:
Any idea how to make that arrow? The obvious > looks wrong:
It looks like your designer used chevron-right from Font Awesome. You can install it by adding a stylesheet from the Font Awesome CDN like I've done below or through any of the other setup options. Then, you can reference the icon on the page by copying the icon code that the Font Awesome documentation supplies you with.
Here's a demo where I've tried to recreate your image:
:root {
background-color: #22272A;
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: #BCBDBD;
}
.fa-chevron-right {
margin-left: 6px;
}
HIKING <span class="fas fa-chevron-right"></span>
<!-- External Libraries -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
In production code, you may want to choose a different installation method for performance considerations that takes into account your page's needs - for example, choosing to import SVGs with JavaScript if you don't have a very large number of icons to display.
Try http://fontawesome.io
They have lots of icons - Search for 'fa-angle-right ' on this page: http://fontawesome.io/cheatsheet
Otherwise, you can use a png or an svg.
<!DOCTYPE html>
<html>
<style>
body {
font-size: 20px;
}
</style>
<body>
<p>I will display ❯</p>
<p>I will display ❯</p>
</body>
</html>

Behaviour of margin of h1 tag

I have index.html which looks like follows:-
html {
background-color: #0000FF;
}
body{
background-color: #FF0000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Mozilla is cool</h1>
<img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">
<div style="height: 100px; width: 100px;"></div>
<p>At Mozilla, we’re a global community of</p>
<ul> <!-- changed to list in the tutorial -->
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Read the <!--a href="https://www.mozilla.org/en-US/about/manifesto/"--><span>Mozilla Manifesto</span><!--/a--> to learn even more about the values and principles that guide the pursuit of our mission.</p>
</body>
</html>
Initially the margin of h1 is with the window and there is some extra space above body element. But if i add border: 1px solid black to my body element the margin of h1 is with body element.
Why is this so? The border of body element was present even before but we were not just displaying it right?
You can use box-sizing: border-box;
Many browsers have a default user agent stylesheet which automatically adds some styles - even if you haven't specified any.
For example, in chrome, i can see that the h1 will be given a slight margin-before and margin-end which would give you the gap between the body and H1.
You can override this default style-sheet by using one of many reset style-sheets example here
User agent stylesheets will be overridden by any other styles in the following order:
Browser/user default
External
Internal (inside the tag)
Inline (inside an HTML
element)
It may also be worth reading up on css specificity as it explains a lot of simple problems you may come across