CSS Styling Tags So far weve used CSS to style existing tags ltpgt lth1gt ltligt lttdgt Etc Problem This separates each paragraph into a separate element If the p style has a border each paragraph has its own border ID: 1020467
Download Presentation The PPT/PDF document "Div Tags Styling multiple items as once" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
1. Div TagsStyling multiple items as once
2. CSS: Styling Tags So far we’ve used CSS to style existing tags<p><h1><li><td>Etc.Problem: This separates each paragraph into a separate element.If the p style has a border, each paragraph has its own borderWhat if you want to style a group of items as one element?
3. Creating Divs What if you want to style a group of tags with one style?What if you want to group a bunch of elements together on a web page so that they have: one cohesive border, one background color/image one font color etc.?You can!! Create your own div! <div id = “d1”> </div>And place it around the tags you want to groupNote: for now we’ll give our divs an id, so we can style them!
4. Example:Note that the <div> </div> goes around multiple other tagsWe add style to the entire content of the div (we used the id here to identify which div to style)HTML CodeCSS CodeWhat it looks like in your browserI represented colors using hex numbersI could have used darkpurple, etc.
5. Notes on Div TagsThey go around other tags!!!! You can put div tags inside of div tags you can put div tags inside of the body that’s pretty much it. Otherwise they go around other tagsYou can have multiple div tags on one page for now, give each its own UNIQUE id use the id to style
6. Another Example (Nested Div Tags):HTMLCSSOuter Div (d1) Styled hereInner Div (listdiv) Styled hereThis is what it looks like in the browser
7. TakeawaysDiv tag:Goes around other tagsGroups tags together so you can style them all cohesivelyYou can nest div tags but in general they go around other tagsIf you give each div a unique id you can style the different divs on your web page separately