My html elements have the CSS classes, I can clearly see them when I inspect elements in the browser (F12) but there are no style changes.
This is my reference to my css page:
<link href="MyCSSPage.css" rel="stylesheet" type="text/css" />
And this is my actual CSS page:
.rightMargin {
margin-right: 30px;
border-radius: 3px;
margin-bottom: 14px;
}
And my html element looks like this:
<asp:TextBox ID="txtUsername" runat="server" Height="50px" Width="300px" CssClass="rightMargin" />
The strange thing is, when I had the CSS right on my aspx page with the style tags around it, it all worked. Any ideas?
Here's how the code appears in the DOM explorer:
<input name="txtUsername" type="text" id="txtUsername" class="rightMargin" style="height:50px;width:300px;">
.rightMargin {
margin-right: 30px;
border-radius: 3px;
margin-bottom: 14px;
}
<input name="txtUsername" type="text" id="txtUsername" class="rightMargin" style="height:50px;width:300px;" />
I had the same situation. In the inspector I saw the class being added by an event listener, but the style attached to it was not visible on the page.
I had the following code:
div {
style: working;}}
div.highlight {
style: not-working;}
As you can see, I had an unwanted } at the end of the first block, left by accident, so the second block was ignored by the browser.
As I was searching through SO, I saw many questions related to similar problems by various reasons. I hope my answer helps someone in the future.
Related
this is very basic code as I'm still a beginner, I'm having trouble getting it to load into Chrome via Brackets on OSX.
When I load the file locally it displays everything but the CSS is not loading, everything else is functioning properly.
My troubleshooting so far:
index.html and my tutoringservices.html are in the same directory as style.css.
I've saved and restarted my computer to make sure it wasn't a refresh issue
Cleared Chrome's cache to make sure the CSS was being loaded properly
I've copypasted CSS code from w3schools.com and other basic websites to make sure the basic code would function properly. I removed everything but the .button styling, as that's what I was originally trying to troubleshoot, not so much the font import.
I don't know how open Firefox thru Brackets so I have not loaded Firebug.
I have not yet linked the CSS to my index.html as in theory it should work on tutoringservices.html anyhow. Here's my code:
tutoringservices.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact</title>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
</head>
<body>
<header>
Home
</header>
<main>
<h1>Get in Touch</h1>
<hr>
<p>
Thank you for your interest. Inquiries usually receive a response within 24 hours.
<br>If you do not receieve a timely response, please feel free to send another!</p>
<form class="contact-form" action="contactform.php" method="post">
<input type="text" name="name" placeholder="Full name">
<br><br>
<input type="text" name="mail" placeholder="Your E-Mail">
<br><br>
<input type="text" name="phone" placeholder="Phone Number (optional)">
<br><br>
<input type="text" name="subject" placeholder="Subject">
<br><br>
<textarea name="message" placeholder="Message"></textarea>
<br><br>
<button type="submit" name="submit">SEND</button>
</form>
</main>
</body>
</html>
style.css
#charset "UTF-8";
.paragraph {
font-size: 50px;
line-height: 62px;
font-family: 'Amatic SC', cursive;
}
font-family: 'Amatic SC', cursive;
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Be happy to answer any additional questions, thanks for your time.
The .name in the css file indicates it is styling a class, but the classes are not used in the HTML file. So .button means it styles the button class instead of the button element.
Two options:
Style the element instead of the class by removing the dot
Add the class to the css file, for example on the button:
<button class="button" type="submit" name="submit">SEND</button>
Use classes in your HTML code. In your CSS you use, for example, .paragraph - so use it in HTML as well: <p class="paragraph">, and the same for button.
Second issue is a little bit more tricky to spot, but easier to fix. You have a wayward CSS declaration outside of any selector in your style.css file, on line 9. Simply remove it:
font-family: 'Amatic SC', cursive;
Do those two fixes and you will be golden.
Ok the problem as I see it (assuming the directory of css file is correct), is that your referring in your css code the classes ".paragraph" and ".button" which do not exist in your html code. When you refer in css to some part of html, you do it as follows:
for id ex:
html
<div id="my_id">
css
#my_id{}
- "." for class
html
`<div class="my_id">`
css
`.my_id{}`
- just the tag name for the tag itself
html
`<div>`
css
`div {}`
you must be careful when referring by tag names.
You man not need the ./ if it is in the same directory in the href="style.css". When it comes to the paragraph and button, your css is referring to them as classes by adding a "." before them. If you just want to call them by html tag
p {
// put style for all paragraph tags here
}
button {
// put styling for all buttons here
}
I have a .jsp file that we use as a login page at https://com-bb-dev.com.edu and in that file it has a few lines laying out some links/buttons and a live chat button.
<h2><center>Accessibility Options</center></h2>
<ul>
<access class="access">
<img src="/images/ci/ng/fonts.gif" alt="" />
<a href="#" title="Change Text Size"
onClick="page.showChangeTextSizeHelp()">Change Text Size</a>
</access>
<access class="access">
<img src="/images/ci/ng/contrast.gif" alt="" />
High Contrast Setting
</li>
</access>
</ul>
<div id="parature">
<parature>
<a id="b2b8839e-6318-4c34-9863-9071b06192f3" href="javascript:void(0);" onclick="return launchChatWindow('http://com.parature.com/ics/support/default.asp?deptID=15028&task=chat&deploymentId=b2b8839e-6318-4c34-9863-9071b06192f3');"></a>
<script src="http://com.parature.com/ics/csrchat/inc/chatDeployment.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = createDplOnLoadDelegate('b2b8839e-6318-4c34-9863-9071b06192f3', 'com.parature.com', 15026, 15028, window.onload, true);
</script>
</parature>
</div>
Up within that same file I have declared some separate styles so that I can modify them without affecting anything else that is in the same . Here is what I declared:
parature
{
float: right;
margin-right: 18px;
position: relative;
bottom: 30px;
width: 138px;
}
access
{
display: inline-block;
margin: 0px -4px 6px;
font-size: 125%;
padding-left: 24px;
}
Of course, this works fine and the buttons and links display properly in Firefox and Chrome. And to my horrid dismay it does not work in IE8. You'll see that the button is treated as a direct down-the-line item and that the two links under accessibility options to not take on any CSS formatting. Is it because they are using styles that I declared locally in the .jsp page? I've already had to go back and discover that the ancient fossil didn't support transparency so that was fun to discover and fix. This is what I've tried so far:
parature
{
float:right;
width: 138px;
}
Because I read that floats don't work if the div doesn't have a width. Not sure what to look for. The IE8 developer pane is a total nightmare.
Thanks.
You are attempting to use custom elements, which you shouldn't be doing, but IE, specifically, will not style any elements it is not aware of. That would include every non-standard element you are attempting to use now.
This can be done using javascript. Google for "html5shim" for an example of how IE is updated to accept HTML5 elements.
EDIT: In addition, the elements you are using inside the ul are invalid since ul can only contain li elements.
There's no opening tag for the li. That could be the problem. If not, you might try using an inline-block on the parature class just to see if the block will render on the page.
When I write something like:
<table style="margin-left: 30px;" >
</table>
or:
<div style="margin-left: 30px;">
<h:commandButton value="add" action="a"></h:commandButton>
<h:commandButton value="cancel" action="b" immediate="true"></h:commandButton>
</div>
The margin shows up properly.
But when I write:
<table class="marg" >
</table>
or:
<div class="marg">
<h:commandButton value="add" action="a"></h:commandButton>
<h:commandButton value="cancel" action="b" immediate="true"></h:commandButton>
</div>
With this rule:
.marg {
margin-left: 50px;
margin-top: 30px;
}
HTML generated code:
<table class="marg">
</table>
<div class="marg">
<input id="j_id1109917403_4227fec1:j_id1109917403_4227feb3" type="submit" value="add" name="j_id1109917403_4227fec1:j_id1109917403_4227feb3">
<input id="j_id1109917403_4227fec1:j_id1109917403_4227feae" type="submit" value="cancel" name="j_id1109917403_4227fec1:j_id1109917403_4227feae">
</div>
The table and button display without margin. Why ?
Test if the CSS rule is applied by adding a background-color:
.marg {
margin-left: 50px;
margin-top: 30px;
background-color: pink;
}
If yes, then add !important to your existing instruction for testing purpose:
.marg {
margin-left: 50px !important;
margin-top: 30px !important;
background-color: pink;
}
Look in Firebug/Inspector which rules are applied; if there are many declarations, which one has an !important modifier or has more specificity than others or comes last and is finally applied.
Is your CSS applied? Does !important change something? What do you see in Firebug? Come back with a fiddle (without CSS reset!) if you still have a problem: HTML and CSS code can help us to understand your problem; back-end code that generates HTML doesn't
Oh, please sorry, it was my very stupid mistake. I forget to add in HTML :
<link rel="stylesheet" type="text/css" href="style/myCSS.css" media="all" />
I thought that I added it.
The .marg css class has margin-left set to 50px unlike inside the attributes which is set to 30px.
I've been working on some forms, and I'm not sure how to customize them.
This solution seems to work, but in my case the properties are simply applied to the area around the form rather than the form itself.
CSS:
.Forms{
position:relative;
top:100px;
background-color:#666;
font-family:'Unica One';
font-weight:500;
}
HTML:
<form action="" method="post" class="Forms" id="Form1">
<input type="submit" value="Email Zoltan (Financial Manager, Director)" />
<input type="hidden" name="button_pressed" value="1" />
</form>
The CSS code sets properties on the form element. Apparently you want to apply some of them to the input button instead, so you need to break the rule into two rules:
<!doctype html>
<link href='http://fonts.googleapis.com/css?family=Unica+One'
rel='stylesheet'>
<style>
.Forms {
position: relative;
top: 100px;
}
.Forms input[type=submit] {
background-color: #666;
font-family: 'Unica One';
}
</style>
<form action="" method="post" class="Forms" id="Form1">
<input type="submit" value="Email Zoltan (Financial Manager, Director)" />
<input type="hidden" name="button_pressed" value="1" />
</form>
I presume Unica One is meant to refer to a Google font with that name. In that case, do not set font-weight, since that font exists as normal (400) typeface only. If you try to set the weight to 500, most browsers ignore it but some may apply algorithmic bolding, which produces questionable results.
Note that setting the background color changes the basic rendering too: the default button, usually with rounded corners in modern browsers, turns to a rectangular box with a bit odd border. You can change this by setting various border properties (including border-radius) on the input element. The point is that buttons have built-in rendering in browsers, but if you set certain crucial CSS properties, this rendering changes to something different, and you should consider setting different other properties as well, when relevant.
P.S. The button becomes almost illegible, due to insufficient color contrast mostly, and Unica One isn’t really suitable for use like this.
try this give css to the form input submit button as said by scott
form.Forms input[type="submit"]{
position:relative;
top:100px;
background-color:#666;
font-family:'Unica One';
font-weight:500;
}
How can I change the font size of text inside the textbox in html.
For a <input type='text'> element:
input { font-size: 18px; }
or for a <textarea>:
textarea { font-size: 18px; }
or for a <select>:
select { font-size: 18px; }
you get the drift.
To actually do it in HTML with inline CSS (not with an external CSS style sheet)
<input type="text" style="font-size: 44pt">
A lot of people would consider putting the style right into the html like this to be poor form. However, I frequently make extreeemly simple web pages for my own use that don't even have a <html> or <body> tag, and such is appropriate there.
Here are some ways to edit the text and the size of the box:
rows="insertNumber"
cols="insertNumber"
style="font-size:12pt"
Example:
<textarea rows="5" cols="30" style="font-size: 12pt" id="myText">Enter
Text Here</textarea>