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!
Related
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.
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;
}
I'm having an issue setting my text color. I want to set the h1 element to #513271 but it doesn't seem to want to work. Below is my current code and below that are several solutions I've tried that also did not work.
My CSS is saved as stylesheet.css & it is in the same folder as my HTML (which is tributePage.html).
jumbotron h1 {
color: #513271;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="\stylesheet.css" rel="stylesheet" />
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
I have also tried the following solutions. I have literally tried all of these by themselves, in various combinations, etc.
Change the CSS file path
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\stylesheet.css
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\
\stylesheet.css (I've used \ through \\\)
stylesheet.css\
Change the external CSS link style (no spaces between side carets, just included them so this would print below)
< link href="stylesheet.css" rel="stylesheet" type="text/css"/ >
< link href="stylesheet.css" rel="stylesheet" >
Change the h1 element name in CSS
h1, #h1, .h1
jumbotron h1, #jumbotron h1, .jumbotron h1
jumbotron-h1, #jumbotron-h1, .jumbotron-h1
purple text, #purple text, .purple text
purple-text, #purple-text, .purple-text
Change the font color with an inline element
< h1 style="color:purple;" class="text-center" >Hey now, hey now.< /h1 > Now, oddly enough, THIS will turn the title purple.
Thanks so much for your help!
For your CSS what you want is
.jumbotron h1 {
color: #513271;
}
Note the period before jumbotron to indicate it's a class
I hope my answer help you:
This is your original code:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
You cannot have a div element outside the body tag.
You need to include the link to css file in the head tag. Fix your code like this:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now.</h1>
</div>
</div>
</body>
</html>
You can see that in your css file you declare a 'jumbotron h1', but in your HTML code jumbotron appear to be a class, and to style a class in external css file you need to a dot (.) before the class name. Your css need to look like this:
.jumbotron h1 {
color: #513271;
}
Hope this help.
Your tag is not properly placed nor your external css tag is missing.
and
the class is not used for styling (except if you used bootstrap).
Here is the correct one:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" href="dir/style.css" > <!-- put the external css link here -->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now</h1>
</div>
</div>
</body>
</html>
CSS:
jumbotron h1 {
color: #513271;
text-align: center;
}
I recommend you to practice doing external css files instead of inline/internal.
I had a similar problem where my stylesheet was not being reflected in my HTML doc. I finally figured out that my .css file was actually a .css.txt file. "mystyle.css.txt".
In any directory on your computer (I used the one the html/css files were in) click view at the top, then options. Select the view tab, then uncheck the option "Hide extensions for known file types". When this was unchecked i was able to delete the .txt extension from the .css file and it became a true .css file and reflected in my .html doc perfectly.
I'm having trouble figuring out why the site I'm making is rendering so small on the mobile. In order to figure out why, I've managed to replicate the problem with this very short html:
<html>
<body>
<div style="font-size: 14px">
No look behind the back catch
</div>
</body>
</html>
You can see the live version of that HTML here. This is how that example is rendered on my iPhone. This is how the same phrase ("No look behind the back catch") is rendered with the same font-size, except in a different site, Reddit. Why is my HTML rendered so small on mobile phones?
You need to add a viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This goes in the head of the document:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="font-size: 14px">
No look behind the back catch
</div>
</body>
</html>
this is my first time posting. I apologize if this is a basic question but I am having the hardest time wrapping my head around what I could possibly be doing wrong.
So, I am trying to do something extremely basic. I simply want to stretch an image as the background for the body.
Here is my CSS.
body {
margin: 0;
background-image: url('../images/background.jpg');
background-attachment:fixed;
background-size:cover;
background-position:center;
position:relative;
color: #fff;
font-family: Calibri, sans-serif;
font-size: 100%;
line-height: 1.5em;
}
Pretty simple. Now, when I pull any image off the internet and insert it in the URL for the background-image, it works perfectly fine. However, whenever I try using a local image, it doesn't work.
On this site I'm trying to make (for an assignment), I have the main folder with the index.php, then three sub-folders: css, js, and images. Obviously, I put the background image in the images folder. However, I have also tried moving the background,jpg to the css folder and simply putting in "background.jpg" and that does not work either.
Oh, and the image definitely works, as far as I know.
What am I doing wrong???
EDIT: here is my HTML for reference. I'm pretty much making an instant messaging box that connects to a mySQL server.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title> My Shoutbox Project </title>
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
<script src="js/shoutbox.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>My Shoutbox</h1>
</header>
<div id="shouts">
<ul>
<li>foobar</li>
</ul>
</div>
<footer>
<form>
<label for="name">Name </label>
<input type="text" id="name" maxlength="20">
<label for="shout">Shout Text </label>
<input type="text" id="shout" maxlength="140">
<input type="submit" id="submit" value="SHOUT!">
</form>
</footer>
</div> <!-- close container -->
</body>
</html>
There's a lot more code, since I am running some PHP (to be honest, I don't quite understand the PHP at all... I'm slowly figuring this out.)
I copied hand pasted your code into my environment and it worked with out issue.
My file arrangement:
http://localhost/shoutbox.html
http://localhost/css/main.css
http://localhost/images/background.jpg
If you have this arrangement
http://localhost/shoutbox/shoutbox.html
http://localhost/css/main.css
http://localhost/images/background.jpg
you need to change
<link rel="stylesheet" href="../css/main.css">
to
<link rel="stylesheet" href="/css/main.css">
(the single / tells it to go to the top level) or move images and css folders into shoutbox folder.
(Note, I am making some assumptions since I cannot see your full file structure)