this is what it looks like nowHow do you edit two labels for the same input field in CSS separately? I want to have a label above an input field that says "Nickname" and then a lower label that says "(press enter to spawn)" but I don't know how to position them like that and I also don't know how to change the size so that I can make the bottom one smaller. Any suggestions?
Something along these lines?
<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
.wrapper { width: 20em; }
</style>
</head><body>
<div class='wrapper'>
<div> Nickname: </div>
<input type="text" id="nickname" placeholder='Nickname'>
<div> (press enter to spawn) </div>
</div>
</body></html>
Related
This is sample code(HTML):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="The_secondweb.css">
<meta charset="utf-8">
<title><!-- There will be a title --></title>
</head>
<body>
<h1 class="title">Welcome to this website</h1>
</body>
</html>
This is what I did in CSS:
#title{
text-align: center;
}
Problem:
When I don't use the id attribute the text don't gets aligned to the center, but when I don't use the id attribute the code does what it should. Am I doing something wrong while using the id attribute or we cannot align the text to center using any attribute we should name the tag in CSS?
When you are using class you have to use "." whereas "#" is used in case of id.
You can also do it with inline styling in html as below:
<html>
<head>
<link rel="stylesheet" href="The_secondweb.css">
<meta charset="utf-8">
<title><!-- There will be a title --></title>
</head>
<body>
<h1 style="text-align: center;">Welcome to this website</h1>
</body>
</html>
using # in CSS is id selector
.title{
text-align: center;
}
when your use classes
I want to change my textbox size using HTML, for now I only have this as my
<!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>
<style>
body {
background-color: grey;
}
</style>
</head>
<body>
<label>Enter your question:</label><br>
<input type="text" id="myquestion" placeholder="Your question here"><br>
<button type="button" id="mybutton">Submit</button>
<script src="script.js"></script>
</body>
</html>
First of all, how do I connect my css file with my HTML file? my css file name is style.css
Second, how do I change <input type="text" id="myquestion" placeholder="Your question here"><br> size using css? I kinda wanna at least use css because for now I know nothing about css. It'll be really good if you guys can help me. Thanks!
You can load your CSS file in your HTML page by adding the following line within the <head> tag:
<link rel="stylesheet" href="style.css">
When you say you want to change the size of the input, I assume you mean you want to change its width. You can do this using:
#myquestion {
width: 400px;
}
To learn about HTML and CSS, I highly recommend going through W3Schools.
I am trying to show an Input tag of type Search. I am also using bootstrap. But when I use bootstrap.min.css, the Chrome browser no longer shows the "Clear" or [X] at the end of the box. Looks like Chrome user agent stylesheet overwriting my site style. I am not understanding why it is happening.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<label for="gsearch">Search:</label>
<input type="search" placeholder="Search anything" id="gsearch" name="gsearch">
</body>
</html>
In properties I see something like this:
Here is the fiddle link: https://jsfiddle.net/z1ujworf/1/
If I remove the line <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> , the code creates input tag with "Clear" or [X] at the right end (When we type something in the input field). But I want to use bootstrap and its styling. Is there any way to achieve it?
This happens because bootstrap (from normalize.less) overrides the default user agent styles.
You can override this from your CSS like below
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: searchfield-cancel-button !important;
}
Working sample (tested in chrome)
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance: searchfield-cancel-button !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<label for="gsearch">Search:</label>
<input type="search" placeholder="Search anything" id="gsearch" name="gsearch">
I am creating a test website with Angular, just to learn some things. First I put everything into the index.html, and this is the look I came up with:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reiche Freunde</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
</html>
I then copied this html code and entered it into the app.component.html. Back in the index.html, I changed
<body style="background-image: url('assets/geld.jpg');">
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
to
<body>
<app-root></app-root>
</body>
But then my Site started to look like this:
Where did I make the error? My app.component.css is empty, so there is nothing able to change the look of that background. I can't see any connection between the paragraph and the body itself, but the background is still relative to my dollar bill. When I put this into the app.component.css:
body {
position: absolute;
}
,then i get this:
I'm just a starter in html/css, but all the tutorials about background images changed nothing for me
Looks like you have two body tags, according to your answer ofc :)
One here (index.html) and second in app.component.html:
<body>
<app-root></app-root>
</body>
You can probably keep body into app.component.html, but you should remove it from index.html. And apply display: block; height: 100% for app-root, I suppose.
I have this following HTML5 code
<!DOCTYPE html>
<html lang="en">
<head>
<title>AUMC-Student Portal</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css2/paper.css" rel="stylesheet" media = "screen">
<link href="css2/bootstrap.css" rel="stylesheet" media = "screen">
<style>
form{
width: 300px;
margin: 0 auto;
vertical-align: middle;
padding-top: 15%;
}
</style>
</head>
<body>
<form id = "AllControls" class="Controls">
<fieldset id = "fomrControl" class = "Inputs">
<br>
<input type = "text" class = "form-control" placeholder="Username" />
<br>
<input type = "password" class = "form-control" placeholder="Password" />
<br>
<br>
<button type="submit" class="btn btn-default">Forgot</button>
<button type="submit" class="btn btn-primary">Login</button>
<br>
<fieldset/>
<form/>
</body>
</html>
I am linking two CSS file one is paper.css and other is bootstrap.css. Here's what when I apply them individually commenting the other out.
Now I want my input fields to have the look using bootstrap.css and buttons to have the look using paper.css. but when I include both CSS files it gives me an amalgam I don't want as both are affecting the input fields and the buttons.I tried changing class names in the CSS files and it worked to some extent but its painful that way to find every single line that could affect your element.Also,I know that #import in scoped styles is deprecated.
So,
Is there any way to target my input fields and buttons to use only one of these CSS files without altering the CSS files themselves ?
Try making a custom class for the buttons and then copying the css code for buttons from the paper.css file and applying it to the custom class.