lecture 4 - penn engineeringcis197/lectures/pdfs... · lecture 4 browser basics - html and css 1 /...
TRANSCRIPT
Lecture 4Browser Basics - HTML and CSS
1 / 26
Agenda1. HTML/CSS Basics2. Responsive CSS and Bootstrap
2 / 26
HTML
3 / 26
BrowsersEvery browser has two main components:
1. A rendering engine that parses HTML and CSS to display theinformation
2. A JavaScript engine that interprets JS code in a sandboxedruntime
The API is standardized across browsers - most R&D is done inperformance. For example, Mozilla has released a JavaScript enginethat can run Quake at 60fps in the browser!
4 / 26
HTML BasicsHTML = Hyper Text Markup LanguageFiles should start with
The document is a tree of opening and closing tags, with an tag as the root
Example of open/close tag pair:
Open/close pairs may have text or more tags between themSome tags are 'standalone' and don't need to be closed
Ex.
Tags can have attributes, like "id" or "class":
<!DOCTYPE html>
<html>
<div></div>
<link>, <meta>, <img>
<div class="someClass" id="123456789"> I'm some text inside of a div.</div>
5 / 26
Bare-bones HTML Document
View on JSFiddle
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> <title>CIS 197 JavaScript</title> </head> <body> <h1>Welcome to CIS 197</h1> <p> This is a course about ... </p> </body></html>
6 / 26
Tags you should knowDivs ( ) divide the document into different sections.
Headers ( , , ...) are for section headers - including theoverall page title.Paragraphs ( ) break text into paragraphs.
Line breaks ( ) indicate line breaks.
Anchor tags ( ) are used for linking to other pages.
Spans ( ) denote text that's somehow different orimportant - like bolded text, or special characters.Image tags ( ) do just what you'd expect - display images.
Forms ( ) are used for web forms, along with related tagslike and .
Let's see how these look on JSFiddle.
<div>
<h1> <h2>
<p>
<br>
<a>
<span>
<img>
<form><input> <textarea>
7 / 26
CSS: Making HTML PrettyThe HTML we've seen so far is pretty ugly - we need a way tochange how it's displayed if we want to make a good-lookingwebsite. We can do this with CSS, which is yet another markuplanguage that tells a browser how to display an HTML page.
There are far too many CSS properties to give an exhaustive listhere. MDN has amazing resources for looking up specificproperties, as always. We'll focus here on the structure of CSS,using a few basic properties as examples.
8 / 26
CSS BasicsCSS works by applying rules to change the style ofelements. Here's an example of a CSS rule:
The rule starts with a selector, , which indicatesthat it applies to elements. The bit inside thecurly braces is the declaration - the body of the rule.The keyword is a property, and is a value.Semicolons are used to separate property-value pairs.
strong { color: red;}
strong<strong>
color red
9 / 26
Basic SelectorsThe most basic CSS selector is the tag name. To make all body text black, forinstance, you would do:
The other basic selectors work on two special attributes: class and id.
body { color: #000000;}
/* Class selector */.red-text { color: #FF0000;}
/* ID selector */#blue-div { color: #0000FF;}
10 / 26
Pseudo-selectorsPseudo-selectors match a certain state of an element, such as hovered or active.They must always be combined with another selector (which matches thestateless base element).
/* Underline links on hover */a:hover { text-decoration: underline;}
/* Give the second div an orange background */div:nth-of-type(2) { background-color: #ffa500;}
11 / 26
Selectors Based on RelationshipCSS has some ways to select elements based on the relationships betweenelements. You can combine these to make selectors that are more specific.
Selector Selects
Any E element that is a descendant of an A element(that is: a child, or a child of a child, etc.)
Any E element that is a child (i.e. directdescendant) of an A element
Any E element that is the first child of its parent
Any E element that is the next sibling of a Belement (that is: the next child of the same parent)
A E
A > E
E:first-child
B + E
Table source: MDN documentation. 12 / 26
Selector SpecificityEach selector has a certain specificity in CSS - a sort of inversemeasure of how general it is. If two different selectors match thesame element, then the one with the higher specificity is the onewhich is applied.
The best description of specificity that I've come across is from thispage of css-tricks.com. I'm going to borrow their excellent graphicsfor the next few slides.
13 / 26
In CSS, some selectors outweigh others completely. A style attributealways beats an ID, which always beats a class/pseudo-class, whichalways beats a simple element selector.
The graphic illustrates the method of calculating a selector rank.You put a number in the column corresponding to the number ofmatching parts (ids, classes, etc) in the selector. Then, reading rightto left, the first one to have a higher number is the winner.
14 / 26
Specificity Calc Example #1
15 / 26
Specificity Calc Example #2
16 / 26
Specificity Calc Example #3
17 / 26
Specificity Calc Example #4
18 / 26
Tie-BreakersWhat happens if two CSS rules have exactly the samespecificity value? The one that was declared last wins!
That's called cascading - and it's actually where CSSgets its name from (Cascading Style Sheets).
19 / 26
An exceptionIf you add a modifier to a CSS propertyanywhere, then that one wins automatically. It's likethrowing 'shotgun' in a game of rock-paper-scissors.
It's usually not good practice to use .Prefer to use a more specific selector instead.
!important!important
!important
20 / 26
CSS ExampleNow that we know a thing or two aboutCSS, let's put it all together and style upthat bare-bones HTML doc.
21 / 26
Reponsive CSS and Bootstrap
22 / 26
Styling for multiple devicesIt doesn't make sense for a website to look the same on everydevice. The HTML markup might be the same, but there need to bemajor display changes: for instance, a three-column layout would bevery hard to read on a phone.
To fix this, we can use media queries to specify styles only oncertain screen sizes. This is called responsive CSS.
/* Do not display sidebar on small screens */@media (max-width: 600px) { .sidebar { display: none; }}
23 / 26
Laziness; BootstrapWith time and perseverence, we could manually writethe CSS required to make a website look great on allscreen sizes. But this would take a very long time, andprogrammers are notoriously lazy.
In practice, a "mobile-first" library like Bootstrap isused to speed up the development process.
24 / 26
The Bootstrap gridBootstrap uses a grid system, implemented with mediaqueries, to manage its responsive CSS. It's a simpleway to make sure a screen is using all of its real estateto display the content. A three-column layout on a bigscreen becomes a two-column layout on a mediumscreen, and a one-column layout on a small screen.
The Bootstrap docs have the best description of thissystem, and are definitely worth a look.
25 / 26
Typography and ComponentsFrameworks like Bootstrap already have sane defaultsfor things like text size, font families, and basiccomponents of a site (like headers and buttons). Theyalso have a ton of other components that you can useto make a website look awesome.
Now, if you don't write any CSS yourself, the site willlook generic and generally pretty bad. Frameworks aremeant to be used as a base - you still need to write abit of CSS if you want to do anything interesting!
26 / 26