Home
Read Here
I made four labels in my HTML code with different texts. But I don't know how to specifically pick one to style in my css file.
Unable to help fully without seeing your code but I would say apply an id="name_of_element" to each text element.
Then in you .css file use #id-name-here to apply styling to each text element individually.
#element_id_here {
color: blue;
font-weight: 600;
padding: 5px;
margin-top: 10px;
}
You can change the parameters to suite your needs but these are just an example.
Related
I have a <label> element in my ASP.NET core MVC project, that splits to multiple lines instead of showing in a single line. I've inspected the element in google chrome to see what css is being applied. It is getting it from my custom.css class. Below is my custom.css file.
body {
padding: 1em;
font-family: Arial, Arial, Helvetica, sans-serif;
}
h1{
margin-top:0;
color: navy;
}
label{
display: inline-block;
width = 50em;
padding-right: 1em;
}
div{
margin-bottom: 0.5em;
column-width = 300px;
}
The css in the inspect element is as below.
I've tried updating the custom.css files in the code, but it still somehow picks the same values for css. Tried cleaning and rebuilding the code. Still doesn't work.
However, when I un-select the width property(as shown below) in inspect element, it shows as expected. I'm removing the width property from custom.css file but it is still coming up during run.
I'm unable to explain why this is happening and how to get the label in a single line. Tried updating the custom.css file in code and the changes simply don't reflect. Why has this been happening and how to fix it.
If you're interested in the entire code source code
your source code link is not working so only just looking at your screenshots i'm suggesting the following changes, see if it helps you.
since you are using tag instead of a class the other classes or id selectors may be applied to your label width, the CSS selector specificity applied(or decrease) on the following order,
ID
class
tags
but don't use ID for this purpose since it's hard to override them in the future, use classes instead.
for now just set the width of the label as 100% so it will take full space of available width and also add !important to make it as high-priority origin that can override any inline styles or other overriding class styles.
label {
display: inline-block;
width = 100% !important;
padding-right: 1em;
}
I just have a simple button tag in HTML with a simple CSS Selector
and when I render the same 2 of my properties getting crossed out
there is no other selector applied on the button tag and I have also checked the parent tags no CSS selector is changing the color on parent tags as well. Could someone please help me if is there a way to identify why these 2 properties are getting crossed out?
.call-button {
width: 100%;
margin-top: 0.5rem;
height: 2rem;
background-color: orange;
color: #fff;
border: orange;
border-radius: 0.3rem;
}
<button class="call-button">My button</button>
There is a chrome page specifically for this here: https://developer.chrome.com/docs/devtools/css/overrides/
From the Elements panel, open the Computed pane.
Scroll through the list of properties and expand the one that you want to investigate further.
Click the blue link next to a declaration to jump to open the Sources panel and jump to that declaration's source code. See Make a minified file readable if the code is minified.
I have a page where I want to represent a URL to the student (but not have browser defaults, like changing to a pointer on hover, etc), and I am losing my styles by wrapping the text in div. I have
index.html:
<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div style="color:blue;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>
styles.css:
body {
background: #f0f0f0;
width: 80%;
margin: 0 auto;
}
h1 {
text-align: center;
margin-top: 35px;
margin-bottom: 60px;
}
p {
font-size: 20px;
font-family: sans-serif;
}
.cl {
margin: 38px;
padding: 25px;
background: #f8f8f8;
font-family:DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
font-size: 12px;
}
.fake-url {
color: blue;
}
Most recently I had tried using .fake-url in the div,
<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div class="fake-url;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>
and after that I did
p, p div {
font-size: 20px;
font-family: sans-serif;
}
I'd like to suggest you to use a span instead of a div, div are block elements in the other hand spans are inline elements and fit better in the context you want to use it.
And as someone mentioned above, you have an extra ; inside the div's class
<div> elements don't belong inside <p> elements. Browsers usually rework this so that the <p> element is closed just before the <div> element and then opened again just after. This effectively splits your paragraph into two pieces, one before the <div> and one after.
Instead, use a <span> or, more appropriately, a <a> element.
MDN has an entry that mentions this. Specifically, in the section marked "Tag omission", it mentions that if an opening <p> element is followed by an opening <div> element then the paragraph is implicitly closed.
<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div class="fake-url">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>
Just removing the ; from the class name in the div will fix it.
I have recently learnt how to create a html internal link; allowing my members to jump down the page to specific information.
However the coding I have used is set at a standard size and font. I would like to edit the font size and font style of the topic title.
a name="category-one">Under 6's</a>
Above is my current coding; how can I increase the text of the title "Under 6's"?
you can use inline style in a element this way
<a name="category-one" style="font-size:18px; color: green;" >Under 6's </a>
You should always use css for styling.
You can give each element a separate class and style those accordingly.
Under 6's
In css:
.title a{color: blue;}
There's much more efficient ways to refer to an object.
class is versatile in that you can apply it multiple times, this is the prefered way.
id is not as versatile because each id must be unique so your'e limited to just styling a single element.
a[name='category-one'] {
font-size: 16px;
font-family: "Palatino Linotype";
}
a.category-two {
font-size: 1em;
font-family: "Source Code Pro";
}
a#category-three {
font: 1rem;
font-family: "Verdana";
}
a:hover {
font-size: 20px;
font-family: "Arial";
}
<a name="category-one">Under 6's (refer by name attribute)</a>
<a class="category-two">Under 7's (refer by class attribute)</a>
<a id="category-three">Under 8's (refer by id attribute)</a>
There's three ways to apply styles:
The prefered way is using a separate file (e.g. style.css) and then pointing to it from your main page:
<link href="http://www.example.com/css/style.css" rel="stylesheet"/>
It may be more work to maintain a separate file, but it can be used by multiple pages on your site.
Another way to provide CSS rules is to use the <style> element and place that before the closing </head> tag. Although faster when loading, the code will become difficult to manage and it can only be used by one page (the page the <style> is on.)
....
<style>
.foo { height: 60px; }
....
</style>
</head>
Inline styles are discouraged and should be used sparingly if at all. They are limited to only the element they are on and harder to locate and debug. One advantage is that the rules will take priority over all other non-inline style rules (or should I say, most of the time, because there's always a bug or edge cases).
<a name="category-four" style="color: red; background: #000;">Under 9's</a>
So I'm completely familiar with overriding a style in bootstrap by using my own Style.css. But let's say that bootstrap has a style that is put on a table or something that is a standard html element. Let's use labels, because it's a rather short example. Let's first assume that there is no other label style or label element styling anywhere else except for the following css code:
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
Now if I want to override this style in my Style.css file and change the margin and weight, I could do this:
label {
margin-bottom: 3px;
font-weight: normal;
}
Easy enough, this would change those two items and allow the other styles to cascade through. But what if I wanted to completely remove any styling added by bootstrap for the element label. Is there a short and easy way to do this without having to do something like:
label {
display: inline;
max-width: None;
color: none;
margin-bottom: 0;
font-weight: normal;
}
Or basically going through line by line and changing each styles property to something like none or normal or whatever? All while keeping the original Bootstrap file in an untouched state and not commenting anything out of it.
BTW I would also be fine with using JavaScript if it's concise and easy?
It depends on what browsers you want to support. You could use
label {
all: initial; // or all: unset
}
but be aware that it's not really widely supported yet. It works on IE 11, Firefox, Opera & Chrome, but not Safari or most mobile browsers. Still, a good one to know if and when it becomes more widely supported :)
No if it is already include the only way to override it is to give it properties like none, alternatively the best way to handle it is to use their SASS/LESS implementations and not include the component at all.