Intro. Styling

explanation video

just the slides

Preparing to work: (starting with your template)

Go to repl.it and open your previous work in "Project 1: Basic Tags." Copy the code from html_template.html.
Use the browser's "Back" button to go to the Team site and then open "Project 3: Intro. Styling." Click on "index.html" to open the file. Paste the "template" code into the index.html file.
You will modify this file as you work.

Viewing your work:

The "Run" button in repl.it shows you how the web page gets presented to your audience.

Here is the general format for creating "internal style" rules

Write the style tags in the head section of the code.
Put the style rules inside the style element.

<head>

p {color: sienna;}

body {background-color: lightblue;}

</style>

</head>

How to write a style rule: CSS Syntax

The CSS syntax is made up of three parts: a selector, a property and a value
- selector {property: value}
- body {background-color: #5F9EA0;}
The selector is normally the HTML element/tag you wish to style. Example: body.
The property is the attribute you wish to change. Example: Background-color:
Each property can take a value. Example: #5F9EA0
Think about people. hair{color: white;}
The property and value are separated by a colon, and surrounded by curly braces. End each style rule with a semi-colon; to keep rules separate from one another.

I write my style rules like this to help me better organize them. I can easily find a rule to revise it when the rules are written like this:

h4 {
     font-size: 18px;
     text-align: left;
     font-style: normal;
     padding: 10px;
     font-variant: small-caps;
}

We can group various html elements together to give them the same style

p, li, dl {
     font-size: 12px;
     text-align: justify;
     line-height: 1.2em;
     margin: 35px;
}

Learn how to use the style properties listed below by studying W3schools. Look for CSS background , CSS Text, and CSS Fonts.

background color
text color
text align
font (called fomnt-family) in CSS
font size

Project 3 - Due Date: Monday, 4/22/24:

You can start by copy-pasting your template (that you made in Project 1) into the index.html file of this project, project 3.
Please remember to change the title of the page in the <title> tags. You should do this for every new project.
Come up with a creative idea for a web page (Funny quotes? Song lyrics?). Create some organizational/layout structure using different text-containing elements (headings, paragraphs) on the page. You don't need to use all the headings (h1, h2, etc.); choose the ones you like. Please use new content in your elements.
Add style, as follows.
Use each of these internal style properties at least once.

background color
text color
text align
font family
font size

Remember, the style rules are written in the internal style section which must be inside the <head> tags.
Submit your completed page in replit Project 3 as index.html.

Rubric

Category	minus 15 points	minus 10 points	minus 5 points	Full points
Project Requirements	Student uses 1-2 of the specified style properties and/or does not follow some instructions	Student uses 3 of the specified style properties and/or does not follow some logistical instructions	Student uses 4 of the specified style properties and follows all instructions	Student uses all 5 specified style properties and follows all instructions
Code Quality	Code doesn't run as expected and shows they did not study or understand the learning resources	Code displays somewhat as expected, minimal understanding of learning resources	Uses somewhat appropriate syntax and correct features. Well formatted, basic understanding of learning resources	Easy to understand. Uses appropriate syntax and features to accomplish the task. Shows they studied and understood the learning resources very well
Code Style	Code is very hard to read and understand, follows almost no styling guidelines, inconsistent and causes errors	Code is not very readable or consistent, but follows some styling guidelines, some errors	Code is fairly readable and consistent, but does not follow all styling guidelines, minimal errors	Code is readable and follows all styling guidelines(style rules have their own line, indentation used well), no errors
Creativity	Student does not show basic creative effort (i.e. no changes in content, text/headers/etc)	Student shows minimal creativity from base requirement (i.e changes a couple parts but not most)	Student shows some creativity from base requirement (i.e alters some content, text/headers/etc but not all)	Student goes above and beyond base requirement and shows understanding of project (i.e. additional content, styling, text, headers)

Project 3: Styling your web page