HTML: Basics (1&2)
3 methods to apply css to pages?
1. Internal style - In head section of html doc - use <style> tags <head> <style> p { font-size: 20px;} </style> </head> 2. Inline style - Considered bad but good for debugging - Will override other styles <h1 style="color: white;"> 3. External stylesheet - Right after head element for page loading purposes - Try and use no more than 3 <link rel="stylesheet" href="css/style.css">
Title tag
Adds title to browser toolbar
Media queries
Allow page elements to be adjusted based on the width of the page
What is a anchor element <a href
An anchor is a piece of text which marks the beginning and/or the end of a hypertext link
Inline elements
An inline element does not start on a new line and only takes up as much width as necessary. Can be next to each other on same line.
href=""
Attribute that specifies the path to the resource
Class selector
Can classify and target more than 1 element .column {}
ID selector
Gives unique id to element - ID's will override class id="primary-content" #primary-content {}
Meta Tags
Info about our info
M.B.P.E
Margin, border, padding, element
rel="stylesheet" What does rel do?
Rel is used to define the relations of the current pg to pg we're linking it to.
CSS data types can be ____ and ___
Relative and absolute Absolute 1. px: Will stay the same even when changed size of browser - Most precise, predictable Relative 2. %: Of browser width Em: 1em = 16px - Use % or em for designs that need to scale
Universal selector
Selects every element and applies style. Overrides others. Considered bad practice. *column {}
Span Tag?
The HTML <span> tag is used for grouping and applying styles to inline elements. There is a difference between the span tag and the div tag. The span tag is used with inline elements whilst the div tag is used with block-level content.
viewport
User's visible area of a web page
Block-Level ements
always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Takes up 1 line.
h1 {color: orange;} - define parts
h1 -> selector color->property orange->value. Selector = select part of doc to change Property = identifies what we want to change Value = how we want something to change
The two ways to identify colors in CSS
hexadecimal and color keywords
Style tags
indicate where css is written in html doc
attribute
provides additional info about an element. Usually comes in name="value" pair
absolute units
px: Will stay the same even when changed size of browser
