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

2024
Views:

172

Pages:

16
Author:

Guangi2h1g

Cascading Style Sheets What is CSS? • Stands for Cascading Style Sheets • Responsible for styling the look of your website • Remember your HTML document? • Remember how plain it looked? • You can use CSS to add color and stuff! Creating a CSS file • In Notepad++, create a new text document called “styles” and save it with a .css extension • Go to your main .html file and add this line inside the … tags, after the …: Your page should something look like this: Basic Syntax FORMAT: selector { property: value; } • selector: what you want styled (e.g. body) • property: what you want changed (e.g. background) • value: the new value of that property (e.g. green) • So you have the thing you want to style followed by a list of properties and the value for that property • This list must be between 2 curly braces Example body { background: green; } Question How would I turn the background of all paragraphs red? Answer p { background: red; } CSS in HTML docs • CSS styles elements of HTML. • For example, to turn all paragraphs’ text green, do: p { color : green; } • Note: selectors are generally an HTML element without “<“ and “>”. So “

” becomes “p”, and “” becomes “body”, and “

” becomes “blockquote” Practice! • So how do you think you would implement it to make all your text blue? • I’ll give you a hint, the element you’ll want to style is • The answer: body { color : blue; } More CSS Syntax • You can put in instructions for multiple elements by simply adding another block of code for the second element under the first h1{ color: green; background-color: yellow; } h2{ color: green; background-color: yellow; } • You can style more than 2 elements and add more than 2 attributes - you can have as many or as few as you want! Combining Elements • If you have multiple elements that share the same styles, the you can combine them • For example remember how h1 and h2 have the same styles? h2, h1{ color: green; background-color: yellow; } Selecting in CSS • An important part in styling is learning how to select elements • For example p{ color : green; } • In this case, “p” is called a selector, it selects the thing you want to style • We learned how to select all paragraphs, but suppose you want to select only some? • You’ll need to learn how to use classes Back to HTML: CLASSES • Classes basically categorize certain elements Back to CSS • Now if you specify that you want only paragraphs of hugsKitty type, then only those hugsKitty will change p.hugsKitty{ color : maroon;  } • So you specify element type, add a dot, and then add the class name • More than one paragraph can have the same class Classes (continued) • Different types can have the same class name. If you name an h1 element class hugsKitty, and you want both p and h1 to have the same elements then do this: .hugsKitty{ color : maroon; } (Just don’t specify element type but keep the dot in front of the class name) EXAMPLE INPUT OUTPUT