CSS Tutorial - 3 - Grouping Elements

[draken4200]

aw, it didnt keep the spacing :(

[draken4200]

body { color: blue; background-color: red; }

That format is better to me.

[Heetzy]

hmm just let me ask 1 question... why do you have 2 color background? that's pretty stupid...

[teltploek]

It's really not recommended to use inline styles. Do not listen to the advice given in this video. There are other more efficient ways to differentiate h1-headings and all other tags.

[bartjoboy]

@teltploek inline CSS can be useful in some situations though. For example, if you just want a small part of a bit of text to have a different color of font, you could add a span tag with an id or class and add that your .css file, but I find it a lot quicker to just use inline CSS to that small bit of text...

Also, if you want to send an automated email (with PHP for example) and you need to do some styling, inline CSS is the only way to properly style an email message.

[teltploek]

@bartjoboy

1) I absolutely disagree. Of course it's "usefull" when you look at it from a lazy point of view, but laziness isn't really compatible with proper development, and will only cause problems for the team you're working with. If you've planned your project properly, you've already taken that part of text difference into consideration, and have already made the appropriate selector in your stylesheet. (To be continued...)

[teltploek]

@bartjoboy (continued...) You need to keep HTML as structure minded as possible, and leave all the presentation bits in the external stylesheet. In other words: Always seperate these areas. It's also more scalable this way, say if you want to change the design completely. (To be continued...)

[teltploek]

@bartjoboy Then you could just throw away the old stylesheet and replace it with a new one - in your case, you would also need to go in, and adjust every little inline rule, that someone found "usefull" at the time, because the didn't plan right, and was lazy at the time of development.

I don't see a valid argument in this context, sorry. (To be continued...)

[bartjoboy]

@teltploek Ye alright, you got a point there.. it was probably because of laziness, hehe xD But I now see what you mean since I had to change the color styling of a website. They used inline CSS in a lot of spans.. I had to go into all (!) the HTML files (about 25 of them) and change the styling.. A lot of wasted time I could put into other projects (I am doing an internship at a web development company). I now never use inline CSS anymore in personal projects.. xD

[krishnankuta]

@bartjoboy:hey im new to CSS.i just wana ask somthing if u dnt mind.In inline css its limited to tht single page but in outline css its applicable to all the pages, mi right?

[bartjoboy]

@krishnankuta Almost. Inline CSS is only applicable for the element where you put the style parameter in. for example when you do <p style="something">text&#60­;/p> the style is only for that P tag.

Outline CSS, so between te "style" tags, is for the whole page, so when you style a p tag, all the p tags in the page will inherit that style.

[teltploek]

@bartjoboy 2) You're right about the e-mail part, but that also has to do with the fact, that there's a lot(!) of e-mail clients out there, that has a lot of different rules, when it comes to displaying HTML in e-mails. Therefore it's recommended that you go medieval when styling an e-mail, using older versions of HTML, and therefore also inline styles to be as compatible as possible - and even then, you can't be sure that things will turn out correctly for every client. (The end)

[nilwon]

Hi. Are the terms "Element" and "Selector" interchangeable? Just want to make sure I am understanding!

[ThyReturner]

Dude your tutorials are the freaking best! Thank you s much.

[codetherule]

You good people never cease to amaze me, always helping humanity out like it ain no thing, and being nonchalant about it. F the haters they all got they're heads up they're butts like a very gay ostrich ...hetep

[codetherule]

You good people never cease to amaze me, always helping humanity out like it ain no thing, and being nonchalant about it. F the haters they all got they're heads up they're butts like a very gay ostrich ...hetep

[5trayProductions]

@tjv323 it does, but that's not specified. if u font add the h1 and p stuff the whole thing will come out 1 way. So it's just to make things more specific :)

[tjv323]

you have style type="text/css"  body, h1, p etcccc

wouldn't BODY cover h1 and p since they're all in the body?

[TMCTutorials]

Im making tutorials on games, programs and softwares, please check out my channel and videos i need views and SUBSCRIBERS !!! leave suggestion for tutorial you need and i will make it happen !!!

ww,yotube,om/user/TMCTutorials

[altisw5]

Is it me or is he talking a bit slow?

Have seen a lot of Java Tutorials and I'm a bit familiar with his voice.

Good Tutorial (as always).

[mangoprojects]

@wanna666b I totally agree. Link to an external file is efficient and effective.

[mangoprojects]

Thank you. Good tutorial. -behindvfx

[lonecrow66]

Excellent series of tutorials thanks!

[Al3lilive]

adminstalk. com

[thusuba]

you have good teaching ability.can u make a tutorial for j2ee(jax rs)??

[just0408]

u have good tutorials, i appreciate a lot ... therefore i thank you for teaching me ...

[MrAlanshow]

Dude,your website ROCKS!!! =) thanks a lot

[BufferOverflowAttack]

This is actually referred to as "Nesting elements" on the exams.

[octa231]

Yup, that's right, Inline CSS can be confusing, if you want to find a line of code you forgot to close.

But External CSS is better, because you can find the code fast, because it's aranged, instead of searching it like 4 hours, you find it in 5 minutes :).

[rbrtchng]

well the good thing about CSS is that you can easily find it when you view the webpage. It would take like a couple of seconds to find that specific line, whereas it's a bit more confusing for external CSS if you only want to style a specific line, you'd have to go back and forth finding the specific name/id/span/div that you used. Idk...I guess it's just me.

[impulsive2urge]

Your voice is soooo mellow soft.

[tholithemba]

lol

[rbrtchng]

not necessarily. It depends on what you want to do.

[JustaFreak15]

Normally though, it is alot worse... even internal stylesheet is better than inline...

I perfer external to the max though =)

[pingolluz]

I think we need to register just to get through your website. thanks for sharing all your videos here. More power!

[pivotmaster76]

this was very help ful thnx! 5*

[AlgeriaSon]

Thanks for sharing !

[Cemrotterdam]

thanks !!

[glassprison01]

Cool tutorials man, yours are easy to follow..that tutvid guy speaks waay too fast.

[dagger86]

Brilliant. Thank you for helping us.

[megalicious1105]

Does your website still exist?

[leavemealone300435]

how do u make the words in notepad++ colored

[KGTUCP]

that aint notepad

[thyd360pop]

it's notepad++, a special notepad you can download and you have to save the file with the end like "file.html" to do that

[sirlancerbots]

notepad ++ ;)

[tubeparker23]

how do use an image as a background for heading?

[Techhelpstudio]

nigga its the same

[tubeparker23]

who says im a nigga?

[moussaemad]

h1 {background-image:url('image.g­if');}

[athiria]

I learned a great deal. Thanks!

[vikramsince1993]

yo and also do u say declaration or decoration?

[StvnBrkbck]

declaration

[vikramsince1993]

This is the third time!

[aspcajaye]

css is a basic language

[1AlexWorld1]

What scheme was he using?

[ArKaNeSSS]

XVRE