HTML & Css Task

HTML & CSS
LIST ITEMS
1. Create an HTML file with the appropriate structure, including the <!DOCTYPE html>
declaration, <html>, <head>, and <body> tags.
2. Ordered List (OL):
 Inside the <body> tag, create an ordered list using the <ol> tag.
 Include at least three list items <li> within the ordered list.
 Add relevant information to each list item, such as your favorite books, movies, or
places to visit.
3. Unordered List (UL):
 Create an unordered list using the <ul> tag below the ordered list.
 Include at least three list items <li> within the unordered list.
 Add different information to each list item, such as your hobbies, goals, or favorite
foods.
Create a webpage Task
Description: Your task is to create a simple personal webpage for a fictional character named Jane
Doe. The webpage should include some basic information about Jane, such as her name, interests,
and a brief introduction, include a navigation menu that allows visitors to easily navigate between
different sections of the webpage
Use HTML and CSS to implement the webpage.
Requirements:
1. HTML Structure:
 Create an HTML file with the appropriate structure, including the <!DOCTYPE html>
declaration, <html>, <head>, and <body> tags.
2. Page Content:
 Include a heading with Jane Doe's name.
 Add a paragraph or two describing Jane's interests and hobbies.
 Include a section with a brief introduction about Jane.
3. Styling:
 Use CSS to style the webpage.
 Choose appropriate fonts, colors, and sizes for the text.
 Add some padding and margins to create spacing between elements.
 Experiment with CSS properties like background color, borders, and text alignment
to enhance the appearance of the webpage.
CSS
HTML & CSS
1. CSS:
Colon (:): In CSS, colons are used to separate the property name from its corresponding value within a
declaration.
 Within the <head> section of your HTML file, add a <style> tag to LINK LATER.
 Use selectors to target specific HTML elements. For example, to style a <h1>
heading, use the selector h1.
 Apply CSS properties and values to change the appearance of the selected elements.
For instance, to change the font color of a heading, use the property color and
specify a color value like red.
 Test your styles by refreshing the webpage in a browser and checking the changes.
2. Basic CSS Properties:
 color: Change the text color. For example: color: blue;
 background-color: Set the background color of an element. For example:

background-color: yellow;
 font-family: Define the font type for text. For example: font-family: Arial, sans-serif;
 font-size: Specify the size of the text. For example: font-size: 16px;
 text-align: Align text within its container. For example: text-align: center;
 padding: Add space inside an element's boundary. For example: padding: 10px;
 margin: Create space around an element. For example: margin: 20px;
 border: Add a border around an element. For example: border: 1px solid black;
3. Class and ID Selectors:
 Use classes to target specific elements for styling.
 Add a class attribute to HTML elements, such as <h1 class="my-heading">, and then
define the styles for that class in CSS using a dot (.) before the class name. For
example: .my-heading { color: red; }
4. Applying Multiple Styles:
 You can apply multiple styles to an element by separating them with semicolons. For
example: font-family: Arial, sans-serif; color: #333333;
HINT FOR NAV
1. Use the <nav> element to wrap the navigation menu:
<nav> 
</nav>
2. Use an unordered list <ul> to create the menu items:
<nav>
HTML & CSS
<ul>

</ul>
</nav>
3. Each menu item should be a clickable link:

The <a> tag in HTML is used to create a hyperlink which allows you to link to other web pages
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
4. Apply CSS styles to the navigation menu:
nav { background-color: light gray; padding: 10px; }
nav ul { list-style-type: none; margin: 0; padding: 0; }
nav li { display: inline; margin-right: 10px; }
nav li a { text-decoration: none; color: dark gray; }
nav li a:hover { text-decoration: underline; }

HTML &amp; Css Task

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML &amp; Css Task

Uploaded by

Copyright:

Available Formats

HTML & CSS

2. Ordered List (OL):

3. Unordered List (UL):

Create a webpage Task

Use HTML and CSS to implement the webpage.

 Include a heading with Jane Doe's name.

 Add a paragraph or two describing Jane's interests and hobbies.

 Include a section with a brief introduction about Jane.

 Use CSS to style the webpage.

 Choose appropriate fonts, colors, and sizes for the text.

 Add some padding and margins to create spacing between elements.

2. Basic CSS Properties:

 color: Change the text color. For example: color: blue;

 background-color: Set the background color of an element. For example:

 margin: Create space around an element. For example: margin: 20px;

3. Class and ID Selectors:

 Use classes to target specific elements for styling.

4. Applying Multiple Styles:

HINT FOR NAV

1. Use the <nav> element to wrap the navigation menu:

<nav>

2. Use an unordered list <ul> to create the menu items:

3. Each menu item should be a clickable link:

4. Apply CSS styles to the navigation menu:

nav { background-color: light gray; padding: 10px; }

nav ul { list-style-type: none; margin: 0; padding: 0; }

nav li { display: inline; margin-right: 10px; }

nav li a { text-decoration: none; color: dark gray; }

nav li a:hover { text-decoration: underline; }

You might also like

HTML & Css Task

HTML & Css Task