Level 1 - Week 2

</> wiggywebmasters.com

CSS • Cascading StyleSheets (CSS) deﬁnes the look of your
web page by attaching style rules to your HTML tags • You can attach rules to: • tags • tags with an id attribute or • tags with a class attribute • There are different versions of CSS

Where do you put your stylesheet? • Your stylesheet should
be put into a seperate .css file • For now, put your .css file in the same directory as your .html file • Finally, add a link inside the <head> tag of your .html file to your .css file, like this... <head> <link rel="stylesheet" href="styles.css"> </head>

CSS rules General form... selector { property : value; }
! the selector applies to all matching tags - selectors can have multiple property : value; pairs

Changing fonts body { font-family: Helvetica, Arial, sans-serif; /* 'web
safe' fonts */ font-size: 12pt; line-height: 1.25em; text-decoration: none; /* or line-through, overline, underline */ text-transform: none; /* or capitalize, full-width, uppercase, lowercase */ }

Using other fonts @font-face { font-family: 'MyFont'; src: url('fonts/my-font.ttf'); }
body { font-family: 'MyFont'; }

Adding color body { color: black; /* text color */
background-color: white; }

Attaching rules to a tag HTML... <h1>Hello World</h1> CSS... h1
{ color: red; }

Attaching rules to tag with an id attribute HTML... <h1
id="say-hi">Hello World</h1> CSS... #say-hi { color: red; }

Attaching rules to a tag with a class attribute HTML...
<h1 class="say-hi">Hello World</h1> CSS... .say-hi { color: red; }

Level 1 - Week 2

Level 1 - Week 2

Graham Lewis

More Decks by Graham Lewis

Other Decks in Technology

Featured

Transcript

</> wiggywebmasters.com

CSS

CSS • Cascading StyleSheets (CSS) deﬁnes the look of your

Where do you put your stylesheet? • Your stylesheet should

CSS rules General form... selector { property : value; }

Changing fonts body { font-family: Helvetica, Arial, sans-serif; /* 'web

Using other fonts @font-face { font-family: 'MyFont'; src: url('fonts/my-font.ttf'); }

Adding color body { color: black; /* text color */

Attaching rules to a tag HTML... <h1>Hello World</h1> CSS... h1

Attaching rules to tag with an id attribute HTML... <h1

Attaching rules to a tag with a class attribute HTML...