University:
Boston University
Course:
MET CS 201 | Introduction to Programming
Academic year:

2021
Views:

475

Pages:

15
Author:

Rory Ashley

Practice! • Create 2 classes named blueFont and purpleFont • blueFont should make the text blue and purpleFont should make the text purple • Apply these classes to sections of your html code • Answer .blueFont{ color : blue; } .purpleFont{ color : purple; } ID Selector • Suppose you want to change the style of only one particular element • Use the ID Selector! Back to HTML: IDs • IDs are used to specify the style of one, unique element • Syntax: Back to CSS: IDs Syntax: #id_name{ property:value; } Example: Practice • Transform blueFont and purpleFont classes into IDs • Apply them to your HTML • Answer #blueFont{ color : blue; } #purpleFont{ color : purple; } KEEP IN MIND… • An element can belong to more than one class by putting spaces between the class names • You can select multiple elements by putting commas between them in the selector Structure • Structure is important if you use CSS • Your page should be made up of blocks • All the outlined blocks in the image are block elements You Can Use divs for Structure •

is an element in HTML • HTML documents should consist of a bunch of nested and consecutive block elements • div is a block element used for grouping other block elements • Think of it as a container How would you use div? • div is used as a logical divide • if you have a page about cats and dogs, you can surround the cat part with

and surround the dog part with another

• This lets you style everything about cats all at once, even if they’re in other blocks I thought classes did that anyway?! • Yes they do, but if you put a border around all elements in class “cat”, everything will have a separate border of its own, rather than share one border Using Div • Place the

and

wherever you think you need to group a bunch of block elements • make sure div has a class •

…

• Then go ahead and style it like you would style any other element in CSS Try it! • In your HTML document, group 2 paragraphs and a header in one div and 2 paragraphs and a header in another div • Apply a different class to each div. You can use .blueFont and .purpleFont Your code should look like this • HTML CSS Inheritance • Remember all the way back to when we used body{ color: blue; } • If you think about it, body only refers to one thing, the body, but all the paragraphs and links, and text were all colored blue • This is because of inheritance Inheritance Continued • What inheritance means is that the styles you apply to a parent will also be applied to child elements • Wait… Parent? Child? What? • Think of Parents as a block in the structure picture we just showed you • Anything inside that block is a child, it will be styled the way the big block is • The body element is a huge block that surrounds everything on the page