- a boilerplate for the bare minimum of what you need for an HTML file - includes doctype, html, head and body tags
- the
<head>tag contains metadata about the document. Information in between these tags is not displayed. Could inlclude title, link to stylesheets
- the
<body>tag defines the document's body - what appears on the actual web page and can include text, paragraphs, links, images, tables, lists etc.
- semantic tags clearly describe their content to the browser. These tags include header, footer, nav, article, section, aside, main etc.
- non semantic tags do not describe the content they hold. They include div and span and are used for styling purposes mostly.
- selectors in css are used to define how certain html elements are styled. There are simple CSS selectors - those that match exactly to HTML elements (p, h1, h2 etc.).
p {background-clor: blue;}p is the selector
- class selectors identify a specific class used in the html document to target how it will be styled.
.home-nav{background-color: red;}.home-nav is the class selector
- id selectors identify a specific id used in the html document to target how it will be styled.
#nav-id{backround-color: yellow;}nav-id is the id selector
- the css box model is a box that wraps around every html element and consists of padding, border, margin (working out from the actual content). Padding is the first box around the content - it is transparent. The boarder goes around the content and the padding. The margin is the transparent area around the boarder, padding and content.
- defines how an element will be displayed. The defualt is either block or inline. Block elements start on a new line and take up the full width available. Block elements include p, div, h1..h6, form, header, footer, section. Inline elements do not start a new line and only take up the width necessary - allowing other elements to wrap around them. Inline elements include span, a, img. Inline-block elements are like inline elements but have a width and height. display none will hide an element - often used with javascript.
- float defines if an element should float where it is located on the page. It can be used to wrap text around images. An element can float right or float left.
- If you float an element that is larger than its container it will overflow outside of the containter. You can use clearfix to contain the element by setting
clearfix {overflow: auto;}
- latin dummy text used as filler text in priting, visual design, web design etc.
- defines a special state of an element such as when a mouse moves over it, visited or unvisited links. They are used like:
selector:pseudo class {color: red;}
- selectors that have a period with no space between them apply to those elements that have both selectors. selectors with commas between them apply to elements that have either selector. Selectors with a space between them mean that the second selector is a child of the first. Selectors with > between them means that the second selector is the direct child of the first.
For pseudo classes - go through the nth-child stuff. It will be helpful later on.
Good work here