What's the best and correct way to identify specific sections or contents inside a CSS3 stylesheet.
For example, if I have an image syntax defined like this for all images:
/* Image */
.image {
border: 0;
display: inline-block;
position: relative;
}
And now I want to define different settings for the images inside a specific section, for example here:
<!-- One -->
<section id="one" class="wrapper major-pad">
What's the correct way to do it? Using the Section ID or the Class in the CSS syntax? (please inform the correct syntax I should use).
If you have many sections with same class but want to target an image in a specific one, use id
#one .image { ... }
If you want to target an image within a section with a given class, use class
.wrapper.major-pad .image { ... }
or
.wrapper .image { ... }
or
.major-pad .image { ... }
Updated based on a comment, showing a simple sample
.wrapper .image {
border: 5px dotted red;
}
<section id="one" class="wrapper major-pad">
<img class="image" src="http://placehold.it/300x100/">
</section>
Related
The website I am developing has a problem showing the background image in Internet Explorer:
img {
width:100%;
height: auto;
/*margin-top : -50px;*/
}
<div class="col-xs-12">
<img src="./images/garri_processing.png">
</div>
While the background-image CSS parameter would work as a solution, you could alternatively solve this by adding more specificity to the image as well by adding an additional class or an ID. Not having that specificity could also get you in some trouble later as the img assignment in the CSS would then be referencing ALL img elements rather than your one div.
Try something like this:
<div class="col-xs-12 exampleClass">
As I said, you could also tie this to an ID.
<div id="exampleID" class="col-xs-12">
Then arrange your CSS from there to fit within your new parameters.
With additional class:
.exampleClass img {
width: 100%;
height: auto;
}
With an ID:
#exampleID img {
width: 100%;
height: auto;
}
CSS should be this.
body
{
background-image: url("./images/garry_processing.png");
}
I'm trying to create a HTML widget:
HTML:
<div>
<h1 class="title" data-bind="title">Title</h1>
<div>
<h1 id = "dc1" class="dc">DC1</h1>
</div>
<div>
<h1 id = "dc2" class="dc">DC2</h1>
</div>
<p class="updated-at" data-bind="updatedAtMessage"></p>
</div>
And I need to be able to set the background color of the id="dc1" and id="dc2" elements dynamically in CoffeeScript. I plan to do this by adding a class with a background color setting:
SCSS:
&.up {
background-color: green;
}
&.down {
background-color: red;
}
.dc {
background-color: orange;
font-size: 30px;
float: left;
width: 50%;
}
So far I have managed to set the whole widget background but not the child elements mentioned above:
I have been using:
CoffeeScript:
$(#node).removeClass('up down')
$('#dc1').removeClass('up down')
$('#dc2').removeClass('up down')
$(#node).addClass('down')
$('#dc1').addClass('down')
$('#dc2').addClass('up')
Note ultimately I will add the classes depending on some data rather than hard coding them to 'up' or 'down' in the coffeescript.
But nothing happends.. Am I getting selecting the id="dc#" elements correctly?
If it helps with context I'm doing this for Dashing
Your SCSS doesn't make sense so I'd guess that your missing an error from the SCSS-to-CSS conversion. An & in SCSS is a reference to the parent selector:
& will be replaced with the parent selector as it appears in the CSS
so have &.up at the top level makes no sense and should generate an error. If we fix the SCSS so that .up and .down apply only to .dc:
.dc {
/* ... */
&.up {
background-color: green;
}
&.down {
background-color: red;
}
}
then everything seems to work just fine.
Demo: http://jsfiddle.net/ambiguous/9y9uywm9/
You can use Sassmeister (and other similar online tools) to see what SCSS thinks of your original SCSS.
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I just had the idea of organizing my work as follows:
Create very basic CSS classes, for example this :
.backgroundRed {
background-color:red;
}
.backgroundGreen {
background-color:green;
}
.fixed300 {
width:300px;
}
.percent100 {
width: 100%;
}
.centered {
margin: auto;
}
.centeredTextHorizontally {
text-align:center;
}
.colorWhite {
color:white;
}
and then use 2-3-4 of them simultaneously, to create what I want, for example:
<div class = "backgroundGreen fixed300 centered">
<div class="centeredTextHorizontally">300px wide green stripe with centered text</div>
<div class="centeredTextHorizontally colorWhite">Centered white text</div>
</div>
</div>
Im sure you get the idea.
Now this has the problem that if in the future we want to change the web site, we need to edit the HTML of all those DIVs, which breaks the very pupropse of using CSS in the first place.
So I would like to be able to define CSS classes as follows
.navbar {
.colorRed;
.backgroundColorGreen;
}
etc etc. So that if the website colors need to be changed, for example, I only change the .navbar and not the DIVs in the HTML.
Is it possible to perform something like the above and how ?
Its not possible with pure css. you will need to look into a CSS pre-processor. Two popular ones are called Sass and Less. These links should give you more information on them:
Sass
Less
This will help you get started with your specific problem:
including another class in Sass
.navbar {
.colorRed;
.backgroundColorGreen;
}
This is not css rule. You have to use class like below -
.navbar.colorRed.backgroundColorGreen {
/* Your css styles */
}
Notice, there is no space between class name and dot . next to it.
I downloaded a HTML template, started modifying some items and first thing I want to do is to change the id attribute for an <article> element.
I only changed that, and so the site appeareance changed to not a desired one. Console shows any CSS issues.
This is original HTML part of code I'm interested:
<!-- Nav -->
<nav id="nav">
<span>Home</span>
<span></span>
<span>Email Me</span>
<span>Twitter</span>
</nav>
<!-- Main -->
<div id="main">
<!-- Me -->
<article id="me" class="panel">
<header>
<h1>Diego BenjamÃn <br><br> Aguilar Aguilar</h1>
<!-- <span class="byline">Senior Astral Projectionist</span> !-->
And just changed:
<span>Home</span>
<article id="start" class="panel">
This are the visual changes:
What's that I'm missing or should fix?
EDIT
Right after comments I went and saw CSS file and found out:
/*********************************************************************************/
/* Panels */
/*********************************************************************************/
#main
{
position: relative;
overflow: hidden;
}
.panel
{
position: relative;
}
/* Me */
#me
{
}
#me .pic
{
position: relative;
display: block;
}
This is because the id me is being styled in the CSS.
Taken from the CSS (I downloaded it):
#me
{
}
#me .pic
{
position: relative;
display: block;
}
#me .pic:before
{
content: '';
position: absolute;
top: 0;
left: 0;
background: url('images/overlay.png');
width: 100%;
height: 100%;
z-index: 1;
}
Basically, if you want to change the #me ID, you have to go into the CSS style sheets and change it there too.
Update
There are various different stylesheets. I took that snippet from style.css, however there is also style-desktop.css that has various different #me styled in. My recommendation is to go through every css file and edit every instance of #me to be what you want.
Like commented by Hamed Ali Khan, the id is probably used in the stylesheet.
In your stylesheet you should change all styles that contain #me to #start.
Or you could add an extra class to the element. For example <article id="start" class="extraStyle panel">. Then you should change all #me to .extraStyle.
You have to change that thing in CSS file too.
The styles applied with id in the CSS, like #article-id .child{some :style; }
What you changed in the HTML may reflect the same in CSS too.
Replacing the ID broke the styles related to your #home element.
Open your CSS file, and rename all #home in #me.
This is probably happening because some elements in your CSS are targetted as shown below
#foo .bar{
}
This means that it affects elements with the class bar inside of the element with ID foo. That's why changing of an element's ID can really mess up it's content's style.