CSS 1: Basics. Exercise #1: CSS Example

Size: px

Start display at page:

Download "CSS 1: Basics. Exercise #1: CSS Example"

Chad Booker
7 years ago
Views:

1 CSS 1: Basics Exercise #1: CSS Example 1. Google: w3 schools css tryit 2. The first link should be Try CSS - W3Schools 3. Notice that there is a new tag after <head> and that s <style> 4. This one needs to open and close and it s nested within the <head> section 5. In this sample the part of an HTML page are a. parsed out down the page b. style attributes are list in a single column c. separated by a semi colon d. enclosed in curly brackets e. BUT they are written in attributes that you already know 6. Remove everything between the <style> tags and submit the text 7. See what s happened, this looks like stuff you already know 8. Add it back and let s add another attribute 9. Under the last curly bracket, right above the </style> tag, let s define <span> 10. Remember to finish every line, even the last line with a semi-colon; Example #2: CSS span span { color:blue; 11. Wrap the word paragraph with <span> 1

2 Intro - Attributes Example #3: CSS font span { font-family: verdana; color:blue; Exercise #3: CSS font 1. Add some larger pieces of text between the paragraph tags 2. Add some more <span> tags 3. Add a new font to the span CSS 2

3 Selectors Example #4: Selectors h2 { text-align:left; font-size:40px; color: red; Exercise #4: Selectors 1. Refresh the Tryit editor for CSS Selectors 2. Add some more text to the paragraphs 3. Add a heading <h2> above the paragraph 4. Write the CSS for the heading so that it is a. Text -Aligned-Leftr b. 40px in size c. Colour: red 5. Make <p> Pink with a font-family of Garamond Example #5: More Selectors span { font-size:40px; background-color: Green; font-style: italic; Exercise #5: More Selectors 1. Refresh the Tryit editor for CSS Selectors 2. Add some more text to the paragraphs 3. Write some CSS for <span> 4. Wrap the first word of every paragraph in a span tag 5. Write the CSSS for span so that it is 40px, on a green background and in Italics 3

4 Comments Example #6a: HTML Comments  CSS comments, on the other hand, look like this: Example #6b CSS Comments /*I'm a CSS comment!*/ Exercise #6: Comments 1. In the same window, add a comment in your CSS to explain which manager insisted that you use green backgrounds in the span tags because that is not awesome 2. View results you should not see anything. 4

5 Review Example #7: Review of Selectors <head> <style> </style> </head> h1 { color:red; h2 { color:purple; font-size:25px; h3 { font-family:impact; p { font-style:italic; color:blue; Exercise #7: Review of Selectors 1. Open a w3school HTML tryit for headings 2. After the <html>, before the <body> tag 3. Create first an open/close <head> 4. Between the <head> open/close give me a <style> open/close 5. Write CSS to make the following things happen a. <h1> red b. <h2> purple and 25px c. <h3>impact d. <p>italic and blue 5

6 Hexadecimal Colours Example #8: Hexadecimal Codes h1 { color:#daa520; Exercise #8: Hex Codes 1. Take the same W3 Schools HTML Headings Editor 2. Open another tab in your browser and search for W3 Schools CSS there are links along the left hand side of the page, chose the last one: CSS Color HEX 3. Edit <h1> through <h3> with new HEX colors and write the CSS for the <h4> to <h6> with new colors Bonus: 4. On your CSS for <h3>, replace the ending curly bracket with an open one and see what happens. a. CSS will break the whole way down if there is a mistake in the code. 6

7 Pixels vs. EM Example #9: EM p { font-size:2em; Exercise #9: EM 1. Using the editor window that you just gussied up with HEX codes 2. There still should be a paragraph on that page 3. Add CSS for <p> and made it 2em 7

8 Default Fonts Example #10: Default Fonts h1 { color:#e87d73; font-family:serif; Exercise #10: Default Fonts 1. Style the <h1><h2><h3> 2. serif: some modest flourishes 3. sans-serif: simple font with no flourishes 4. cursive: resembles cursive writing 5. You may not notice a difference in the <h1> heading 8

9 Backup values Example #11: Backup values p { font-family: Garamond, cursive; Exercise #11: Backup values 1. To the <p> CSS, add a font-family of Garamond with a backup value of Cursive. 2. Now change Garamond to Miller 3. Now make the first font cursive with a backup of Garamond 9

10 Background color, height, and width Example #12: Styling <div> div { background-color:#cc0000; height:100px; width:100px; Exercise #12: Styling <div> 1. Get rid of your paragraph 2. Add an open/close for <div> 3. Pick a HEX code from one of your headings 4. Make your height 100 px, and your width 100 px. 10

11 Borders! Example #13: Borders td { height:50px; width:50px; border:1px dashed blue; table { border: 1px solid black; Exercise #13: Borders 1. Open a w3schools Tryit window for Tables 2. After the <html>, before the <body> tag 3. Create first an open/close <head> 4. Between the <head> open/close give me a <style> open/close 5. Set your tds (table data cells) to have a height and width of 50px - so we can see them better when we add our border. 6. Give your tds a border of 1px dashed blue. 7. Give your table a border of 1px solid black. Before we move on: Copy the <head> and <style> section from the tables page include the table styling, we can remove it later. 11

12 Styling Links Example #14: Styling Links /* unvisited link */ a:link { color: #FF0000; /* visited link */ a:visited { color: #00FF00; /* mouse over link */ a:hover { color: #FF00FF; /* selected link */ a:active { color: #0000FF; Exercise #14: Styling Links 1. Open a w3schools window for HTML Links 2. Copy the <head> and <style> section just after the <html> open tag 3. Code CSS to make the link #FF0000; when unvisited 4. The Comment will help you keep the code strait and this is how it should be written 5. Write the CSS for the remaining 4 states 12

13 Review Example #15: Review h1 { font-family: verdana; color:#00ff00; p { font-size:18px; color:#ffa500; Exercise #15: Review 1. Add a pair of <h1></h1> tags inside the body of our HTML page. Your h1 header can say anything you want! Then, on the CSS tab, make its font-family to Verdana and its color to #00FF Add a pair of <p></p> tags below your h1 header. Put any text you like in there, then code the CSS and set the font-size to 18px and its color to #FFA

{color:blue; font-size: 12px;}

{color:blue; font-size: 12px;} CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied: