i would like to know if it's good practice to use inline CSS styles to manipulate bootstrap elements:
for example:
<img src="swim-2.jpg" height="400" width="400" alt="swimmingClass" class="img-thumbnail img-responsive" style="margin-top:10%;transform:rotate(-10deg);">
but i have a few images and div blocks where i use inline styles to change padding and position. is it bad coding practice?
Avoid using inline styles.
Create a new file custom.css. Refer/Load it after Bootstrap.css
<link rel="stylesheet" href="path/to/bootstrap.css">
<link rel="stylesheet" href="path/to/custom.css">
Add a custom class to the element.
HTML
<img src="swim-2.jpg" height="400" width="400" alt="swimmingClass" class="img-thumbnail img-responsive transform">
CSS
/* custom.css */
.transform {
margin-top: 10%;
transform: rotate(-10deg);
}
You shouldn't really use inline styling. It will be a pain if you ever have to change any of it. If you use that style on each image you would have to update each image to match. The point of CSS is to separate the presentation from the structure, using a custom css file is the way to go.
You should really never use inline-styling. The HTML is not a "do'er" it is just "idle". So you trying to make HTML do things like styles etc would not really be the most effective coding. Besides that it just looks plain messy.
Related
I'm new at Mudblazor and trying to override the default padding of the expansion panel header. Here is what the html looks like:
html mudblazor
Mudblazor creates a div with a .mud-expand-panel-header in the background and that's the element I want to change the bottom padding on. I tried inline css and change the styling from the css file without success. I also tried to use pb-1 on the TitleContent tag but that element doesn't take classes. Any ideas on how to change that?
Solution 1: How to apply custom CSS (directly)
If you wish to override the mud-expand-panel-header style directly, create a new CSS file, include it in the index.html file and make sure it's loaded after MudBlazor.min.css to ensure it takes a priority.
Once that's done, add the following code inside the new file:
.mud-expand-panel-header {
padding: 4px;
}
Solution 2: How to apply custom CSS (indirectly)
Instead of modifying mud-expand-panel-header class directly, apply the CSS you need to any mud-expand-panel-header that's inside an element with a custom CSS class of your own.
Example
https://try.mudblazor.com/snippet/wumGaiveVFPlBBEe
<style>
.custom-expansion-panel .mud-expand-panel-header {
padding-bottom: 4px;
}
</style>
<MudExpansionPanel Class="custom-expansion-panel">
<TitleContent>
<div class="d-flex">
<MudIcon Icon="#Icons.Filled.CheckCircleOutline" Color="Color.Tertiary" class="mr-3"></MudIcon>
<MudText>Title</MudText>
</div>
<MudText Typo="Typo.subtitle1"><b>Price</b></MudText>
</TitleContent>
<ChildContent>
<MudText>Age</MudText>
<MudText Typo="Typo.body2">Notes</MudText>
</ChildContent>
</MudExpansionPanel>
Solution 3: How to get Bootstrap working
If you wish for the pb-1 bootstrap class to work, go to the index.html file and make sure that bootstrap.min.css is loaded a̲f̲t̲e̲r̲ MudBlazor.min.css.
That's what you may currently have:
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
That's what you should have for the Bootstrap class to work:
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
I want to know if it is possible to disable styling on a specific html element.
In my case it is a input text. I cannot resize it. I went through the bootstrap css and found it has padding. I tried to use padding: none and 0 0 0 0 plus !important and it did not work.
Is possible to disable the styling for that specific item?
As of Bootstrap 3, you'd use the list-unstyled class to achieve this.
Example:
<ul class="list-unstyled">
<li>...</li>
</ul>
Hope this solves your problem.
Yes it is possible. You can achieve it in following way:
Load your own stylesheet definition after the bootstrap.css. For your case define input[type=text]{padding:0px;} must call after the bootstrap's css file(s).
If you want to use in-line css you can try: <input type="text" style="padding:0px" />
Hope it helps.
in the 'head' of your HTML change the order of the local css file and bootstrap css, the local css should be the after the bootstrap css:
<head>
<!-- bootstrap css is the first here -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- bootstrap css is the last -->
<link rel="stylesheet" href="style.css">
</head>
now if you applied !important in your css it should work.
another solution is to apply your css inline <element style="padding:0"></element>
Set it in the style of the element in the style attribrute if an item is there it has priority.
Also if you want to be double sure add !important as well
Would Javascript be of any help to you? If so the .setAttribute native javascript function can help:
http://jsfiddle.net/nMJjS/1/
Just replace the id that I made up with the id of input element you want to change
My objective is simple enough i just want to modify Title="New" to bigger size and color, i did apply with CSS but it doesnt works :(
<style type="text/css">
#g_523a7cea_3249_4ac1_b2bc_48efea016ad1
{
color: Blue;
}
</style>
<WebPartPages:DataFormWebPart runat="server"
Description="" ListDisplayName="" PartOrder="2"
Default="FALSE" HelpLink="" AllowRemove="True" IsVisible="True"
AllowHide="True" UseSQLDataSourcePaging="True" ExportControlledProperties="True"
DataSourceID="" Title="News" ViewFlag="8" NoDefaultStyle="TRUE" AllowConnect="True"
DisplayName="Employee News" PageType="PAGE_DISPLAYFORM" FrameState="Normal"
PageSize="-1" PartImageLarge="" AsyncRefresh="False" ExportMode="All" Dir="Default"
DetailLink="" ShowWithSampleData="False" ListId="645a16cc-7fe6-4247-9800-2170e1479074"
ListName="{645A16CC-7FE6-4247-9800-2170E1479074}" FrameType="Default" PartImageSmall=""
IsIncluded="True" SuppressWebPartChrome="False" AllowEdit="True" ManualRefresh="False"
AutoRefresh="False" AutoRefreshInterval="60" AllowMinimize="True" ViewContentTypeId=""
InitialAsyncDataFetch="False" CssStyleSheet="" MissingAssembly="Cannot import this Web Part."
HelpMode="Modeless" ListUrl="" ID="g_523a7cea_3249_4ac1_b2bc_48efea016ad1"
ConnectionID="00000000-0000-0000-0000-000000000000" AllowZoneChange="True"
IsIncludedFilter="" __MarkupType="vsattributemarkup" __WebPartId="{A7755E5E-BE3F-4415-A163-BAA925625A0E}"
__AllowXSLTEditing="true" WebPart="true" Height="" Width="">
The ID is for the DVWP. There is no style that you can apply to a whole DVWP in one fell swoop. Inside the DVWP there will be lots of other CSS classes for the different elements and they will be applied, overriding anything, even if you could use the web part ID for a CSS format.
A DVWP typically displays in a table. There are different classes and styles for TH, TR, TD and so on. If you want to change the appearance, then you need to tackle these classes for the table elements.
replace script with style. script is for javascript. style is for css
<style type='text/css'> ... </style>
Render the page and see what ID you have in your HTML code, then apply the CSS. I'm almost sure that the ID is different, and that's why it doesn't work (happens almost everywhere, where web controls are being used, especially in ASP).
I am including styles in normal way like this:
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
this styles has a lot of styles which destroy my main view, it applies to body element, is it possible to applay the style only to one particular div?
Put that <div> into a separate page and include bootstrap CSS only in that page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
</head>
<body>
<div>This is your DIV</div>
</body>
</html>
Your main page won't be touched by that and you'll be able to display that div inside your main page simply using an iframe, change (for example) this:
<div>This is your DIV</div>
To this:
<iframe src="url of the other page"></iframe>
Of course you may need to change little bit the logic of your page to accommodate this (primary I guess because of server side C# code, for client side JavaScript code it should be easier because the come from the same domain).
Yes, you can do that by ID:
<div id="myDiv"></div>
and then the CSS would be:
#myDiv { ... }
and that will apply that style to anything named myDiv. You could also use classes:
<div class="someClass"></div>
and then the CSS would be:
.someClass { ... }
and that will apply that style to anything with that class attached.
Based on what you're describing, surrounding the generality of the CSS that's breaking the already defined CSS, you're going to want to get rid of those general element styles and use ID's because it sounds like you're trying to merge some CSS.
You try to remove all styles of body with javascript code, and after that, after you add a name/id to the body style in your correct css, set this as class attribute of your body. (js code too after the document is completely loaded)
Another (stupid) solution depends on what do you have in the css file. Do you can edit the /css/boostrap.css, simply replace all body word with ".body1" (fe => make a class from it)?
I'm building a web site and I'm using HTML5. I'd insert into my header an img that is my company's logo. In terms of efficient and correctness it is better set up css propriety as background-image: url("logo.gif") in my css style or including in the html file
<header>
<img src="logo.gif" alt="logo" />
</header>
It is best to include the image as an img tag, not a background-image.
This means that if the client has disabled CSS on their browser, or it doesn't support CSS, they will still be able to see the logo at the top of the page.
This would also mean you could make the logo a link to the home page, which has become a general usability point for websites these days:
<header>
<img src="logo.gif" alt="logo" />
</header>
For more information on this sort of situation, see this popular StackOverflow post:
When to use IMG vs. CSS background-image?
that depends.
If your logo should be clickable then include it in the HMTL. (usebility)
If it is only present for design purposes go with the CSS.
It is generally a better idea to define everything related to the appearance of the Website in the CSS.
html:
<header>
<div id="company_logo"></div>
</header>
css:
#company_logo{
width:50px;
height:50px;
background-image:url();
}
Unless you need to have some contents over your logo, I'd go for the <img> tag (it is also screen reader-friendly provided you have the "alt" text).
Background images can not be printed, if your site has the purpose of being printed, then your logo won't display.
Remember that a logo is a content, and a background is a style. Using a background as a logo is not semantic.