CS 460 Git -> CSS

Version Control - Git
HTML
CSS

Version Control with Git

Why version control?
Why Git?

Git Theory

Images from: Pro Git

Snapshots

A Commit

3 Commits

Branch "Pointers"

Branches

A Commit History

Preparing to Merge

After Merge

Complex Workflows

Image from: Bitbucket tutorial

Git in Practice

Demonstration of regular workflow -- single developer, local and remote repository

3 States

Lifecycle

Start from Scratch -- local repo

Initialize
add, commit
Inspect

Start from Scratch -- local repo + remote

Initialize
fetch/pull, add, commit, push

The Web

HTML	Meaning and Content
CSS	Presentation & Style
Javascript	Scripting, manipulate DOM
HTTP	Transport, client-server behavior

HTML

						
<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
		The Title
	</head>
	<body>
		A Main Heading
		Some text in a paragraph.
		
			
			First item
			Second item
		
		Link to Google
	</body>
</html>

W3C Standard

HTML 5

List of elements

Element Attributes

Elements have name / value pair attributes

							

<p lang="en-us" class="main-content">Some paragraph</p>


<p id=extra_info hidden>More stuff</p>


<input type=submit value='Submit' />


<input type="text" name="the username" maxlength="30" />

id Attribute

A global attribute. Used to uniquely identify an element (from CSS or Javascript).

class Attribute

Used to make this element a member of a named class. Also a global attribute.

Common use of id attribute


<form action="/form-handler-page" method="post"> 
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
    <button type="submit">Send your message</button>
</form>

Common use of class attribute


<pre><code class="hljs python snippet">
    def foo(a):
        print(a)
</code></pre>

Layout Algorithm

Two categories of elements:

Block Level Elements: Always start on a new line, they stack vertically
Inline Elements: Appear to continue on the same line as their neighboring elements, placed horizontally until the end of the line

Block Level Elements

Examples include

`<form>`	`<p>`	`<table>`	`<hr>`
`<h1>`	`<ol>`	`<li>`	`<div>`

Inline Elements

Examples include

`<a>`	`<em>`	`<strong>`	`<img>`
`<sub>`	`<button>`	`<input>`	`<span>`

Styling and Layout with CSS

Style sheet language
Associates style rules with HTML elements
Styles "cascade", or have known order of precedence
Each rule has one or more selectors and a declaration block

							
body { 
	font-family: Arial, Verdana, sans-serif;
	font-size: 12px;	
	color: #665544;
}

Selectors

Select which HTML elements the rule(s) apply to

							
/* Select all elements */
* { }

/* Select specific elements, here all <h1>, <h2> and <h3> 
   (using grouping syntax) */
h1, h2, h3 { }

/* Select all elements where class attribute has value "questions" */
.questions { } 

/* Select all <p> elements where class attribute has value "questions" */
p.questions { }

/* Select all elements where id attribute has value "topstory" */
#topstory { }

And lots more

See CSS docs, Section 5.1

							
/* Matches any F element that is a descendant of an E element */
E F { }

/* Matches any F element that is a child of an element E */
E > F { }

/* Matches any F element immediately preceded by a sibling element E */
E + F { }

/* Matches element E when E is the first child of its parent */
E:first-child { }

/* Matches element E if E is the source anchor of a hyperlink
   of which the target is not yet visited or already visited */
E:link { }
E:visited { }

							
/* Matches E during certain user actions */
E:active { }
E:hover { }
E:focus { }

/* Matches any E element with the "foo" attribute set (to any value) */
E[foo] { }

/* Selectors can be combined: */

div p *[href] { }
div ol>li p { }

Precedence (Cascading)

When two or more selectors match an element:

If identical, the latter one applies, otherwise
The more specific one takes precedence (specificity)
A rule labeled "!important" indicates it should take precedence

Inheritance

Some properties are inherited, e.g. font-family, font-size, font-weight, color

You can force inheritance of a parent's property with the "inherit" value

Properties

Just about anything you can think of. Properties for:

Color
Text
Boxes
Lists, tables, forms
Layout of elements and flow
Images

Full list

Where to put it?

						
<head>
	<style type="text/css">
	body {
		background-color: silver;
		color: white; }
	</style>

						
/* File: css/styles.css */
body {
	background-color: silver;
	color: white; }

Examples

From HTML & CSS book

Code examples

Contents