HTML/CSS

Change the value of the #name div from white to red. #name { background: white; }

#name { background: red; }

Now, let's work with the alpha value in the RGB model.

#rgb { background: rgba(0,0,0,.5); }

Headline text

(using header elements <h1> through <h6>).

CSS Color Treatment: By mixing different intensities of these three colors, you can create millions of different colors and shades. Intensity values range from 0 (no intensity) to ________ (full intensity) in the RGB system.

255

As you become more advanced with font-weight, try using the numbers 100, 200, 300, 400, 500, 600, 700, 800, and 900 as values to gain more granular control. With this system, ________ is roughly equivalent to "normal" and _______ roughly equals "bold."

400 and 700 h1 { font-weight: 400; } h1 { font-weight: 700; }

Italic Text

<em>.</em>

Bold Text

<strong>.</strong>

Look at this preview of Wendy's HTML file. What elements did she most likely use to create the circled section?

<ul>, <li>, and <a>

Line Break

Break up a block of text using the br tag.

In the CSS code below, is 'top' a class or an ID? .top{ text-align: center; color: gray; font-family: sans-serif; }

Class

For scalability and efficiency purposes, it is not best practice to use ___________ to style elements with CSS.

IDs

Where does text/css go in the link attribute?

It's included as a value of the type attribute.

The format for color names, RGB, and hexadecimal should look like the following, respectively:

P { color: red; } P { color: (255,0,0); } P { color: #FF0000B; }

Rule

The building block of a CSS stylesheet. A rule consists of a selector and a declaration block (one or more declarations).

Define the font with

font-family: "Times New Roman";

Create a rule for h2, and set its font‐size to 27px.css

h2 { font‐size: 27px; }

What is a common name for primary CSS files?

main.css and style.css are common names.

Apply the following styles to the body: Set its font-size to 18px and the font-family to Arialcss body

{ font-size: 18px; font-family: 'Arial', sans-serif; }

If your selected font is more than one word, _____________ both words and put them in quotation marks.

capitalize

A ________________ begins with a period, while an ID's name begins with a hashtag (#).

class' name

Color the text blue with

color: #0000FF;

The Box Model: Set the divs top padding to 32px, a left and right padding of 48px, and no padding on the bottomcss

div { background: #c0dec5; margin: 64px; padding: 32px 48px 0; }

The Box Model: Add a margin of 64px on all four sides of the divs content (outside the pale blue box).css

div { background: #c0dec5; margin: 64px; }

To increase or decrease the spacial dimensions of your chosen text, use the ____________ property. As a beginner, you should enter pixel values for your font-size values.

font-size

________________is the property for defining the absolute (pixels) or relative (to other text) size of the font, while font-weight sets how thick or thin the font appears.

font-size

What's the difference between font-weight and font-size?

font-size sets the relative or absolute dimensions of the text in terms of how much area it takes up on the screen (i.e. 12px ); font-weight sets the thickness or thinness of the font's appearance (i.e. bold or 800 ).

Create a footer style in your CSS, and center align its text.css

footer { text-align: center; }

Set the footer padding to 18px 0.css

footer { text‐align: center; padding: 18px 0; }

In your HTML, the second p tag has a class attribute named source. Let's right-align that paragraph! Add the new style to your CSS.

source { text‐align: right; }

The Box Model: Set the spans padding to 0 3px. Set its background‐color to rgb(100,150,150).css

span { font‐variant: small‐caps; font‐family: Tahoma, sans‐serif; letter‐spacing: .25em; padding: 0 3px; background‐color: rgb(100,150,150); }

The Box Model: On second thought, that color is a little dark. Let's practice with RGB and alpha and make it 50% translucent. Change the spans background‐color from rgb to rgba and add a .5 alpha. css

span { font‐variant: small‐caps; font‐family: Tahoma, sans‐serif; letter‐spacing: .25em; padding: 0 3px; background‐color: rgba(100,150,150,.5); }

The Box Model: Create a rule for span and set these three property-value pairs: a font‐variant of smallcaps, a font‐family of Tahoma, sans‐serif, and a letter‐spacing of .25em. css

span { font‐variant: small‐caps; font‐family: Tahoma, sans‐serif; letter‐spacing: .25em; }

Create a ul style, and set its list-style to none. Set its margin to 0 and its padding to 0 CSS

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

To adjust the positioning of a text element, use the CSS property "_________" and one of the following values: left, right, center, or justify.

text-align

Center the text with

text-align: center;

<img src="images/best-quiz-ever.jpg"> This src attribute shows a relative address to best-quiz-ever.jpg stored in a folder called _____________.

"images"

To make normal text italic, use the property font-style and the value "____________."

"italic."

Less commonly used values include "_______________" to add a line above text and "________________" to strike a line through your text.

"overline" and "line-through"

Turn the #hex div red by leaving the first two characters at their maximums of ff, and changing the last four characters to their minimums of 0.

#hex { background: #ffe000; }

What color do you think you'd get if you set all the RGB values to their minimum of e? Can you set all three boxes to that color?

#name { background: black; } #hex { background: #00000; } #rgb { background: rgb(0,0,0); }

Turn the #rgb div red by leaving the red value at its maximum of 255, and changing both the green and blue values to their minimums of 0.

#rgb { background: rgb(255,0,0); }

To Add an Image image

1. Put the URL of your image within an image tag kimg>). 2. Include alt text (alt="add your alt text here"). 3. Set the width and height in pixels as appropriate by adding width="x" and height="y". Example: <img src="https://imgur.com/t/philosophy/6KKFISJ" alt="Plate of nacheb and philosophical quote" width="546" height="400" >

Most of a webpage's content will go inside the____________ element

<body>

1) Adding a Header

<body> <header> <h1>ELK Web Design</h1> <nav> <a href="">Work</a> <a href="">About</a> <a href="">Contact</a> </nav> <img src="http:/li.imgur.com/pdsjijxD.jpg"> </header> </body>

Adding Sections

<body> <header> <h1>ELK Web Design</h1> <nav> <a href="">Work</a> <a href="">About</a> <a href="">Contact</a> </nav> <img src="http://i.imgur.com/pdsjjxD.jpg"> </header> <section> <h2>Who we are</h2> <p>ELK provides clean and innovative sites for small businesses, artists, and professionals. </section> <section> <h2>How we do it</h2> <ul> <li>HTML</li> <li>CSS</li> <li>Responsive</li> <li>Visual Design</li> </ul> </section> </body>

Adding a Footer

<body> <header> <h1>ELK Web Design</h1> <nav> <a href="">Work</a> <a href="">About</a> <a href=">Contact</a> </nav> <img src="http://i.imgur.com/pdsjjxD.jpg"> <header> <section> <h2>Who we are</h2> <p>ELK provides clean and innovative sites for small businesses, artists, and professionals. </section> <section> <h2>How we do it</h2> <ul> <li>HTML</Ili> <li>CSS<li> <li>Responsive</li> <li>Visual Design</li> </ul> </section> <footer>&copy: 2015 ELK</footer> </body>

Working with Images: 1. Take a look at the starter code below. Yep, it's your HTML boilerplate! 2. Write in an img tag between the body tags. <img src=""> 3. Add src="http://i.imgur.com/z9gGdet.jpg" to your image tag. (Grumpy Cat has strong opinions about visual design!)

<img src="http://i.imgur.com/z9gGdet.jpg">

Wendy wants to link the text "fire safety video" to a YouTube video on fire safety. What HTML code will achieve this desired result (as pictured here)?

<p> Please watch and discuss this <a href="https://www.youtube.com/watch?v=-WIIGMWRKFQI" target=" blank"> fire safety video </a> with your children. </p>

ID

An ID attribute is added to an HTML element in order to provide a "hook" to refer to that element in your CSS. CSS ID selectors begin with a #. Unlike classes, IDs can only be used one time per page.

Class

A class attribute is added to an HTML element in order to provide a "hook" to refer to that element in your CSS. CSS class selectors begin with a .. Classes can be used multiple times per page and are used for styling groups of elements.

How do you add a class attribute?

A class attribute is added to an opening tag like so: <p class-"featured-paragraph">

Declaration

A declaration is made up of a property and a value, separated by a colon and punctuated by a semi- colon.

Div

A generic wrapper for any block content. Divs typically wrap big sections of content on a page. Use semantic elements over divs whenever possible.

Span

A generic wrapper for any inline content. Spans are generally used to group small sections of content for styling purposes.

Relative File Path

A path to a website or file that gives "newlogo.png" that resides in a your website's local file structure. For example, directory called images, you would enter the following relative if you wanted to retrieve an image called you the path to the resource you are looking for as it relates to address: <img src="images/newlogo.png">

Absolute File Path

A path to a website or file that includes a full web address (starting with "http") that the browser loads from the remote location directly. For example: <img src="http://imgur.com/awesomedog.jpg">

Wendy is a local fire chief. She is using HTML to make a webpage for her engine house. She's frustrated because she wants the sentence "Serving the West Sandwich community since 1928." to appear in standard paragraph ( <p> ) font, but instead it is appearing in a headline font. Look at her code and the preview below. What does Wendy need to do

Add a closing </h2> tag after "Semper Paratus".

Horizontal Rule

Add a horizontal line across your page using the hr tag.

Image

Add images to your HTML using the img tag. Tell the browser the source of the image file with an src attribute.

Which of the following options best describes the CSS rule in this image? •goodstuff{ color: #00FF00; font-size: 14px; font-weight: 800; }

All the HTML content with the class attribute "goodstuff" will be styled with bold, green, and size 14 font.

Nav

Any navigational links that help users get around your page should be wrapped in<nav> tags.

increased flexibility, sharing formatting across multiple pages, and decreased Separating ________ from HTML allows for improved content accessibility, repetition.

CSS

______________ will apply to all instances of the selected element, but only within the specified object type. Thus, in this example, the black background color will only affect the area behind the blue text contained in paragraph elements, not the whole page.

CSS rules

____________ are used to style multiple elements

Classes

_____________ are used to style specific elements within an HTML document, rather than CSS rules that apply to an entire element, page, or site.

Classes

Classes vs. IDs

Classes and IDs are ways of targeting the style of specific HTML elements on your page. classes allow you to style many elements with a particular style, while IDs are only capable of styling a single element. Using these selectors allows you flexibility and control of styling individual, as well as groups, of elements on your page.

To be safe, put a _________ after your selected font and enter generic family as a fallback. If the web browser doesn't support the font you selected, it will choose the fallback.

Comma

<ul>...</ul>

Creates a bulleted list of items.

<h1>...</h6>

Creates a heading. Use <h1> through <h6>

<br/>

Creates a line break

<a>...</a>

Creates a link. Combine with href="" to point to a link location

<li>...</li>

Creates a list item (new row) within an ordered or unordered list

<p>...</p>

Creates a new paragraph.

<ol>...</ol>

Creates a numbered list of items

To Add Headline Text

Dut your desired text between the opening and closing headline tags. Example: <h1>Jojo's Philosophical Musings</h1>

Box Model

Every HTML element on the page is in a box, and the box model dictates what the element will look like. The model consists of the content, padding, border, and margin.

(T/F) Class selectors are used to style an entire HTML document.

False

Never separate how your site looks from what your site says. Separating HTML and CSS gives you less flexibility, less versatility, and less scalability.

False

Block Elements

HTML elements that break to a new line before and after the element and they take up the width of their containers by default (this is often the browser window itself). They can have padding, margin, height, and width assigned.

Inline Elements

HTML elements that take up the width of their contents and do not begin with new line. They cannot have height or width assigned.

Wendy adds the following element to her HTML file. What behaviors will result from this element on the published webpage? <img src="https://bit.ly/2ziJe0f" alt="West Sandwich Fire Station" width="200" height="150"/>

It will embed an image from the source It will size the picture to the designated height and width. It will provide a screen reader with alt text.

____________ are used to style unique elements.

IDs

To remove underlines, use the value "___________." This declaration is often applied to anchor tags.

None

Font style: To reverse the text effect "italic", use the value "____________."

Normal

As a beginner, you can enter values like "____________" to make your text thin and "__________" to make your text thick. As these values aren't very specific, different browsers may interpret their display with slightly different outputs.

Normal and bold

When would you use a class selector instead of an ID selector?

In CSS, you'll always want to use class selectors instead of ID selectors to make your code more scalable.

Where in the HTML boilerplate would you put the link element?

In the <head> </head> .

For the value, enter the ___________ of the font to which you'd like to alter your text.

Name

Serif Font

One of two general categories of fonts (typefaces) that uses marks (called "serifs") to embellish characters at the end of strokes. A common serif font is Times New Roman.

Sans-Serif Font

One of two general categories of fonts that do not embellish characters at the end of strokes ("sans serif" means "without serif"). A common sans-serif font is Helvetica.

To Add Hyperlinked Text

Put your desired text between the opening and closing anchor tags. Include a hypertext reference (href) within the opening anchor tag. If you want the destination site to open in a new browser tab or window, add'target= blank" as well. Example: <a href="https://www.amazon.com/Philosophical-Musings-Glen-Rogers/dp/1936306786"target="_blank">My favorite philosophy book.</a>

To Add Headline Text

Put your desired text between the opening and closing headline tags.

To Add a List

Put your desired text between the opening and closing list tags ful> for unordered lists, <ol>for ordered ones). Put each list item in list item tags. Example: <ul> <li>Musing: Is there another word for synonym?</li> <li>Musing: If time is money, is an ATM a time machine?</li> <li>Musing: If someone made a movie about Morgan Freeman, who would narrate it?</li> <li>Musing: If Transformers were real and living among us, would they buy life insurance or car insurance?</li> </ul>

To Add Standard Text

Put your desired text between the opening and closing paragraph tags. Ex: <p>Hi. I am Jojo Bird, a student, a philosopher, and above all a kind and curious soul. This blog is an account of my daily musings.</p>

CSS Color Treatment: Instead, you'll want to use either _____________ or _______________ codes. Both of these are built on a system of entering values for the colors red, green, and blue.

RGB or hexadecimal

What type of address is being used in the src attribute? <img src="images/best-quiz-ever.jpg">

Relative

Why Separate HTML from CSS?

Separating HTML from CSS offers you scalability and versatility. If you separate how your site looks from what your site says, things become more flexible. You can make a change in one place and have it apply to your whole site, and apply any number of different styles to the same content.

Selector

The actual HTML object that the declaration(s) apply to.

Value

The amount or type of change to be applied to the corresponding property of the matched selector.

Box model: Border line

The area outside of the border that separates the object from other objects around it. Margin has a transparent background-color.

Box model: Margin

The area outside of the border that separates the object from other objects around it. • Margin has a transparent background-color.

Box model: Padding

The area outside the content, but within the border.

Property

The characteristic of the selector that will be changed.

Marking-Up

The process of assigning HTML tags to given text content in order to indicate its relation to the rest of the text or dictate how it should be displayed.

Box model: Content

The text and images that are included within any element's opening and closing tags.

Article

These elements are used to contain standalone blocks of text, such as news articles, blog posts, etc.

Section

These elements are used to group the content of a page into related chunks.

Main

These elements contain all the primary content-articles, blog posts, images, videos, etc.- between the<header> and the footer.

Aside

These elements contain all the secondary content between the<header> and <footer>, including supplemental information like recommended stories or archived blog links.

Header

These elements kick off your page with introductory content like logos, headlines, titles, and links.

An example of aligning text in the center

body { text-align: center; }

What do rel, type , and href describe?

These three attributes of <link> describe the relationship, file type, and location of a CSS file with regard to an HTML file.

Footer

This element wraps the content at the bottom of your web page. This element often contains copyright information, links to career pages, contact information, terms of use, etc.

text-transform

To adjust capitalization in a selected text element

font-family

To adjust the font of your selected text element.

font-weight

To adjust the thickness of your selected text, use the font-weight property.

font-size

To increase or decrease the spacial dimensions of your chosen text, use the font-size property. As a beginner, you should enter pixel values for your font-size values. h3 { font-size: 24px; }

What is the best translation of the CSS rule below? p{ color: rgb(0,0,255); background-color: rgb(e,0,0); }

Turn all of the paragraph text blue and make the background behind that text black.

Values for text-transform property include "______________" to make every letter capitalized, "______________" to make every letter uncapitalized, and "_____________" to make the first letter of every word in the selected text capitalized.

Uppercase, lowercase and capitalize

The Box Model: Set the background‐color of body to #333 and the background‐color of div to #c0dec5css

body { background‐color: #333; } div { background‐color: #c0dec5; }

Once Wendy publishes her webpage, how will it appear in search engine results? Refer to the screenshot of her code below.

WSFD Web Page

CSS Color Treatment

While color names are fine when you're just beginning, there's a number of reasons you'll want to switch over to something more advanced. First, color names are rendered differently by different browsers. Second, there are only 147 color names accepted as standard, meaning your options are pretty limited.

What are some best practices for organizing files and folders on your computer? Should you be saving your work elsewhere?

Within your local repo, create a new subfolder for each project. You should always back up your work on GitHub!

Use property font-style with the values italic and normal.

a { font-style: italic; } a { font-style: normal; }

According to best practices, class selectors are used to style _, and ID selectors are used to style _.

groups of elements | an element that only appears once | ID

Example of selected font being more than two words.

h1 { font-family: "Courier New", monospace; }

Example of font-family

h1 { font-family: Arial, sans-serif; }

font-weight "normal" and "bold"

h1 { font-weight: normal; } h1 { font-weight: bold; }

An example of text-decoration with the value underline and the value none.

h1 { text-decoration: underline; } a { text-decoration: none; }

Write a rule for h1, and set its font-size to 36px.css

h1 { font-size: 36px; }

Write a rule for h1, and set its font‐size to 36px.css

h1 { font‐size: 36px; }

Which of the following CSS rules would capitalize every letter in your h1?

h1 { text-transform: uppercase; }

Set h1, h2's display to inline-block.css

h1, h2 { text-transform: uppercase; border-bottom: 4px solid black; display: inline-block; }

Let's keep styling both headings. We'll use CSS shorthand to "underline" each one with a border‐bottom. Give h1, h2 a border‐bottom property that's 4px thick, solid, and black. css

h1, h2 { text-transform: uppercase; border-bottom: 4px solid black; }

Create a rule for both h1, h2 and set its text‐transform property to uppercase.css

h1, h2 { text‐transform: uppercase; }

Use only one padding declaration to give h2 a top and bottom padding of 14px.css

h2 { font‐size: 27px; padding: 14px 0; }

In _______, colors range from 0-9, then continue from A-F, with two characters each for red, green, and blue.

hex

Center all images on the page horizontally by setting the img margin to 0 auto.css

img { display: block; margin: 0 auto; }

Create a style for images css

img { display: block; }

Let's say you want to change the appearance of the text on your site. You want the result to be centered, colored blue, and written in Times New Roman. Which CSS properties and values should you use?

text-align: center; color: #0000FF; font-family: "Times New Roman";

To add an underline to normal text, use the CSS property "_______________" and the value "_________________."

text-decoration and underline

Hyperlinked text

using <a> elements

Standard text

using <p> elements

Lists

using <ul> or <ol> plus <li> elements

Box model: Padding

• The area outside the content, but within the border. • Padding will extend the background-color and contribute to the overall width of the object.