Today: continue with HTML and begin with CSS
HTML tells a browser what is on the web page (paragraphs, images, links, etc.) while CSS tells the browser where the content should go and how it should look (font, colors, layout, etc.)
1. CSS you’ll learn today:
– How to change the font and color of text
– How to change the background image and background color of a page
– How to style links
– How to create a simple page layout
– How to add comments in your code
– How to add borders
– How to create text shadows
2. Fun with CSS colors
You might have noticed in some of our tutorials the usage of color values. You can either use color names or hex values, like these.
Hex value examples:
#ffffff (white) (full color)
#000000 (black) (no color)
#ff0000 (red)
#00ff00 (green)
#0000ff (blue)
Test your new color knowledge with this fun game!
3. Let’s get started!
b. Copy the code (Control a and then Control c)
c. Open Notepad++ and paste the code in a new file (File, New)
d. Save this as csspractice.html
e. Let’s look at the page and the code before we start changing things
f. Go here to begin the CSS Challenge
4. More CSS
Let’s use CSS to create some animated elements with Animate.CSS
You are going to download the source code and then use the following HTML:
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Animate.CSS test</title>
<link rel=”stylesheet” href=”animate.min.css”>
</head>
<body>
<p><h1 class=”animated infinite rubberBand”>Example</h1></p>
<img src=”https://www.mhswebdesign.com/storage/2014/05/summer-smaller.jpg” class=”animated infinite bounce” />
<p><button type=”button” width=”60px” class=”animated infinite jello”>Click me</button></p>
</body>
</html>