# switch to starter branch to get new starter code
git checkout starter
# download new starter code
git pull
# switch back to main branch for coding
git checkout main
# merge in new starter code
git merge starter --no-edit
# code and enjoy!
Get the starter code from the starter branch, but do all of your work on main.
# do all your coding on `main`!
# switch to gh-pages to publish
git checkout gh-pages
# merge the changes from main
git merge main
# push to GitHub to publish
git push origin gh-pages
# switch back to main branch for more coding
git checkout main
# remember to push your souce code for grading
git push origin main
We use a similar process to "publishing" code to Github Pages. Do all coding on main. Never edit code on
gh-pages
(see also: https://websitesfromhell.net/)
"use this color and font for the first paragraph in the article; this picture for the page's background..."
/* A rule with many properties */
h1 {
font-family: 'Helvetica';
color: white;
background-color: #333; /*dark gray*/
}
"font"
selector: apply to all <h1> elements
style.css
h1 {
font-family: 'Helvetica';
color: white;
background-color: #333; /*dark gray*/
}
<head>
<link rel="stylesheet" href="style.css">
</head>
<head>
relation between this page and reference
no content,
no closing tag
font-family
: the "font" (list alternates separated by commas)
font-size
: the size of the text
font-weight
: boldness
color
: text color
background-color
: element's background
padding
: the space around an element
Have a rule apply to only a particular elements by specifying those elements' class attribute and then using that class as the selector in the CSS
/* CSS */
.highlighted {
background-color: yellow;
}
<!-- HTML -->
<p class="highlighted">This text is highlighted!</p>
dot specifies class name, not tag name
Add some styling to your page!
Multiple rules can apply to the same element (in a "cascade").
p { /* applies to all paragraphs */
font-family: 'Helvetica'
}
.alert { /* applies to all elements with class="alert" */
font-size: larger;
}
.success { /* applies to all elements with class="success" */
color: #28a745; /* a pleasant green */
}
<p class="alert success">
This paragraph will be in Helvetica font, a larger
font-size, and green color, because all 3 of the above
rules apply to it.
</p>
two classes (space separated)
<!-- HTML -->
<p>This text has <i>emphasis!</i></p>
/* CSS */
em {
font-style: normal;
text-decoration: underline;
}
why is this italicized?
change what emphatic text looks like
HTML describes the meaning, not what it looks like!
<!-- HTML -->
<p>This text has <em>emphasis!</em></p>
says nothing about appearance!
Heading elements (<h1>, <h2>, etc). Are used for navigation and organization, not to just make text appear larger.
<!-- Don't do this -->
<h2>I want this text to be big</h2>
<!-- Do this -->
<p>I want this text to be big</p>
/* use CSS to make things bigger or bolder */
p {
font-size: 1.75em;
font-weight: bold;
}
Use headings (h1, h2, etc) to create a "table of contents" for your webpage. DO NOT SKIP LEVELS!
<h1>My Hobbies</h1>
<p>These all are activities I love to do on a regular basis.</p>
<h2>Physical Activities</h2>
<h3>Playing Soccer</h3>
<p>Soccer is a team sport played between two teams of eleven players with a spherical ball.</p>
<h3>Dancing</h3>
<p>Dance is a performing art form consisting of purposefully selected sequences of human movement.</p>
<h4>Salsa</h4>
<p>Salsa is a popular form of social dance that originated in the Caribbean.</p>
<h4>Rock'n'Roll</h4>
<p>Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop.</p>
<h3>Gardening</h3>
<p>Gardening is the practice of growing and cultivating plants as part of horticulture.</p>
<h2>Relaxing Activities</h2>
<h3>Watching Movies</h3>
<p>A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.</p>
<h3>Meditate</h3>
<p>Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself.</p>
Use <a> elements for any navigation. A <button> is only used for interacting with the current page.
<!-- Don't do this -->
<button>Click here to view info!</button>
<!-- Do this -->
<a href="info.html">Click here to view info!</a>
/* use CSS to make links look like buttons if desired */
a {
font-weight: 400;
text-align: center;
color: #fff;
background-color: #007bff;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
}
Use semantic block elements (like <p>) to create line breaks. Don't use purely visual elements like <br>. Browsers will automatically "wrap" text if it gets too long.
<!-- Do this -->
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Consectetur est necessitatibus, rerum atque officiis doloremque porro similique molestias fugit, a repellendus fuga natus, tempora impedit.
</p>
<!-- Don't do this -->
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
<br />
Consectetur est necessitatibus, rerum atque officiis doloremque porro similique molestias fugit, a repellendus fuga natus, tempora impedit.
<p>
A <div> ("division") element has no semantic or appearance meaning. It is used to "group" elements together e.g., for styling.
<!-- these three paragraphs will all have the same
"parent" which can be styled on its own -->
<div>
<p>Lorem ipsum dolor</p>
<p>sit amet consectetur</p>
<p>Adipisicing elit</p>
</div>
<!-- these paragraphs are in a different "group" -->
<div>
<p>Lorem ipsum dolor</p>
<p>sit amet consectetur</p>
</div>
A <div> ("division") element has no semantic or appearance meaning. It is used to "group" elements together e.g., for styling.
<!-- A collection of "cards" on a page -->
<div class="card-group">
<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">
<h2>Card 1</h2>
<p>An information card</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h2>Card 2</h2>
<p>Another information card</p>
</div>
</div>
</div>
<div class="cow">
<p>Moo moo moo.</p>
<p>Moooooooooooooooooooo.</p>
</div>
<div class="sheep">
<p>Baa baa <span class="dark">black</span> sheep,
have you any wool?</p>
</div>
block element (line break after)
inline element
A <span> element is like a <div> (has no semantic or appearance meaning), but is an inline element so goes inside of text
Use sectioning elements in place of <div> elements to give them semantic meaning ("a special div").
header | A "banner" for the page |
main | The main content of the page |
footer | Contact and copyright information |
nav | A navigation element (can be in the header; can have more than one!) |
section | "parts" that would appear in the outline of the document. Deserves a heading; can have their own <header> |
article | A self-contained, republishable section (may be embedded elsewhere). Less common. |
There are three different HTML elements that all have similar names:
<head> - contains metadata about the page which is not directly displayed. Not part of the <body>
heading (<h1>, <h2>) - providing headings for different sections of your page; used to create an outline
<header> - a semantic sectioning element; acts as the introductory (top) section, often with banner and navigation elements
Screen reader built into Mac OS X.
Check that your page is accessible! For example:
Read: through Chapter 6
Problem Set 02 due Friday
(mostly on today's material, accessible HTML & some CSS)
Next: CSS Selectors and Properties