External and internal CSS styles at the same time? - html

I working with images at this moment, in my html document. A don't want, that adjust image width for each img element, so I made separated class (for e. thumbnail) for img tag in my style.css, but that doesn't works. Then I'd created style in my head tag, and placed the thumbnail class in there. That works, but now my style.css doesn't works at all. What I should do?
EDIT:
Working example:
index.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.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<a href="#">
<img src="plug.png" class="thumbnail">
</a>
</div>
</div>
</div>
</body>
</html>
style.css:
body{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.thumbnail{
width: 30px;
height: auto;
}

link should have a href instead of src
<link rel="stylesheet" type="text/css" href="style.css">

Related

Resize logo image

So I have a probably really dumb question but I'm very new to coding.
I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing in CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<div class="header">
<img class="logo" src="images/logo.png" alt="\Stuff logo">
</div>
These are the only lines I have in my CSS file:
body {
margin: 0 auto;
}
.logo {
max-width: 20%;
max-height: 20%;
}
img{
display:block;
margin:0 auto;
width:10%;
}
<!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.0" />
<title>Document</title>
</head>
<body>
<div class="header">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
</body>
</html>

Website not using imported Google Font locally but working in codepen

I have a test site that I'm making it doesn't use the imported font or the backup font. The strange thing is that while it doesn't change the font locally, putting the code into codepen works just fine.
In case you're wondering, I have all of my files in the right places (see image)
Also, here's the codepen link for my source code and it's also here below:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="description" content="Test Page" />
<meta name="author" content="test Page" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" ref="stylesheet">
</head>
<body>
<section id="hero">
<div class="hero container"></div>
<div>
<h1>Test Header</h1>
Test Button
</section>
<script src="main.js"></script>
</body>
<html>
Its rel not ref for linking stylesheet
<link href="style.css" rel="stylesheet">

padding and colour not applying to body class

I have been trying to apply padding and colour to my body element and it is not applying.
I have been on this and it is not working. I am using live server for my work though, I will apply my code below for review. both the css and the html. it should also be noted that I am using SASS. Thanks
body {
font-family: 'lato', sans-serif;
font-weight: 400;
//font-size: 16px;
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<title>A7A ASSOCIATES LTD</title>
</head>
<body>
<header class="header">
<div class="header__logo-box">
<img src="img/A7A Logo.png" alt="logo" class="header__logo">
</div>
<nav></nav>
</header>
</body>
</html>
Why would you place those CSS rules after the HTML closing tag ?
anyway, here are few solutions:
put the CSS style inside css/style.css file and it shall work.
make sure the path to the CSS file is correct.
clear the browser cache and try again (CTRL+F5 for Firefox, Shift+F5 for chrome)

why does my html link with css but not my img

HTML:
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>Hello World!</h1>
<h2>A few facts about the world we live in</h2>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/640px-The_Earth_seen_from_Apollo_17.jpg" />
</body>
</html>
CSS:
img {
width: 300;
}
h1 {
font-family: Georgia;
background-color: red;
}
I have saved my html and css in the same folder. My css file is named as stylesheet.css.
I am able to edit but not through my css file which means my css file and html are linked but I somehow can't seem to edit images. Somebody help me!
the issue is your units. 300 of what? You need to add a % or px or em.
img{
width:300px;
}
Fiddle with 300px
https://jsfiddle.net/jL7Lqfv8/
Are you sure your CSS is being pulled in? Check your network tab in your browser to ensure it is. Also, try giving some units to the image width:
img {
width: 300px;
}

Background image: Does not continue in white color

First off, my website is: http://www.volunteeringnews.com
On the website I want white to continue to the bottom of the website but he is now cutting it just after the background image.
I could offcourse make my img 10000 px high but that seems to create a very big image in size.
So far I tried creating a new Div to go around the background divs but then he just goes over the background divs.
I tried z-index but that did nothing.
I tried to use the IMG from HTML and not CSS but that got my img out of line. (I have the background split in two images for the top and the main section).
I've been on it all day and hoped that someone might be able to help me out.
ps.I'm sorry if this is kind of a noob question but I am only on building websites for a few months.
Thank you!
#head{
margin:0px;
height:215px;
background-image:url(../img/background/background_01.gif);
background-repeat:no-repeat;
width:100%;
}
#mainc {
margin-top: 0px;
width:90%;
position:absolute;
background-image:url(../img/background/background_02.gif);
background-repeat:no-repeat;
min-height:100%;
add
background-color:#fff;
to your #mainc and #head as well ;)
just by adding
background-color: #FFFFFF;
to your #mainc style should do the trick
First off start by cleaning up your html which currently looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering News- All your volunteering news plus a database to look for your own advernture. - Cheap and free</title>
<link href="css/styles.css" rel="stylesheet">
<link href="wordpress\wp-content\themes\twentytwelve\style.css" rel="stylesheet">
<meta name="Volunteering" content="width=device-width, initial-scale=1.0">
</head>
<!--body-->
<body>
<div class="topnav"></div>
<header><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering Field- Volunteer direct, cheap and easy</title>
<link href="css/styles.css" rel="stylesheet">
<meta name="Volunteering" content="width=device-width, initial-scale=1.0">
<div class ="sql">
</div>
</head>
<body>
<div id="wrapper">
<img src="img/form/background.jpg" class="stretch" alt="" />
</div>
<div id="head">
<div class="logo">
<img src="img/head/logo.png">
</div>
<div class="menu-top">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering Field- Volunteer direct, cheap and easy</title>
<link href="css/styles.css" rel="stylesheet">
<meta name="Volunteering" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="navigation">
<ul id="nav" class="drop">
<li>Home</li>
You have multiple doctypes, multiple html tags, multiple head tags, multiple css declarations. This will never work properly.