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

2022
Views:

328

Pages:

2
Author:

pubicswprv

CSS Basics CSS allows you to format an entire webpage (or an entire website!) in one document. This keeps the HTML code from becoming too confusing. There are 3 kinds of style sheets: external, internal, and inline. External is the most useful one so weʼll be using that. External Style Sheets Add this command in < head > … < / head > after < title > … < / title >: < link href=”location-of-your-file.css” rel=”stylesheet” type=”text/css” > Syntax selector { property: value; } • • • Selector = the section of HTML that you wish to format Declarations = the format commands. Made of a property and a value o Property: style element that you want to change o Value: what you want to change it to o Each declaration ends in a semicolon ; Example: #header { background-color: blue; font: Verdana, Helvetica, sans-serif; height: 100px; width: 700px; } Selectors ID SELECTOR • used to specify a style for a single, unique element. • uses the id attribute of the HTML element • is defined with a "#". • Example: #para1 { text-align:center; color:red; } This example would make the specified text red and center-aligned. It would ONLY affect the element with id=”para1” CLASS SELECTOR • use when you want to style several HTML elements at once. • Defined with the “.” symbol. • For example, a class that center-aligns text would look like: .center { text-align:center; } This would make all HTML elements with class=center be centeraligned. • • You can also specify that only specific HTML elements should be affected by a class. For example, all p (paragraph) elements with class="center" will be centeraligned: p.center {text-align:center;} • REMEMBER: DO NOT START A CLASS NAME WITH A NUMBER BECAUSE IT IS NOT COMPATIBLE WITH ALL BROWSERS COMMENTS You can include comments to help explain your code. Think of it as writing a little note to yourself. Comments are ignored by the browser and donʼt show up in your actual website- theyʼre just for explaining certain bits of code. Comments begin with /* and end with */ FOR EXAMPLE: /* This is a comment */ The stars are closest to your comment.