I want to remove the following from an html page and add it to an existing css sheet. Do I have to do anything special like creating a new .mynewclass or simply remove the <style> tags?
<style>
<!--
.rightAlign
{
text-align:right;
}
.leftPad05em
{
padding-left:0.5em;
}
.bottomPad05em
{
padding-bottom:0.5em;
}
.topPad05em
{
padding-top:0.5em;
}
.topBottomPad1em
{
padding:1em 0em 1em 0em;
}
.bottomControl
{
padding-left:14.5em;
}
-->
</style>
add your styles to a external stylesheet for example - default.css
Include these in that stylesheet -
.leftPad05em { padding-left:0.5em; }
.bottomPad05em { padding-bottom:0.5em; }
.topPad05em { padding-top:0.5em; }
.topBottomPad1em { padding:1em 0em 1em 0em; }
.bottomControl { padding-left:14.5em; }
and in your header include this -
<link href="default.css" rel="stylesheet" type="text/css">
This is calling the default.css style sheet. Note, href="value" would be where the style sheet is located
If the existing CSS file is already imported in the HTML, then moving the inline CSS from the HTML to the file should work.
In this case it sufficient to write the embedding css code in your CSS file. Check if the classes already exist. If so, add the CSS atributes to these classes otherwise paste the code into the file.
Related
I have a custom icon font (generated with Icomoon).
body {
--pseudo-element-content: '\e900';
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}
}
However, when doing this, my pseudo element doesn't appear in my browser (as if it didn't have any content). It looks like my css variable has the icon value interpreted and not its code.
If I change it to
div::before {
font-family: 'CustomFont';
content: '\e900';
}
it works like a charm. I tried a few tricks (string concat, adding ' and escaping them) but it didn't work.
I've tried it and it work with another character (see the snippet).
It seems that you don't have that font on your OS and the browser can't render it.
body {
--pseudo-element-content: "\016E";
}
div::before {
font-family: "CustomFont";
content: var(--pseudo-element-content);
}
<div><-- </div>
CSS variables are placed in the rules, not at the top level:
selector {
padding: 100px;
--some-var: 'abcdef'
}
Variables are inherited like the ordinary CSS rules.
If you want the variable to be visible everywhere, add it to html (or :root):
html {
--pseudo-element-content: '\e900';
}
Answer to edited question:
You are trying to place the styles inside each over, which is not supported in CSS. Perhaps, originally code was for CSS preprocessor - SASS.
The fix:
body {
--pseudo-element-content: '\e900';
}
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}
Let’s say I have a few utility classes:
.primary-text {
color: blue;
}
.danger-text {
color: red;
}
.display-400 {
width: 400px;
}
.max-width-100 {
max-width: 100%;
}
Do classes like this require the !important keyword?
If you have some other CSS files that are loaded before this file, you have three ways to force your CSS content to load:
add !important
add your CSS file link tag at the end of another link tag
find a more accurate selector for your tag like this:
span.primary-text {
color: blue;
}
This code has higher priority.
But if you don't use any other CSS file that contains these selectors with the same properties, you don’t need to use !important.
I am trying to create a printable document using CSS in my angular project.
For my print document that runs into multiple pages I need automatically to avoid printing the date and title in the header. At the same time I want to make sure that the document is printed with some margins. To achieve this I am using the approach suggested in this answer on SO. However I am not able to get the styling to apply.
My CSS Code looks like this
#media print {
#page {
size: auto;
margin: 0;
}
body {
margin: 2cm !important;
}
}
I have tried pasting this code in both the app.component.scss file as well as the styles.scss file. Both approaches don't seem to work. Any suggestions?
You need to put the following css in your styles.css file
#media print {
#page {
size: auto;
margin: 0mm; // added mm
}
body {
margin: 2cm;
}
}
And if you need component specific styling, you can add that to your component's css file as well:
#media print {
section {
color: orange;
}
}
Here is a Stackblitz example.
You can also try to print this page (https://angular-j4ab2g.stackblitz.io), and you will see that the date from the header is gone, and my custom section has orange text.
EDIT
I think the best option to remove the footer and header is to un-check the box in the print settings
Then you do not need to add the 0mm margin to the #page selector and the 2cm margin on the body selector.
My web2py project has an html file that contains only these two lines of code
{{extend 'layout.html'}}
{{=form}}
I want to write some inline css that should override the css that will be loaded from layout.html. I want to know if this is possible and if so, then how?
Here's the style that I want to add
.error {
margin-top: 0px
}
Here's how you can add inline CSS:
{{extend 'layout.html'}}
{{=form}}
<style>
.error {
margin-top: 0px;
}
</style>
I am using a dojo dataGrid to render a table. I need to hide the header row.
The Dojo documentation recommended using .dojoxGrid-header { display:none; } to turn off the column header but I only saw dojoxGridMasterHeader used in the debugger.
http://dojotoolkit.org/reference-guide/1.7/dojox/grid/DataGrid.html#hiding-the-headers-of-a-grid
In order to hide the dojo dataGrid's header row, I defined this in the HTML file.
.dojoxGridMasterHeader { display:none; }
I loaded the dojo library first, and then my own CSS style.
<style type="text/css">
.dojoxGridMasterHeader { display:none; }
</style>
However, the UI still displays the header in the dataGrid. The debugger shows this code for the header
I don't understand why the CSS still go overwritten to style="display: block"
Thanks a lot.
Add !important
.dojoxGridMasterHeader {
display: none !important;
}
http://jsfiddle.net/cswing/Uy3nQ/