What is the basic difference between CSS ID and CSS Class?
Someone told me that, ID can be used only once in a page. But I found that it can be used multiple times.
like
body
{
background-color: #3399FF;
}
div#menuPane{
position: absolute;
left: 25px;
top: 25px;
width: 25%;
}
div.menu {
display: block;
font-size: 14px;
margin: 0;
padding: 0;
border: 2px solid #7FC07F;
}
div.menu a {
display: block;
font-weight: bold;
text-decoration: none;
text-align: right;
letter-spacing: 1px;
margin: 0px;
color: black;
border-top: 1px solid #487048;
}
div.menu a:link{
background: #33CCFF;
}
div.menu a:visited{
background: #33CCFF;
}
div.menu a:hover{
background: #3FC73F;
letter-spacing: 2px;
}
div.menu h4{
padding: 2px;
margin: 0px;
}
div#content{
position: absolute;
left: 30%;
top: 25px;
width: auto;
border: 2px double #7FC07F;
background-color: #33CCFF;
padding: 2px;
margin-right: 5px;
}
div#content h3{
background-color: #A3F4A3;
text-align: right;
letter-spacing: -1px;
color: #386938;
border-bottom: 1px solid black;
}
div#content a:link, a:visited{
background:#0099FF;
color: #A3F4A3;
letter-spacing: 1px;
}
div#content a:hover{
background: #FF0000;
color: #A3F4A3;
letter-spacing: 1px;
}
Think of ID like your Student ID. Only one exists in your school - yours. Think of class like a group of kids...all of whom belong to the same class: "Biology". If you want to address a specific student, you would do so by acknowledging his/her ID - since that will never address more than one student. If you wanted to address a group of students, you could do so by acknowledging their class - "The biology class will be enjoying pizza today" vs "Jonathan Sampson will be enjoying pizza today".
<students>
<student id="jonathan-sampson" class="biology" />
<student id="lizza-matthews" class="earth-science" />
<student id="michelle-andrews" class="biology" />
</students>
Takeaway:
ID = Student ID (Schools don't issue identical IDs to multiple students)
CLASS = Group of Students (Like 'The Biology Class' will be going on a fieldtrip)
It can only be assigned to one element in the page, but it can be used in multiple CSS rules. Class names can be assigned to multiple elements in the page.
See this answer for a description of the differences.
Generally speaking, you use id's for
styling something you know is only
going to appear once, for example,
things like high level layout divs
such sidebars, banner areas etc.
Classes are used where the style is
repeated, e.g. say you head a special
form of header for error messages, you
could create a style h1.error {} which
would only apply to
One final note -- some browsers will allow multiple identical "id" values, but you should definitely not do this as it is will break on standards-following browsers.
.class will affect elements matching value in "class" attribute.
style by id will affect elements matching value in "id" attribute.
it is recommended that you do not repeat ID value in elements, since that is suppose to be unique identifier of element on current page.
Related
I'm making a blog and I am using a free template to manage my fron-end part, but now I want to add one class called code_block. Every time I write an article and I want to add a
<p class="code_block"> some code</p>
and the code piece to be displayed in a similiar to how this last code is displayed here in stackoverflow.
I went to the END CSS file entered:
.code_block{
color: #933 !important;
border: 5px solid red;
}
didn't work, tried adding the css directly in the html, didn't work, tried adding manualy the css while in chromium web tool, didn't work what is happening ?!
source: https://github.com/martin-varbanov96/summer-2016/tree/master/Pitonia/Django/mysql_blog/blog
EDIT:
made it more specific:
.ar
ticle ul li p .code_block{
color: #933 !important;
border: 5px solid red;
}
Still not working I think priority is not the problem here.
ID has got more priority. Remove the color from here. Or you can override.
#body.home .body div p {
color: #ffffff;
display: block;
font-family: Arial;
font-size: 18px;
font-weight: normal;
line-height: 24px;
margin: 0 auto;
padding: 0;
text-align: center;
width: 780px;
}
You can override it like this...
#body.home .body div p.code_block{
color: #933;
border: 5px solid red;
}
I am trying to style a pull-quote div tag. I want to style the quote mark " so it is bigger than the rest of the statement.
I thought of using the first-letter pseudo-element. However when I did so, it did not work properly. Here are the cases I tried:
If I wrote the sentence like this: "This is a test,(with no spaced between the "and theT then both the "Tappear big.
If I wrote it with a space between them, none of them get bigger.
My question is: is there a way to get the " only to be bigger?
Here is the html code I used: <div class="pullquote-right">"this is a test</div>
The css:
.pullquote-right {
display: inline-block;
max-width: 350px;
float: right;
padding-left: 15px;
margin-left: 25px;
border-left: #3b5998;
border-left-width: thick;
border-left-style: solid;
font-style: italic;
color: darkgray;
font-size:115%;}
.pullquote-right::first-letter {font-size: 200%;}
Thanks.
An option would be to use the ::before and ::after pseudo elements.
.quote::before,
.quote::after {
content: "\0022";
font-size: 2em;
font-weight: bold;
color: green;
vertical-align: -.3em;
}
<p class="quote">This is a great quote</p>
The first-letter pseudo class refers to the first letter and the punctuation directly preceding it. Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
I think the easiest way to do what you want might be to put a span tag around the punctuation you want to make bigger and style that from the css.
Or you can check out this work-around: https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
I ended up combining the two answers to be able to use the div tag and not neet to add extre <p></p>as follows:
.pullquote-left {
display: inline-block;
max-width: 350px;
float: left;
padding: 20px;
margin-left: 15px;
border-left: #3b5998;
border-left-width: thick;
border-left-style: solid;
font-style: italic;
color: darkgray;
font-size: 110%;
background-color: white;
box-shadow: 5px 5px 5px #888888;
text-align: center;
}
.pullquote-left::before {
font-size: 2em;
font-weight: bold;
content: "\201C";
}
<div class="pullquote-left">This is the final result.</div>
I'm trying to make a box with a header, a first paragraph, and a second paragraph. How can I select only the last paragraph in CSS so I can move it down, so it isn't overlapping the first paragraph? This is the code I have:
#info-box > p {
line-height: 1.3em;
font-size: 17px;
font-family: Arial;
text-align: center;
color: #979797;
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
position: absolute;
}
#info-box:nth-child(2) {
line-height: 1.3em;
font-size: 17px;
font-family: Arial;
text-align: center;
color: #979797;
margin-left: 20px;
margin-right: 20px;
margin-top: 100px;
position: absolute;
}
You're looking for :last-child
Quoting the specification:
The :last-child pseudo-class represents an element that is the last child of some other element.
Here's an example:
div {
width:100px;
height:100px;
background-color:red;
border:solid;
margin:2px;
display:inline-block;
border-width:1px;
}
div:last-child{
background-color:white;
}
Although to be fair, absolute position is rarely "the way" like Nit implied in the comments. Fixed sizes in pixel don't work too well on different screen sizes and different zooms, prefer a more logical layout. See this question on why.
CSS for last element try to use :last-child
#info-box:last-child {
}
Check here for reference CSS selector
http://www.w3schools.com/cssref/css_selectors.asp
Working on revamping a client's site, and one of their requests is to change the nav to accommodate text of any size. Here's the trick: I can't change html, just css and javascript. Oh, and the version of jquery on the site is 1.4.4 - this can't change either.
I've got a javascript-based solution in place, and it's working across all modern browsers - but I can't seem to get it to function in IE7. The solution relies on all nav elements rendering in their native width (i.e. wrapping instead of resizing), in order to calculate the necessary width changes. In IE7, the nav items don't clear - the last one shrinks to a tiny size to fit into the first row, and the javascript thus can't tell that resizing needs to be calculated.
The javascript should work fine, the main issue is that I need to know what my css isn't doing to force the last element to wrap instead of resize in IE7. I've tried an exhaustive number of combinations of display: inline-block;, white-space: nowrap;, and float: left; to no avail.
I isolated the nav in question and put it in a fiddle right here. If anyone has any ideas, or knows a better way I can implement, let me know - all suggestions welcome!
I have two versions of your jsFiddle here to compare with and verify that this is what you're going for. I cleaned up your CSS a bit but the main thing I did was set a percentage width on the li in your navigation. You have 6 elements so 100/6 = 16.6666%. I should also not I removed the jQuery in the jsFiddles below.
http://jsfiddle.net/D8etp/1/
and
http://jsfiddle.net/D8etp/2/
CSS
body {
margin: 0;
}
#top-nav{
padding-top: 30px;
width: 940px;
}
#nav {
color: #FFF;
font-size: 12px;
margin: 0;
padding: 0;
text-transform: uppercase;
min-height: 49px;
background-color: #007369;
overflow: hidden;
}
#nav > li {
display: block;
float: left;
list-style-type: none;
margin: 0;
padding: 9px 0 0 0;
width: 16.6666666666%;
}
#nav > li > a {
display: block;
box-sizing: border-box;
text-align: center;
padding: 7px 12px 17px 12px;
line-height: 16px;
margin: 0 4px;
color: #fff;
text-decoration: none;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
overflow: hidden;
}
#nav > li > a:hover {
background: #b0a893;
}
#nav > li > a:hover {
text-decoration: none;
}
I am setting the style of list items like so:
ul.list li {
background: #FFFFFF;
padding: 0 5px 0 5px;
height: 20px;
}
ul.list li:hover {
background: #F7F7F7;
}
but I want to define a special list item for the title of the list only it inherits the previously defined style too. I know I could just give the above styling a class but that feels cumbersome. Do I have to manually "undo" everything just for the special list item or give the above styling a class? or is there a better way to do it? Maybe I shouldn't be using a list item for the title?
ul.list li.header {
font-size: 16px;
font-weight: bold;
}
If you're at liberty to use advanced CSS3 selectors, you can use the :not() selector:
ul.list li:not(.header) {
background: #FFFFFF;
padding: 0 5px 0 5px;
height: 20px;
}
Otherwise, you'll just have to manually override them.
If the title of the list must be inside the list, I'd probably just (as you mentioned) "manually undo" them:
ul.list li.header {
font-size: 16px;
font-weight: bold;
background: transparent;
padding: 0;
height: auto;
}
It's not so bad.
If you only need to support modern browsers, you could do this:
.list li:not(:first-child) {
background: #FFFFFF;
padding: 0 5px 0 5px;
height: 20px;
}
.list li:first-child {
font-size: 16px;
font-weight: bold;
}
.list li:hover {
background: #F7F7F7;
}
This eliminates the need for any classes (though you could replace :first-child with .header if you do want to keep that class).