Basic Details of HTML and CSS.pdf
1 like2,481 views
This document provides an introduction to HTML and CSS. It defines HTML as a markup language used to structure web pages with tags, and CSS as a style sheet language used to describe how HTML elements are displayed. It lists common HTML elements like headings, paragraphs, and divs that can be block or inline, and describes how CSS can be applied internally, inline, or via external stylesheets to control things like colors, fonts, and layout. Key differences between HTML and CSS are also outlined, with HTML for structure and CSS for presentation.
Basic Details of HTML and CSS.pdf
- 1. Basic Details of HTML
- 2. Introduction HTML text markup language hyper referential link data predefined communicate • Client Side Scripting Language not programming language. Its markup language set of markup tag. • Its used to design static webpages. • Markup tags used to describe use to page. • Every webpage designed is HTML has an extension .html . • Notepad and Notepad++ • Its executed in any web browser
- 3. Example: <!doctype html> <html> //open tag// <body> <h1> My first heading </h1> <p> My first paragraph </p> </body> </html> //close tag // Visible page content Describe the web page Output: My first heading My first paragraph
- 4. HTML Element • Block level Element i) behaves like blocks, block level like <p>,<h1>,<div>,<ul>,<ol>,<pre>,<address>,<form> . ii) This elements always starts in new line and occupy full width of parent element. • Inline Element i) Starts in the same line. ii) Their width is equal to their content <b>,<l>,<s>,<u>,<strong>,<del>,<sup>,<sub>,<anchor>,<span> . iii) <img> tag supports width and height.
- 5. Basic Details of CSS
- 6. Introduction • CSS stands for Cascading Style Sheets. • Its the language we use to style an HTML document. • Its describes how HTML elements are to be displayed on screen , paper or other media. • Its saves a lot of work. It can control the layout of multiple web pages all at once. • External stylesheet are stored is CSS files.
- 7. Why use CSS? CSS used to define styles for your web page including the design , layout and verification in display for different devices and screen size. Example: body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-size: 20px; }
- 8. CSS can be added to HTML documents in 3 ways: 1.Inline - by using the style attribute inside HTML elements. 2.Internal - by using a <style> element in the <head> section. 3.External - by using a <link> element to link to an external CSS file. CSS Selectors: CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories: •Simple selectors (select elements based on name, id, class) •Combinator selectors (select elements based on a specific relationship between them) •Pseudo-class selectors (select elements based on a certain state) •Pseudo-elements selectors (select and style a part of an element) •Attribute selectors (select elements based on an attribute or attribute value)
- 9. Selector Example Example description #id #firstname Selects the element with id="firstname" .class .intro Selects all elements with class="intro" element.class p.intro Selects only <p> elements with class="intro" * * Selects all elements element p Selects all <p> elements element,element,.. div, p Selects all <div> elements and all <p> elements All CSS simple sectors:
- 10. Difference between HTML and CSS HTML CSS HTML is used to define a structure of a web page. CSS is used to style the web pages by using different styling features. It consists of tags inside which text is enclosed. It consists of selectors and declaration blocks. HTML doesn’t have further types. CSS can be internal or external depending upon the requirement. We cannot use HTML inside a CSS sheet. We can use CSS inside a HTML document. HTML is not used for presentation and visualization. CSS is used for presentation and visualization. HTML has comparatively less backup and support. CSS has comparatively higher backup and support.