Internal CSS

 Example of using Internal CSS. Notice the format.  <html>
    <head>
        <title>Internal CSS</title>
        <style>
            p {
                color:red;
            }
        </style>
    </head>
    <body>
        <p>This paragraph is red.</p>
    </body>
</html>

Recreate this page using internal CSS

This heading is centered

This page has a maroon background.

This paragraph is white. All paragraphs on this page will be white unless stated otherwise.

This paragraph is blue though!



The image below has a width of 100px and a height of 100px. It also has a solid line border that is 5px wide.

*Image URL = https://static1.squarespace.com/static/5886475d579fb3df82410eac/t/5886d960b8a79b3c6f198930/1485232488028/?format=500w

Please check your "Shared with me" folder on Google Drive to find your assignment document.

Remember to right click on your document and"open with" Editey.

Extra Resource: http://www.w3schools.com/css/default.asp

Inline CSS

<tag style="property:value;"> Content </tag>

Use these three properties to recreate the webpage below. 

  • Color 
  • Text-align 
  • Background-color

*Remember to use the heading tag

This is a Blue Page with Red Text

hello there

This paragraph is centered and has a size of 10px. This paragraph is for extra credit. I suggest you try this.






Please check your "Shared with me" folder on Google Drive to find your assignment document.

Remember to right click on your document and"open with" Editey.

Extra Resource: http://www.w3schools.com/css/default.asp

Images

Images on a Webpage Example
 

Your webpage must include the following:

  • At least 3 different images
    • First image
      • Original Size
      • Width = 200px and height = 200px
      • Width = 150px
    • Second image
      • Original Size
      • 50% the size
      • 25% the size
    • Third image
      • Original Size
      • Cropped to focus on the subject of the image using Pixlr.com/editor

Please check your "Shared with me" folder on Google Drive to find your assignment document.

Remember to right click on your document and"open with" Editey.

First HTML Example

Create a webpage using HTML with the following minimum requirements:

  • A page title
  • At least 2 headings of different sizes
  • At least 3 paragraphs
  • A horizontal rule/line to separate sections
  • A link to http://www.ramstadmath.com
  • In places that make sense to your content:
    • <strong> text
    • <em> text

Please check your "Shared with me" folder on Google Drive to find your assignment document.

Remember to right click on your document and"open with" Editey.

Example Page

Draw My Code

Draw my webpage based on the CSS and HTML provided below. Be as specific as possible.

NOTE: 100px = 1in on your paper

<html>
<head>
<title>Draw My Page</title>
<style>
#cat {
color:purple;
}
.cat {
color:White;
}
img {
float:left;
margin-right:25px;
}
body {
border: solid red 5px;
background-color:lightblue;
padding:25px;
}
div {
border: dashed black 5px;
}
</style>
</head>

<body>
<div>
<img src="cat.jpg" alt="cat" height="300px" width="300px">
<p id="cat">This is Mr. Ramstad's cat. His name is Wicket.</p>
<p class="cat">He is 6 months old.</p>
</div>
</body>
</html>

CSS Overview

Review the CSS we have learn (and maybe a little more!) with this lesson from Codeacademy.com  Click Here

Please sign up for this website using your Google Account.

Also, take notice of how external CSS works. You will be using this on your final Unit 3 project.
When you finish, please bring your laptop to Mr. Ramstad to verify your work.

Extra Credit:

CSS Positioning - Click Here

CSS Layouts

Lesson Outline:

  1. Create a Khan Academy login
    • Go to GMAIL.COM
    • Find an email from Khan Academy with an invitation for Mr. Ramstad to be your coach
    • Make sure you login with Google (your LAUSD account)
  2. CSS intro on Khan Academy
  3. CSS grouping elements Khan Academy
  4. HTML tables
    • Focus on the differences between tables and lists