Basic Details of HTML and CSS.pdf
•
0 likes•1,174 views
Basic details of HTML and CSS
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Basic Details of HTML and CSS.pdf
Similar to Basic Details of HTML and CSS.pdf (20)
Recently uploaded
Recently uploaded (20)
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.