CSS and visuals/creating a somewhat customizable html page

• CSS means Cascading Style Sheets. Cascading meaning “the information is falling down the “page”
• CSS describes how HTML elements are to be displayed on the screen, paper, or in other media - essentially the “style” of an HTML document, including colors, layout, and fonts.
• You can use this to create your own websites from scratch, or it’s also really helpful if you create websites off of template sites like SquareSpace or Weebly to customize within their own template structures.
• So this can be really helpful in your projects that you’ll be turning in, particularly if you want to make the project look a little more like your “own.”

Difference between CSS and HTML:

• HTML (hyper text markup language) dictates the content & structure of a page vs. CSS modifies design and display of HTML elements

• HTML you can:
• publish online docs with headings, texts, lists, photos
• Retrieve online content via hypertext links
• Design forms (searching for info, submitting information etc.)
• Include apps in documents (i.e. add video, mp3s, spreadsheets, etc.)
• CSS you can:
• Design colors, fonts, layout
• Adapt displays across platforms (large/small screens, tablets, mobile phones, etc.)
• Tailor pages - so you can modify multiple pages on your website using one singular style sheet.

• Most importantly, HTML consists of tags that surround content, and CSS consists of selectors followed by a declaration block

HTML: <h1> This is a heading </h1>       start tag, end tag,

<h1> is an “HTML element”

· Used to describe a specific section on a webpage

“This is a heading” is the “content”

· The text, links, images displayed on the webpage

CSS: h1  {color:blue; font-size: 12px;}     h1 is the “selector”

· Indicates which HTML element you want to style

{color:blue; font-size: 12px;} is the “declaration”

· Contains a property and a value separated by a colon

“Color” and “font-size” are both “properties”

· Group with specific names corresponding to different styles/formats

“Blue” and “12px” are both “values”

· Which we know and correspond to the property listed prior

“Declaration block” is everything living inside the curly braces { }

All declarations end with a semicolon ;