i have a css file style.css
which has following code
.myClass
{
color:red;
}
i want to use this css file to change the color of text in browser
following code of my program writes the text in browser
StringStream pageContent(sz, max_bytes);
pageContent.Write("Hello World!");//writes hello world in browser
when i do
pageContent.Write("<div style =\"color:red\"> hello world! <\div>");
text gets red but when i try to use css file using following code it doens't work
pageContent.Write("<link href=\"style.css\" rel=\"stylesheet\" type =\"text/css\">");
pageContent.Write(" <div id= \"myClass\"> Hello world! <\div>" );
any idea what i'm doing wrong or where should i place my file and how should i give the path to make it work?
HTML: <div class="myClass">...</div>
CSS: .myClass { color: red; }
or
HTML: <div id="myId">...</div>
CSS: #myId { color: red; }
Research CSS selectors, there's enough literature about that on the web for me not to repeat it here. Basically #someId CSS selector for id="someId" HTML attribute and .someClass CSS selector for class="someClass" HTML attribute but there's a lot more to CSS selectors than just that.
Related
I have an ionic 5 app for which I built each page using the cmd line, so they were created using the correct structure.
However, when I try to run it, the page styles aren't used, even though the browser shows the css file has been loaded.
I have the following in the .ts page:
#Component({
selector: 'app-onboard',
templateUrl: './onboard.page.html',
styleUrls: ['./onboard.page.scss'],
})
The html file:
<body>
<app-onboard>
...lots of other elements
<div class="style1">
</div>
</app-onboard>
</body>
The scss file:
app-onboard {
.style1 {
color: #ff00ff;
}
}
style1 is on an html element, but it is not applied. However, when I delete the app-onboard wrapper, the style is applied i.e.:
.style1 {
color: #ff00ff;
}
Why would the presence of the app-onboard selector prevent the styles from being applied in the page?
There should be a . in front of the app-onboard in the scss file as you're calling the scss class instead of the html tag like so
.app-onboard {
.style1 {
color: #ff00ff;
}
}
Hence the reason why the style only applied once you removed it.
If you wish to use the selector as per your current scss you'll have to change your html file to
<body>
<app-onboard>
...lots of other elements
<div class="style1">
</div>
</app-onboard>
</body>
I'm assuming the html file is outside of the app-onboard component and you're calling the component from it.
I tried to set up a single file component. But the specified css (also scoped css) are ignored and not rendered.
I tried it with a simple component:
<template>
<div>
<h1>A Headline</h1>
<p>A test example</p>
</div>
</template>
<style scoped>
h1 {
color: red;
}
</style>
Component is rendered fine, except that the css style is not applied.
What am I doing wrong?
UPDATE: This answer was a solution to the question as originally posted. It no longer applies in light of the revised code example. I'll update this again when I have an answer to the question as it stands.
You are applying the style to the class .h1 but no element has this class. It seems likely you intended to apply the style to h1 elements, so remove the . from the name of your style definition:
<template>
<div>
<h1>A Headline</h1>
<p>A test example</p>
</div>
</template>
<style scoped>
h1 {
color: red;
}
</style>
I have a very simple react component
class UpgradeContainer extends Component {
render() {
return (
<div className={styles.msg}>
<div className={styles['msg-container']}>
<h3 className={`${styles.title} highlight-color`}>
Big Header
</h3>
<div className={`${styles.description} alternate-color`}>
Small text
<br />
Some more small text
</div>
</div>
</div>
);
}
Here is the relevant css
.title {
font-size: 40px;
line-height: 50px;
color: white;
}
.description {
text-align: center;
font-size: 16px;
padding: 20px 0 10px;
color: white;
}
And here is the DOM output from above component
It is reproduced as text here:
<div class="mRMOZryRtlFUx_NHlt1WD" data-reactid=".0.1.0.0.0.1">
<h3 class="_2s6iXRZlq-nQwIsDADWnwU highlight-color" data-reactid=".0.1.0.0.0.1.0">
Big Header</h3>
<div class="_1pFak-xR0a8YH6UtvoeloF alternate-color" data-reactid=".0.1.0.0.0.1.1">
<span data-reactid=".0.1.0.0.0.1.1.0">Small text</span>
<br data-reactid=".0.1.0.0.0.1.1.1">
<span data-reactid=".0.1.0.0.0.1.1.2">Some more small text</span></div></div>
As you can see, reactjs has added a couple of <span/> to wrap the small text
I expect the title text (Big Header) to be much larger than the description text (small text and some more small text).
The output however looks something like this:
It is because reactjs, for some reason, addd a span to wrap around the text small text and some more small text ( data-reactid ".0.1.0.0.0.1.1.0" and ".0.1.0.0.0.1.1.2" respectively)
When I checked the style I found that the styles of these span elements are overridden by the following css rules
I am really puzzled by it because I did not define these rules myself.
So I click on the <style>...</style> and it takes me to
I want to know how I can effectively override these css rules?
The end result I want is:
If you're using 'Normalize.css'!
A Solution for this problem is to keep your main css file 'style.css' in the bottom. At least below normalize.css.
In case you're using Bootstrap,
Straight from the Bootstrap Official Website , "For improved cross-browser rendering, we use Normalize.css, a project by Nicolas Gallagher and Jonathan Neal."
Solution for this problem is to keep your main css file 'style.css' in the bottom. At least below bootstrap.css.
I have a Home component with this inside:
<alert type="info">Hello from ng2-bootstrap</alert>
Inside my home.style.scss, I have this:
:host .alert {
background-color: green;
}
which should change the background color to green, but it does not.
The above css code will produce this style:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3] {
background-color: green;
}
and the final HTML looks like this:
<home _nghost-wjn-3="">
<div _ngcontent-wjn-3="" class="card-container">
<alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
<div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
Hello from ng2-bootstrap Sat Sep 17 2016
</div>
</alert>
</div>
</home>
I don't know what the problem is here, but I think the selector is wrong. I'd like the final selector to be:
[_nghost-wjn-3] .alert
instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
Or in other words, why is there no _ngcontent-wjn-3 attribute on <div class="alert">...</div>?
Maybe I'm doing the whole thing wrong. What I'm trying to achieve is to customize the CSS of the individual bootstrap components (<alert> in the code above) as provided by the ng2-bootrap library (https://github.com/valor-software/ng2-bootstrap) inside my custom components (<home> in the code above).
I'm using the default view encapsulation (emulated) in the home component.
How can I do that please?
I figured it out myself. This is what I was looking for:
:host /deep/ .alert {
background-color: green;
}
The above code will produce the following:
[_nghost-wjn-3] .alert {
background-color: green;
}
This way I can modify the default styles of a bootstrap class (.alert, in this case) inside of my component <home>.
Source: https://angular.io/docs/ts/latest/guide/component-styles.html
You need:
[_nghost-wjn-3] alert[_ngcontent-wjn-3]
Instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
If you go and check your structure, alert tag has the ngcontent... attribute, not his div child with alert class.
There is a good example about using css nth-of-type selector http://codepen.io/mnafricano/pen/ltKvy, but when I run the example myself, I can't make it work. Can somebody point out what goes wrong in using the nth-of-type
The html is
<h1 class='logo'>Google</h1>
, and css is
h1.logo span:nth-of-type(1){
color:#0089ab;
}
h1.logo span:nth-of-type(2){
color:#d91821;
}
h1.logo span:nth-of-type(3){
color:#ffac05;
}
h1.logo span:nth-of-type(4){
color:#0089ab;
}
h1.logo span:nth-of-type(5){
color:#88c406;
}
h1.logo span:nth-of-type(6){
color:#d91821;
}
The CSS here works, the trick is that there is some Javascript on that page which adds a <span> wrapper around each of the letters in "Google".
The CSS specifically is looking for the nth span inside of the h1 with class "logo".
If you directly take the HTML and CSS, but not the JS the CSS rules will never match.
If you inspect the h1, you'll see the following:
<h1 class="logo">
<span class="char1">G</span>
<span class="char2">o</span>
<span class="char3">o</span>
<span class="char4">g</span>
<span class="char5">l</span>
<span class="char6">e</span>
</h1>
If you try that HTML instead, it should work as you expect.
Here's a JSFiddle that may help.