CSS class selector won't work - html

I'm new in coding and I'm having some noob issues...
Whenever I style my elements inside my HTML file (style="...") everything works fine, but when I do it the correct way, i.e. I give them a class and style them in the CSS file, it won't work at all.
This is my HTML:
<div class="4u 12u(mobile)">
<section class="highlight">
<a href="football.html">
<span class="image fit"><img src="images/pic02.jpg" alt=""></span>
<header>
<h2>Football</h2>
<p><img class="miniflag" src="images/flag_en.png"> <img class="miniflag" src="images/flag_de.png"> <img class="miniflag" src="images/flag_nl.png"> <img class="miniflag" src="images/flag_es.png"></p>
</header>
</a>
</section>
</div>
And this is my CSS, where I try to give them a 6px margin all around:
.miniflag {
margin: 6px 6px 6px 6px;
}
Can you help me find the problem? Thank you very much!
Edit: Yes, both my HTML and CSS file are linked within the head section (it is a running website), so the problem must be elsewhere...

As an answer to your own solution: Most likely you had another piece of CSS that was overwriting your .miniflag CSS.
Still, I don't understand why I can't just put it under .miniclass, as I thought that a specific class attribute always beated a generic class attribute.
You are correct, a specific class attribute will overwrite a generic class attribute. But I think you're confused about which is which:
.miniflag : generic class attribute, the lowest level
.highlight p .miniflag : a more specific class attribute, with 3 levels
The more specific one will be applied.
Furthermore, the position of your css rules matters as well:
.miniflag {
color: red;
}
.miniflag {
color: blue;
}
This will set the color to blue, since the last rule is applied and overwrites the previous rule.

Your CSS code and HTML is looks fine to me, may be you should check head section into your HTML file, and if you have not included your CSS file into your HTML file, then following code will help you to do that.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Tip: make sure you specify the location of style.css properly as follows
href="location/style.css"

you can do this:
<head>
<link rel="stylesheet" type="text/css" href="foldername/style.css">
</head>

Solved! In my CSS, before the .miniclass I also specified the parent class, so now it looks like this
.highlight p .miniflag {
padding: 2px;
background-color: white;
width: 35px;
}
And it works perfectly. Still, I don't understand why I can't just put it under .miniclass, as I thought that a specific class attribute always beated a generic class attribute.

Related

CSS class not applying style

In regard to the first CSS rule, it works when i use the 'p' tag by itself. When I apply the 'article' class with or without the 'p' tag, it doesn't work. Why is that? Also the 'hr' tag with the class of 'one' works (which means CSS file is working). This seems so basic. I don't understand why it isn't working. Any ideas?
HTML
<p class=article>{{ post.body|truncatewords:30|linebreaks }}</p>
-- Also tried this
<p class="article">{{ post.body|truncatewords:30|linebreaks }}</p>
external CSS file
p.article {
color:red;
}
hr.one {
border:none;
height: 2px;
background: #cec4c4;
}
HTML Output
<div>
<h1 class=display-4>gdddsasddsg</h1>
<h6><span class="font-italic font-weight-normal">By: </span>gdorman619 <span
class="font-italic font-weight-normal">Published Date: </span> May 28, 2020, 12:24 p.m.</h6>
<p class="article"><p>sdadfsdsfdsfa</p></p>
<hr class="one">
</div>
Are you printing content from a WYSIWYG-editor or something else that is not a pure string? In that case, that content will likely enforce its own markup as inline HTML and external css is not going to work as inline CSS inside HTML has a higher specificity then CSS placed in an external stylesheet, unless you apply !important to the color, which makes me cringe on my behalf.
Your code looks mostly good. To add a class attribute, you must specify the name of the class with quotes, like this:
<p class="article"> Your code here</p>
Hope this helps
Try with this css.
.article {
color:red;
}
.one {
border:none;
height: 2px;
background: #cec4c4;
}
it may help you

How to use css to style id within many divs

I am styling a wordpress child-theme and the code below is what I am dealing with. each div is within the previous. It ends with a div then a h2. the last two our my additions to the code. I want to style the text in the h2 tag. when I use a id or class and go into the style sheet and type
#tag {
**Styles i want here**
}
or do it as a class, it wont register. How do I format it? I left the div and h2 without an id or class because idk how to format it like I said
<head>
<body>
<div clas="main-container">
<div id="page">
<div class="content">
<aside class="sidebar c-4-12">
<div id="sidebars">
<div class="sidebar_list">
<div>
<h2>TEXT HERE I WANT TO STYLE</h2>
ID of element should be unique. And because it's unique, you just have a CSS codes like below:
#your-id {
// Your css codes
}
It should work, but we should not use ID for styling element, class name instead.
In your case, your codes should be something like:
.content h2 {
// your css codes
}
Somehow, your h2 tag have a styling with higher priority. Then you can use !important in each of properties. But it's not a best practice for us.
.content h2 {
color: #fff !important; //Example code
}
By the way, I see wrong syntax in your code: clas="main-container", please correct class attribute
Thanks

Nested CSS overrides element class

I have an html page with only one button
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css1.css" type="text/css">
<link rel="stylesheet" href="css2.css" type="text/css">
</head>
<body>
<div class="container">
<button class="btn ovalbtn">
Save
</button>
</div>
</body>
</html>
And those are the 2 css classes used:
CSS1:
.container .btn {
font-size: 4.0em;
}
CSS2:
.ovalbtn{
font-size: 16px;
}
I wonder why the button aquires the font-size from CSS1 while I overrode it with another class in CSS2. I know it's related to css specificity but I have shallow knowledge in this area.
It is due to specificity.
A class selector has a given level of specificity. Two class selectors are more specific than a single class selector. Thus rules in a rule-set with two class selectors (and nothing else) will overwrite rules for the same properties in a rule-set with a single class selector (and nothing else).
Because in your CSS 1 button have more specific rule compare to CSS 2. If both CSS have .container class in their rule then your CSS 2 will effect to that button
So if you want to effect your CSS 2 then do one change pas per following :-
.container .ovalbtn {
font-size: 16px;
}
The browser displays CSS1 because it is more specific than CSS2. When the browser sees different CSS codes changing the same element it applies the one which is more specific.
You can read about CSS Specificity here.

Couple of questions HTML

To redefine a general look for an entire HTML tag, what would be the proper selector? Would it be a class, head or id?
Also, not sure which attribute that is used for defining an inline style in HTML? class, font, type, input?
Finally, if I wanted to add a width attribute into a specific item within the html code, would it be: width="10" or width:"10".
Thanks
To redefine a general look for an entire HTML tag, what would be the proper selector? Would it be a class, head or id?
-> To redefine a general look of a tag for the entire page you just need to use the tag name, for example: if you want to change the anchor tag to not have an underline for the entire page you just type this,
a {
text-decoration: none;
}
And if you want to change everything inside a particular tag you could do something like
div * {
padding: auto;
}
Also, not sure which attribute that is used for defining an inline style in HTML? class, font, type, input?
-> As of now it is a good practice not to do inline styling frequently in your code, but if you have to you could style 'almost' all the tags which follow HTML5 syntax. To do that you could write something like this:
<div style="width:200px"><span>Some text here</span></div>
Finally, if I wanted to add a width attribute into a specific item within the html code, would it be: width="10" or width:"10".
-> For styling anywhere and anything you have to use property : value; this syntax, except in javascript. For javascript you have to follow these steps: clickable link
To style an html tag, you just use the tag as a reference:
p {
color: red;
}
h1 {
font-size: 20px;
}
Inline HTML styling is done with the style attribute, but is not recommended.
<h1 style="color:blue">This is a Blue Heading</h1>
To style a tag in general, you wouldn't need to use id, class, or head.
Say you wanted to style all 'p' elements, in CSS you would put:
p {
Property:Value
}
If you wanted to specify an elements width within the HTML code the correct way would be:
width="10" (Within an elements tags of course)
img{
width="100px"
}
.image{
width="100px"
}
#image{
width="100px"
}
<img src="" width="100px" />
<img src=""/>
<img src="" class="image" />
<img id="image" src=""/>
If you wish to define a general look for the whole of the webpage that you wish to create, you can type the body and then define it accordingly.
For example
body{
padding:20px;
color: blue;
}
This will define the styling for all the elements under the body tag.
An alternate way for this is:
*{
padding:20px;
}
By using a Universal selector, you can automatically select all the elements and apply them to the style.
Coming to your last question,
if you are using Inline CSS, you can use both the ways that you have mentioned-
"width=200"and "width:200;"
But if you are directly applying in a tag or under style tag:
<img src="" width=" ">
This is the apt way of doing so.
Thank you
A unique selector is the id.
the class selector is for more than one tag. You use it if you would have that two tags are viewed in the same way. (from your css file)
inline styles:
<p style="border: 1px solid #000000">Hello World</p>
Last que: width="100px" for example:
<img src="pics/pic1.jpg" width="100px" />
The Tag "html" is "only for defining that here starts the document"
You have to style "each" tag (p,div,h1,h2,span,....)
http://de.selfhtml.org/css/

Multiple HTML links to CSS

I am working with a django setup HTML and I want the first part of my html page to be determine by the first CSS stylesheet. The rest I want to be controlled by a different one. Is this possible. I put an HTML CSS link (below) above the code I want it to control. It doesn't seem to work and it looks like it gets applied to all the HTML. Is there a way to specify the CSS link to just the code I want.
<link href="folder/to/css/style.css" rel="stylesheet" type="text/css" />
Why don't you use different classes for the elements below? Also make sure you understand CSS specifity
No, you can't do that. You could use an iframe that has its own CSS.
You could use a specific section class, and link to both css stylesheets, for example:
<!-- Represents a first CSS file. -->
<style>
.section1.customclass
{
background-color: red;
}
</style>
<!-- Represents a second CSS file. -->
<style>
.section2.customclass
{
background-color: blue;
}
</style>
<div class="section1">
<input type="text" class="customclass" />
</div>
<div class="section2">
<input type="text" class="customclass" />
</div>