Hello I am so sorry if this is a stupidly simple question but I am extremely new to html and css. The issue is I am trying to just add style to the div classes I have made in html and css seems to not recognize the file.
.main-content {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="second.css">
</head>
<body>
<div class="site">
<header class="masthead">
</header>
<h1 class="page-title">Hello
</h1>
<main class="main-content">
</main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div> <!-- .site -->
</body>
</html>
I have tried on both firefox and chrome so it does not seem to be an issue of using an outdated browser. Also copy and pasting the code into codepen.io also yields the same results. The only way I can style is by selecting general elements such as h1. I've also double checked to make sure first.html and second.css are indeed the correct file names.
Any suggestions as to what I am missing? If its something very simple could I also get some advice so that I don't go about asking a ton of really simple questions like this.
As you don't have content inside your main tag, the styling is not visible. Add some content to it and you will see the styles which you have applied.
And also you mentioned that you want to style your div and I see only one. You can style it as follows using its class name.
.site {
background-color: red;
}
Related
So, I'm currently learning #html & #css and I'm on the topic of relational selectors.
In the example, the code below is suppose to display a web page with orange text. The
text is still black even after trying several variations. Can someone help?
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">
<title>Document</title>
</head>
<body>
<section id="products">
<p>Lorem ipsum dolor sit.</p>
</section>
</body>
</html>
styles.css
body {
margin: 10px;
}
#products p {
color: orange;
}
It works just fine,but you have to link the css file using tag
<link rel="stylesheet" href="style.css">
You have to connect your CSS file to the HTML by linking to it in the <head>, like so:
<link rel="stylesheet" href="./style.css" />
(and if the CSS file is in a folder, it will be ./foldername/style.css)
There are three ways you can implement style to HTML documents:
External CSS
Internal CSS
Inline CSS
You could include your style code in the document (Internal CSS). To do so you would need to enclose it in style tags like this:
<style>
body {
margin: 10px;
}
#products p {
color: orange;
}
</style>
Hide that element in your , or at the end of your , and you should be fine. Generally, it's frowned upon to use Internal or Inline CSS, but you can do if you want to!
I'm just starting out with HTML and CSS and I can't figure out why my CSS won't link to my HTML template.
Index.html and style.css are in the same folder currently, and the css works fine when it's internal. Am I missing something obvious?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
header
<div class="header-right">
<a class="active" href="#home">Home</a>
Contact
About
test
</div>
</div>
{% block content %}{% endblock %}
<h5>footer</h5>
</body>
</html>
Edit: the problem seems to be some sort of compatibility issue. In safari a selected my own style sheet in preferences and it worked properly (I couldn't figure out how to do it in chrome). This doesn't seem like a permanent solution though?
you can try with putting the path of the file by using "./path" and see if it works also check whether your webserver takes your css files as text as you have given type as text/css.
Okay so I'm 100% new to programming. The question format may also be wrong.
The Question: theme on html?
Still beginner on html. wanted it to look aesthetically pleasing to my eyes at least with what I've learnt. No CSS knowledge yet. I've been little bit searching whatever i feel like putting on my page(emojis).
I've searched Google and did what was written but it still doesn't display the theme.
Okay so here's the code so you can see, will add more things later as i learn(I know it's nothing for you all):
<html>
<head>
<meta charset=“UTF-8”>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f7cac9">
<title>Galaxia
</title>
</head>
<body>
<h3 style = "position:absolute; right:150px; top:-10px; background-color:pink;">
Welcome to my weird abode 🦋
</h3>
<br>
<br>
<!-- added two br tags because otherwise heading and paragraph overlap -->
<div class="coder">
<p>This is a html example from me for now,
<br>
have fun.:) </p>
</div>
</body>
</html>
Thank you in advance!
In order to add styles to your HTML page, you use css (with the file extension .css -- for example styles.css). To make the styles visible on your html page, in the head section you would include <link rel="stylesheet" href="styles.css"/>. For instance, in the css file, you could include:
h3 {
color: #f7cac9;
}
Then, after adding the link rel, the h3 elements in your html page would be pink. Hope this helps! Alternatively, you could add tags in your html page.
Here's an example of adding css to an html page. By adding .coder {background: green}, the background-color turns green:
.coder {
background-color: green;
}
<html>
<head>
<meta charset=“UTF-8”>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f7cac9">
<title>Galaxia
</title>
</head>
<body>
<h3 style = "position:absolute; right:150px; top:-10px; background-color:pink;">
Welcome to my weird abode 🦋
</h3>
<br>
<br>
<!-- added two br tags because otherwise heading and paragraph overlap -->
<div class="coder">
<p>This is a html example from me for now,
<br>
have fun.:) </p>
</div>
</body>
</html>
Like the other guys posts.
HTML - is a markup language. You will say for the browser: Hey this is a paragraph ... <p>This is a paragraph</p>
CSS - You will make things looks nicer. You can change all the colors, backgrounds, fonts, sizes, margins...
One place to find a quick tutorial and it is also a good place to know is w3schools.com.
It is famous and a lot of people use it.
I hope that you keep pushing.
The first step is the hardest one!
So I'm trying to make a pure CSS3 autoplaying image slider on a web page project I'm doing. So the HTML of the page looks like this:
https://pastebin.com/c0ZiyHGd
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Joelson Querub</title>
</head>
<body>
<header>
<nav>
Portfolio
Sobre
Loja
</nav>
</header>
<main>
<div id="pinto">
<h1>Joelson Querub</h1>
<div id="images">
<img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=92b82a18bf4bfbdfe1bd7eed8cd4ba49&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71d59cd22de21da8d2939bc203617983&auto=format&fit=crop&w=1560&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e79d1986f31127432328ba0b78f0b510&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1529088363398-8efc64a0eb95?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=179403fa836a063432aec8ccc04ee248&auto=format&fit=crop&w=424&q=80"
alt="Pug Fofoso">
</div>
</div>
</main>
</body>
</html>
So what I want is to only one pug image appear at a time, and to make them automatically slide leftwards. The size is important, and the current size is the one I want. Also, notice that there is a text overlaying the image. That text must stay there. I would like to do a smooth slide that is infinite, but that doesn't do that subtle return to the first image.
I tried my luck with some CSS but it din't go very far. You guys can take a look:
https://pastebin.com/S2UZ4uK2
Or for an easier way to see it all:
https://codepen.io/anon/pen/OwWgoX
Though CodePen messes up with the text positioning.
You can use wowslider. Wowslider . Just download the software. You can easily add any picture and also any kind of sliding transformation.
I am having trouble using the first- and last-child pseudo classes in my Bootstrap/Sass code. Basically, I am looking to create a whole bunch of blank space above/below the first and last header only. Compass is running, and it's not giving me an error, but when I hard refresh my page in the browser nothing changes. Here is my code, CSS first:
$headings-small-color: black;
#import "bootstrap-compass";
#import "bootstrap-variables";
#import "bootstrap";
h1 {
font-family: 'Almendra SC', serif;
}
h1:first-child, h1:last-child {
margin-top: 200 px;
}
small {
font-family: 'Fanwood text', serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cat Graveyard</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="stylesheets/styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Fanwood+Text|Almendra+SC' rel='stylesheet' type='text/css'>
</head>
<body>
<img src="Cat_graveyard_cover2.jpg" class="img-responsive" alt="Cover image">
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-md-offset-2">
<h1>Here Lieth <small>the poor victims of two notorious whiskered criminals.</small></h1>
<h1>Warning: <small>Graphic images of mangled inanimate objects below.</small></h1>
<h1>Viewer Discretion <small> is advised for sensitive stuffed animals.</small></h1>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I do realize that the more appropriate "Sassy" way would be to use a variable for these pseudo classes (and if you would like to give me an example, that'd be okay with me!), but right now my goal is just to get it to work.
I'm assuming my issue has to do with specificity re: Bootstrap. I'm at a loss of how to fix this, however. In the CSS generated by Compass, the CSS I wrote for the pseudo classes appear last. But, when I "inspect element" in the browser it shows the bootstrap CSS overriding the CSS I wrote.
IDK what to do at this point, any insight would be greatly appreciated!
Just a little typo
h1:first-child, h1:last-child {
margin-top: 200 px;
}
should be
h1:first-child, h1:last-child {
margin-top: 200px;
}