Session 6 - Library Style File
Right click on each image and save in the images subfolder
1. Create CSS library file
/* Styles */ body { font-family: arial; color: rgb(128,0,0); /* Maroon */ padding: 20px; } ul { font-size: 20px; color: rgb(0,0,140); /* Dark Blue */ } table { font-size: 20px; color: rgb(0,0,140); /* Dark Blue */ width: 100%; } th { font-size: 24px;} tr { text-align: center;} img { max-width: 100%; height: auto; /* fit to height */ }
Save as
styles.css
in assets sub folder
2. Insert
assets/styles.css
link.
<!DOCTYPE html> <html lang="en-US"> <head> <title>My Website</title> <link rel="stylesheet" href="assets/styles.css"> </head> <body>
Save and Browse
3. Add Programs.
<table> <tr><th>Drug Treatment Programs</th><th>Educational Programs</th> <th>Counselling Programs</th><th>Hate Crime Programs</th></tr> <tr><td><img src="images/image1.jpg" width="100%"><br/> DRUG TEXT GOES HERE</td></tr> <tr><td><img src="images/image2.jpg" width="100%"><br/> EDUCATIONAL TEXT GOES HERE</td></tr> <tr><td><img src="images/image3.jpg" width="100%"><br/> COUNSELLING TEXT GOES HERE</td></tr> <tr><td><img src="images/iimage4.jpg" width="100%"><br/> HATE CRIME TEXT GOES HERE</td></tr> </table>
Save and Browse
