i am creating a website in html. I have used a ready made html contact form in it. The css of which starts like below
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body,
html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
when i inert it to my website its making my whole page misaligned, so i decided to give the properties to the form only, so i put whole form in a div and gave a class to it called starc. Now i did the following changes to css to select the whole elements in that class:
* .starc {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
but this is not being applied to my form. Can anyone please tell me what is wrong in my code. Thanks in advance
It is a common thing to use a css reset like the popular normalize. I would strongly suggest that you do it. I would then delete this rule that you got
* { ... }
Because that resets the margin and padding on all your elements on the page. The box sizing is good to have but that is covered in normalize lib.
To get to your question. If you want to reset the margins on all of your elements inside the form just reverse the asterix with the class
.starc * {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
if you want for example only the direct children in the form then do this
.starc > * {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
Asterisk(*) selects all the elements on the page. If you want to use it for the class starc, then remove asterisk (*).
More info: https://www.w3schools.com/cssref/sel_all.asp
if you just want to select an element with class "starc" then the selector would be:
.starc {
}
If you use * .starc then its the same as above because the combinator selects elements with class "starc" which are nested inside every element. So .starc and * .starc makes no difference.
On the other hand if you want to select all elements that are inside the class "starc" then the combinator would be like .starc *.
Related
While writing html, the element has padding zero and margin is zero, but there are spaces around the text. How can I destroy it?
line height etc. I tried features but it didn't work.
Did you remove the page's default stylings before styling mentioned elements?
I think that may be the issue.
Before start styling of your page it is a best practice to remove all the styles and uniforming the default look first.
I've been using the code below for all of my projects up to this point.
*{
margin:0;
padding:0;
box-sizing: border-box;
}
This will remove basic stylings for the whole webpage.Copy and paste the above code into your CSS file.
If this is not the case, you need to add the line-height property to your h1 tag. Here is the snippet given below.
*{
margin:0;
padding:0;
box-sizing: border-box;
}
h1 {
background-color:lightblue;
margin-top: 0px;
line-height: 75%;
}
<h1>Transitional<br>Heroes<h1/>
remove the page default styling.
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
It'll save you ton of time to start any of your projects with the below css codes.
*{
margin:0;
padding:0;
}
By default, HTML includes certain styles in the different tags.
To create a project from scratch, it is advisable to use a CSS reset file. The community has created several.
These files reset all the default styles of HTML and the different variants between browsers to achieve the same visual result in the most popular browsers on the market.
Here is a CSS reset offered by the user karbassi through GitHub:
https://gist.github.com/DavidWells/18e73022e723037a50d6
I'm having issues with my nav bar, I'm wondering how I can make the set closer to the left most edge.
CSS:
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
}
#nav li
{
display: inline-block;
list-style-type: none; /* removes bullets */
padding: 10px;
margin: 0px; /* removes margins */
background: grey;
}
#nav li:hover
{
background: green;
user-select: green;
}
Fiddle: https://jsfiddle.net/yumyum0/cgx61w0q/2/
Also, I'm not sure if the background and user select in the #nav li:hover is redundant. I'm modeling it off of the tutorial on https://html.com/css/#example-nav, and I started to add things to try and style it the way I wanted. I'm still a long ways away from knowing what all of the declarations do. It used to be flush so I think I probably added something that has a conflict, or I removed it without knowing.
I also had a question that wasn't really related to this, is this formatting okay? I wasn't sure if there was a agreed upon way with brackets and everything else.
Placing this ruleset at the start of your code will remove the margins at the top of your navbar.
* {
position: relative;
margin: 0 0;
}
Your formatting is slightly off; place the opening bracket on the same line as the CSS selector, and make sure there is a gap between rulesets, for greater readability.
A good thing to do is set the styles for the HTML and Body tags. This is what I would do:
html, body {
margin: 0; // Removes space on the sides
box-sizing: border-box;
width: 100%;
height: 100%;
}
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
box-sizing: border-box; // Add this to take 100% width without overflowing
margin: 0; // Remove space above nav bar
}
...rest of your CSS
You can position absolute and declare it must be at the left most point of the page.
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
position: absolute;
left: 0;
}
Styling your code is up to you! I like keeping the name in the same line as the curly bracket like #nav {
Navigation spacing: One thing to research is a solution called "CSS Reset". Browsers like Chrome and Firefox have different "base values" for HTML selectors. A reset stylesheet ensures that all of your elements will have the same "base" styles. There are 1000 different reset sheets out there that different people have attempted. They all roughly do the same thing in my opinion.The <body> tag has margin assigned to it by default. A reset sheet would normally assign these to 0 amongst other things.
Kind of the same thing as above, the <ul> tag also has margin on it by default. You should add in the following CSS:
html, body {
margin: 0;
}
#nav
{
background: grey;
width: 100%;
margin: 0;
}
Let's discuss the user-select property. This property is what you would use in order to target a "highlight" or "text select" for a copy/paste situation on a webpage. I do not think this is what you should be using for a "hover" effect. You should be just fine with using the background property.
I need to set a 4px space between all html internal components (in any direction top bottom left right). I am using an external css file for this. I tried this:
body {
padding: 2px;
border: 0px;
margin: 0px;
}
But this sets a space of 4px for all body not between it's components.
Also,
{
display: inline-block;
padding: 4px;
}
is not working either.
Can you please help. I am not allowed to change the html page.
You can use
body * {
margin: 2px;
}
Which will set that margin to every element inside of the body tag.
Looks like you need to set for the elements used on HTML , if you are
using Css preprocessor , then you can declare the values at the top
and later it will be used by all the elements like shown below :-
$standard-padding :2px;
$standard-border:0px;
$standard-margin:0px;
body,p,h1,h2,div,span{
padding: $standard-padding;
border: $standard-border;
margin: $standard-margin;
}
Maybe you can try padding like this:
body *{
padding:4px;
}
I have a jquery plugin, that annoyingly has this at the top of its stylesheet.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
It's causing my h1 to behave differently on this page. Is there a way to exclude certain selectors from this? Otherwise I guess I have to work out what it's applying to and list everything rather than *?
Well, quick answer is replace * for *:not(h1).
This looks like a simple attempt of a normalize. You could remove it and fix whatever is wrong on plugin's elements or simply fix your h1 to have the margin/padding it was supposed to have.
I would simply suggest you to use selector just h1 which will override the all selector(*):
h1{
box-sizing:content-box;
margin: 5px;
padding: 5px;
}
It's always better to use * selector for eg. as you may want to change #somecontent h1 but not h1 then just using #somecontent h1{...} would override the rule of * selector and even just h1 tag will be benefited from * selector.
A really nice idea would be to override * selector itself if you're not interested with the plugin css:
*{
border-box: content-box;
margin: 0; /*add your value as you wish*/
padding: 0; /*add your value as you wish*/
}
And you may also update the h1:
h1{
margin: 5px;
padding: 5px;
}
But to consider this, you must make sure that your css file is at last line of the plugin css file.
<link rel="stylesheet" type="text/css" href="plugin.css" />
<link rel="stylesheet" type="text/css" href="main.css" /> <!-- last in order--->
*:not(h1)
{
box-sizing:border-box;
margin:0;
padding:0;
}
modern browser solution
*:not(h1)
{
/* css code */
}
cross-browser compliant solution
h1{
box-sizing:none;
margin:auto;
padding:auto;
}
EDIT: removed superfluous !important flags.
This is only a partial answer but I would suggest instead using inherit for box-sizing. You can then easily reset an entire section if needed. You end up with less code utilizing box-sizing: border-box; in this way. Resetting your H1 is obvious. Just reference it explicitly to bypass your universal selector.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
With this HTML:
<div class="content">
<h1>Some Heading</h1>
</div>
Reset it with this CSS:
.content { box-sizing: content-box; }
I have an HTML django template page that is both RTL and LTR (depends on user's locale).
The CSS of this page is stored in another file, and that file is currently static.
What is the best way to switch the attribute left and right according to the locale? Is there a built in attribute in CSS for this problem? (I don't want to use JS, it feels too messy)
I have:
.elem{
left: 10px;
bottom: 10px;
position: absolute;
}
I want something like this:
.elem{
right-or-left-according-to-html-dir: 10px;
bottom: 10px;
position: absolute;
}
Currently the only option I can think of is turning the file into a template also:
.elem{
{{dir}}: 10px;
bottom: 10px;
position: absolute;
}
Is there a better way that will let me keep my CSS file static?
You say you're making the document rtl or ltr depending on locale. In that case you can use the :lang() selector to make certain parts of your document have styling depending on the locale.
http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:lang
http://www.w3.org/TR/css3-selectors/#lang-pseudo
If you want a little more support (IE7+) you could use the attribute selector selector[lang='en'] though that will only test the attribute on the specified selector.
http://www.w3.org/TR/css3-selectors/#attribute-selectors
If you specify the language in the html element (which you should, with lang="en" for example) you can just put the html selector in front of the class you want to apply in certain locales:
.elem {
margin: 0 10px 0 0;
color: blue;
}
html[lang='en'] .elem {
margin: 0 0 0 10px;
}
Even better, if you specified the dir attribute you can directly use that in css like so:
.elem[dir='rtl'] {
margin: 0 10px 0 0;
}
Please note that with a class on the body element you will always depend on that class always being there. But the dir and lang attribute can be specified on a more specific scope, like a single div, and still be used in the css along with styles for the 'other' reading directions.
Edit
Lastly, to gaze into the future, the CSS Selectors 'Level 4' will include a psuedo tag which will be able to filter on text directionality. Of course the specs are in development and adoption by browsers may take years before it is possible to reliably use it:
http://dev.w3.org/csswg/selectors4/#dir-pseudo
How about adding the direction to your body element via a special class, then you can write according selectors:
<body class="rtl">
and in the CSS:
.rtl .myclass {
text-align: right;
}