Summary 3

Topic 1: There are three different ways to link up your CSS to your HTML

The first way to linking your CSS to the HTML document is known as inline style. This is where you add a tag using style directly to the HTML. An example would be <p style="font-style: normal; font-weight: 400;">. This is very resstricted as it only affects the text or tag you attach it to. Embedded CSS is the second way to do CSS on an HTML document. These are placed in the head of the HTML document which mean that the limit of this CSS is that it only effects the page that you put it on. The final way is known as linked styles. This one comes in handy when you have more than one page for your website as this is creating a whole separate style sheet that you link to your HTML document. You can link this to any HTML document you want to, hence why it's the best when having multiple pages.

Topic 2: Styling your HTML with IDs and Classes

Class and IDs areused when you want to focus on specific areas of your document. You first have to define when you want you class and IDs to do in the CSS before applying them to the HTML document. With class attributes, you can add them to any HTML element as long as they are in the body. These can be used across multiple pages as well and you can apply the same rules from the class attribute to elements that have different tag names. So, let's say you wanted to apply color to some text. you would write something like .specialtext {color:green;} in the CSS and then highlight the text in the HTML you want it to effect and the select div. IDs are mainly used to uniquely identify an element on the page. Because of this and because of them having a unique value, you can only use each ID one time. When you want to use an ID is when you have to identify a number of elements on the HTML document that will share a set of characteristics. Just don't go crazy with either of them.

Topic 3: How to pass down CSS properties

The act of passing down attributes from one CSS property to another is called inheritance. So, lets say you wanted each word in the body of your document to have the font Helvetic. You would go into your CSS style sheet and type in: body {font-family: helvetica;}. So, now every single word you type will now be in Helvetica font. Inheritance mainly works with things that affect text so, things like color and size will be inherited just like the font family example above. However, there are some CSS properties that can not be inherited as they deal with the position of things on your webpage. So things like margins, borders, and padding can't be inherited.