NEWM-N 115
Base CSS Code
* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } h1, h2, h3, h4, h5, h6, p { margin-bottom: 16px; }
What is the web?
- network of computers or servers - called: the internet or worldwide web - browsers display the information
Class
.classname (change class to actual class name) Used to modify tags
Stand Alone / Self Closing Tags
<br> / <img>
Container Tags
<html> </html>
Pictures / Images
<img> Can be relative or absolute paths, relative is better
Div
A block level element / container. Located inside of body Takes up width of 100% and length 0%
hero
A large image sometimes w/text placed at the top of a web-page
Relative Path
A path that begins at the current working directory; also known as a path where the file is located at the same level (../img_folder/logo_image.jpg)
Compound Selector
A tool which defines formatting of two or more HTML tags, classes, or IDs at the same time. EX: .classname p EX 2: putting "nav a" targets all "a" tags inside of the "nav" BUT just having "a" will target all "a" tags in code
Padding
Blank space between content and border
Link htmls through copying
CTRL (or COMMAND) + SHIFT + S Copies all information from old html to new
CSS
Cascading Style Sheets
Types of Tags
Container / stand along or self closing / head / body
<!DOCTYPE>
Defines the document structure and explains how the tags are read
Float Types
Disregard space none: The element does not float, (will be displayed just where it occurs in the text). This is default. left: The element floats to the left of its container right: The element floats the right of its container initial: Sets this property to its default value inherit: Inherits this property from its parent element
Body Tags
Header: H1 - H6 <h1> </h1> Paragraph: <p> </p> Line Break: <br>
HTML
Hypertext Markup Language
3 Implement Styles
Inline Embed External
Image ALT
Inside of image tag Used to describe the image using a normal sentence structure Required for accessibility
Sir Tim Berners-Lee
Inventor of WWW & html. Oversees web standards
What does * do in css?
It targets the entire page to remove any space between pictures and borders
How do you avoid spaces between images?
Keep all img code on one line
Types of Margins
Left, Right, Top, Bottom Used to create space around elements outside of any defined borders
display: flex;
Makes SAME anchors equal distance apart
background-repeat: none
Makes sure image shows only once
Head Tags (3x)
Metadata: <meta> Title: <title> </title> Style: <style> </style>
External Styling
Needs to be linked in html page. Needs to be inside head tag. EX: <link rel = "stylesheet" type = "css" href = "styles.css/>
PC vs. Mac slashes
PC uses a backslash (\) Mac uses a fowardslash (/)
background-position: center
Positions the actual background image in the middle of the div it's under
margin-bottom
Sets the bottom margin of an element
margin-left
Sets the left margin of an element
margin-right
Sets the right margin of an element
margin-top
Sets the top margin of an element
box-sizing
Tells the browser what the sizing properties (width and height) should include box-sizing: border-box; is the most common
Hypertext
Text presented on one electronic device. Has the ability to link from one web page to another, thus creating a web of information.
Serif
Text with feet (Times New Roman)
Sans Serif
Text with no feet (Arial)
What happens if you rename a file mid-project?
The file path will break
Project Folder / Directory
The folder which contain the elements, saved programs and links for specific projects. Is located inside of the root folder
Types of Metadata
Title / Document / Keywords / Descriptions / Author Details / Copyright
camelCase
Typing format used to type variables. • When naming a variable, start with a lowercase letter on the first word, and capitalize each new word. • Ex. numberOfDogs
How should you plan and draw out your folders for a project?
Using a whiteboard or paper ☐ Project root Folder ☐ Project Text Content Folder ☐ Homepage ☐ Products Page ☐ Project Document Folder ☐ Past Ref Slogans ☐ Scripts
unordered list <ul>
a bullet-pointed list (• • •)
ordered list <ol>
a numbered list (1. 2. 3.)
Embedded Styling
applies to the whole document but must be located inside of head tags EX: <head> <style> h1 { color: color name ; } </style> </head>
..
backs out of your current folder
margin: auto;
centers the element
CTRL / & CMD /
comments out your code (turning it grey and with /* around it, making it not work)
p*3>lorem
creates 3 paragraphs with lorem in them
Must have inside html
css (linked) must start with index.html
background-image
css property that allows an image to be in the background of a div
Metadata
data that describes other data; takes plain text with additional codes or tags and turns raw text into easily readable text on other electronic devices. (Is why we have rich multimedia)
Inline Styling
is useful for applying a unique style to a single HTML element. Styling is inside the tag. EX: <h1 style = "color: red">
background-size: cover
makes actual background image cover div as close as possible
./
moves to root folder
Padding/margin sides order
padding: top right bottom left
Absolute Path
starts at the root of the operating system and lists every file you want (https://www.domain.com/project_folder/file.jpg)
Fonts
sub-folder placed inside of css
How to make multiple tags appear at the same time?
tagname + * + # EX: nav>a*4 (makes 4 nav a tags) p*3 (makes 3 paragraph tags)
./.
takes you to web folder
Root Folder
the main folder which contains all documents and folders to that project
list item <li>
used for each item listed in an OL or UL
margin: 0 auto;
will center a container in the browser window no matter what its window size