User Tools

Site Tools


css_intermediate

Lab/Workshop Intermediate CSS 2

*Your professional site should include several pages, using images, colors, and structure effectively. There will probably be links to external sites as well as to your related projects (such as your blog). You should control the visual effects and placement of items using one or more external CSS style sheets. Make choices about color, font, and spacing.*

1. Review Sherwood's CSS Overview 2. Self-paced exploration of CSS via [W3Schools](https://www.w3schools.com/css/css_intro.asp) 3. Check [Josh's page](https://javaught.com/) with Inspector for image fix; check [Brad's page](http://coolcoffee.net/) for working with divs.

#### Suggested Modules

- [Intro](https://www.w3schools.com/css/css_intro.asp)

- [Syntax](https://www.w3schools.com/css/css_syntax.asp)

- [How to](https://www.w3schools.com/css/css_howto.asp) see section on External Style Sheets

- [Colors](https://www.w3schools.com/css/css_colors.asp)

- [Backgrounds](https://www.w3schools.com/css/css_background.asp)

- [Text](https://www.w3schools.com/css/css_text.asp)

- [Fonts](https://www.w3schools.com/css/css_font.asp)

- [Lists](https://www.w3schools.com/css/css_list.asp) 3. Add and style multiple pages in your website.

#### See also:

* [CSS reference](http://www.w3schools.com/css/default.asp)

* If you have the basics mastered, consider features such as

### Adding Google Fonts

You can always call a font-family that is on your computer. But maybe your user doesn't have that font. So if you need a special font you:

1. Find the font via Google Fonts 2. Add an additional style-sheet link on your index file pointing to that font's location at google 3. Edit your style.css and use that font (ex. set your H1 to use the new font family).

See the code behind this page [class index.html](http://kennethsherwood.com/engl756856/)

[Simple instructions](https://developers.google.com/fonts/docs/getting_started)

[Google Font Finder](https://fonts.google.com/)

### Divs and Classes

Some sites you visit will have sections styled distinctly, such as a navigation bar. You can mark any small or large section of your site as a division or <DIV ></DIV>. Then in the style sheet, you define a special style for that *CLASS* of div. [Read more at W3schools](https://www.w3schools.com/cssref/sel_class.asp). Warning: it's powerful but quickly becomes complex!

css_intermediate.txt · Last modified: 2020/05/19 03:35 by admin