Download to read offline
Uploaded byKetan Ghumatkar
PPTX, PDF227 views
HTML and CSS
The document provides an overview of HTML and CSS basics. It covers HTML structure using tags, common HTML elements and tags like headings, paragraphs, lists, and tables. It then covers CSS and how it can be used to style HTML elements either inline, internally, or via an external stylesheet. Key CSS concepts covered include properties for fonts, colors, padding, borders, dimensions. The document concludes with an assignment to build a page using HTML and external CSS.
More Related Content
Similar to HTML and CSS
Recently uploaded
HTML and CSS
- 1.www.treeni.comHtml, Css- KetanGhumatkar
- 2.HTML Basics● Hypertextmarkup language● Browser language● Building blocks using tags● Structure of website
- 3.HTML Basic Layout<!DOCTYPEhtml><html><head></head><body></body></html>
- 4.HTML Advance Layout<!DOCTYPEhtml><html><head><title>Page Title</title></head><body><h1>This is a Heading</h1><p>This is a paragraph.</p></body></html>
- 5.HTML Advance Layout●<header> - Defines a header for adocument or a section● <nav> - Defines a container fornavigation links● <section> - Defines a section in adocument● <article> - Defines an independent self-contained article● <aside> - Defines content aside fromthe content (like a sidebar)● <footer> - Defines a footer for adocument or a section● <details> - Defines additional details● <summary> - Defines a heading for the<details> element
- 6.HTML TAGs -Elements and AttributesExamples -<a href="https://www.w3schools.com">This is a link</a><img src="img_girl.jpg" width="500" height="600">
- 7.HTML - ImportanttagsHeadings<h1>- </h1><h2>- </h2><h3>- </h3><h4>- </h4><h5>- </h5><h6>- </h6>Paragraphs<p>-</p>Content holders<div>-</div><span>-</span>Listings<ul> <ol><li>A</li> <li>A</li><li>B</li> <li>B</li></ul> </ol>Table<table><th><td></td><td></td></th><tr><td></td></tr></table>
- 8.HTML - stylingBasicstyling with tags● <b> - Bold text● <strong> - Important text● <i> - Italic text● <em> - Emphasized text● <mark> - Marked text● <small> - Small text● <del> - Deleted text● <ins> - Inserted text● <sub> - Subscript text● <sup> - Superscript textElement types- Block- inline
- 9.CSS - Basic●Cascading style sheet● How element should look like● Color, size, shape, position● CSS can be added to HTML elements in 3 ways● Inline - by using the style attribute in HTML elements● Internal - by using a <style> element in the <head> section● External - by using an external CSS file
- 10.CSS - InlineStyling● Mostly used for single element to style● Uses the style attribute of html element● Example -<h1 style="color:blue;">This is a Blue Heading</h1>
- 11.CSS - InternalStyling● Used to define style for single html page● Is defined in the <head> section within <style> tag<!DOCTYPE html><html><head><style>body {background-color: powderblue;}h1 {color: blue;}p {color: red;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>
- 12.CSS - ExternalStyling● Used defined style for multiple html pages● You can change look of entire website with single file<!DOCTYPE html><html><head><link rel="stylesheet" href="styles.css"></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>body {background-color:powderblue;}h1 {color: blue;}p {color: red;}
- 13.CSS - Propertiesfont:15px arial, sans-serif;background: lightblue url("img_tree.gif") no-repeat fixed center;padding: 10px; padding: 10px 2px; padding: 5px 10px 15px 20px;border: 5px solid red;width: 500px; width: 50%;Try different properties in chrome debuggerReference: https://www.w3schools.com/cssref/default.asp
- 14.CSS - conceptPaddingand MarginFloat: left, right, none;Position: static, relative, absolute, fixed
- 15.Assignment OverviewWrite HTMLand CSS to create below pageFolder structure- Assignment- index.html- css- style.css
- 17.