Top Banner
CS1520 Recitation: HTML/CSS id and class selector and Git Jeongmin Lee
31

HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

May 29, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

CS1520 Recitation:HTML/CSS id and class selector

and Git

Jeongmin Lee

Page 2: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Plan for Today ● CSS and How to add CSS to HTML

● Selectors: ID and Class

● Git and Github

Page 3: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

CSS● CSS stands for Cascading Style Sheets.

● CSS describes how HTML elements are to be

displayed on screen, paper, or in other media.

● CSS saves a lot of work. It can control the layout of

multiple web pages all at once.

Page 4: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

CSS● CSS can be added to HTML elements in 3 ways:

○ Inline - by using the style attribute in HTML

elements

○ Internal - by using a <style> element in the

<head> section

○ External - by using an external CSS file

The most common way to add CSS, is to keep the

styles in separate CSS files.

Page 5: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Inline● An inline CSS is used to apply a unique style to a single

HTML element.

● An inline CSS uses the style attribute of an HTML

element.

● This example sets the text color of the <h1> element to

blue:

<h1 style="color:blue;"> a Blue Heading </h1>

Page 6: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Internal CSS● An internal CSS is used to define a style for a single

HTML page.

● An internal CSS is defined in the <head> section of an

HTML page, within a <style> element:

Page 7: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Internal CSS<!DOCTYPE html><html><head><style>body {background-color: powderblue;}h1 {color: blue;}p {color: red;}</style></head><body>

<h1>This is a heading</h1><p>This is a paragraph.</p>

</body></html>Try it Yourself »

Page 8: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

External CSS● An external style sheet is used to define the style for

many HTML pages.

● With an external style sheet, you can change the look of

an entire web site, by changing one file!

● To use an external style sheet, add a link to it in the

<head> section of the HTML page:

Page 9: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

External CSS <!DOCTYPE html><html><head> <link rel="stylesheet" href="styles.css"></head><body>

<h1>This is a heading</h1><p>This is a paragraph.</p>

</body></html>

body { background-color: blue;}h1 { color: blue;}p { color: red;}

style.css:

Page 10: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Plan for Today ● CSS and How to add CSS to HTML

● Selectors: ID and Class

● Git and Github

Page 11: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Selectors● In HTML, there are types of attribute that you can

use them as selectors for CSS and Javascript.

○ Class attribute

○ ID attribute

Page 12: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Class Attribute

<html> ...<p class=”intro”> Hello world. </p>

<p class=”intro”> I like to code. </p>

<p class=”info”> Snow in Pittsburgh </p> ...</html>

● Class allows you target a group of elements

Page 13: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

ID Attribute

<html> ...<p id=”unique”> Hello world. </p>

<p id=”wrong”> I like to code. </p>

<p id=”wrong”> Snow in Pittsburgh </p> ...</html>

● ID allows you target a single specific element

Page 14: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

How to use with CSS● Depends on target, the prefix is different:

○ ID: #

○ Class: .

○ HTML element: no . or #

Page 15: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

ID Attribute<html> ...<p id=”unique”> Hello world. </p>

<p class=”intro”> I like to code. </p>

<p class=”info”> Snow in Pittsburgh </p> ...</html>

...p{ font-size: 14; }

#unique { color: orange;}

.intro { color: blue;}

.info { color: red;}

HTML CSS

Page 16: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Plan for Today ● CSS and How to add CSS to HTML

● Selectors: ID and Class

● Git and Github

Page 17: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Git and Github● Git is an open source distributed version control

system

● Github is a web-based hosting service for version

control using git.

Page 18: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Overview

Image: https://www.quora.com/What-is-git-and-why-should-I-use-it

Page 19: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Let’s do it.1. Make your own GitHub Repository

- Make an Github account first http://github.com

- Make a your own repository on Github

2. On your computer, install git installer and open a

terminal/bash

Windows: https://git-for-windows.github.io/

On terminal/bash, type >> git

Page 20: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Let’s do it.3. Configure your info

- Name and email address

git config --global user.name “First Last”

git config --global user.email “[email protected]

Page 21: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Let’s do it.4. Create a repo

git init myrepo

Page 22: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Let’s do it.5. write a file and add it to my repo

echo “hello world!” > hello.txt

git add hello.txt

Page 23: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Let’s do it.6. Commit it

git commit -m “a commit message”

Page 24: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Let’s do it.7. for sake of learning, let’s edit it again

echo “new line” >> hello.txt

Page 25: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Let’s do it.8. Let’s see status

git status

Page 26: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Let’s do it.8. Let’s do another commit

git commit -m “updated!”

Page 27: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Let’s work on GitHub ● Add your github repo to your local git repo

git remote add origin [email protected]:UserName/reponame.git

git push --set-upstream origin master

Page 28: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Let’s work on GitHub ● Remember!

Image: https://www.quora.com/What-is-git-and-why-should-I-use-it

Page 29: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Let’s work on GitHub ● Push (= upload current local to the Github repo)

git push origin master

● Then go to your github repo on browser and see.

Page 30: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Let’s work on GitHub ● Pull (=sync from github repo to local repo;like download

and update)

git pull

Page 31: HTML/CSS id and class selector CS1520 Recitation: and Gitpeople.cs.pitt.edu/~jlee/teaching/cs1520/slides... · HTML/CSS id and class selector and Git Jeongmin Lee. Plan for Today

Questions?