Scribd
Upload
2 views

html,css_notes

The document provides an overview of HTML and CSS concepts, including the use of anchor tags, image tags, and the distinction between block and inline elements. It explains CSS priorities, responsive design techniques, and the CSS Box Model, along with positioning and display properties. Additionally, it covers CSS Flexbox and Grid for layout management.

Uploaded by

Pranshu Patel
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

html,css_notes

The document provides an overview of HTML and CSS concepts, including the use of anchor tags, image tags, and the distinction between block and inline elements. It explains CSS priorities, responsive design techniques, and the CSS Box Model, along with positioning and display properties. Additionally, it covers CSS Flexbox and Grid for layout management.

Uploaded by

Pranshu Patel
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

HTML and CSS

HTML

 Anchor tag to link pages,absolute link (link to other project, ) relative link(link to other page that in the
project), link to id (href=’#ID’) It will move to same page but different attribute
 Img tag ,p , put scripts in head, it will give metadata
 Div and span tag are the most used to do positioning of element in it,, span used for small modification,
don’t modify the layout
 Div,p,h1 is block ele, span,img, a is inline block ele , we can convert div as inline means don’t take full
wodth
 Get method – www../?{query string like user=demo&roll=12} exposed in url, post – hidden in url
 You want to group – class, unique select – id

CSS

 Priority wise: Id > Class, two classes given class = “logo bigtext” later is higher, class and inline css written
in same tag so inline css is high priority than external, class .. all, use !important to give higher priority
than others, but don’t use
Inline css > later is higher > id > class > tag
 if width, height in px it won’t change In responsive , use %, vh, vw, , for text use.‘rem’ because relative to
root elemen means size of web browser def:16px, % relative to h and w of parent element, em rel to font
size of parent ele, vh,vw rerlative to view point
 If I want content to center, so need to tell parent that add attributes to align me to center.
 Width always will give, but you need to add height also in child class
 CSS Selector -> class, id , child selectr: I want red color p in div div >p {}so it should be in div not in other
like article tag, descendant sele -> div p {} styling on p in dev , anywhere in div it would applies
 CSS BoxModel html content – padding -border-margin, css directional clockwise top right bottom left , in
padding we can show other thing like color, other , Each box has a content area (e.g., text, an image, etc.)
and optional surrounding padding, border, and margin areas
 Basically if we do padding , border so It affects the height, width of box, size calculates for box: padding
+wodth + border, box-sizing: border-box expand the content to include padding, border so it not exceed
the width height of box (cal width + padding = 300 width), content-box.
 CSS Positioning 1. Absolute: relative to its first parent, means for to do that parent should be postn set to
relative, in child absolute, use to do right, left in parent , 2.fixed you can fixed content on the screen , it
wont move , like chatbot parent: reltv, child fixed, if we put bottom:20px , it fixed 20px from bottom. In
relative pos we can move top, right.. it wont work if relative not given
 CSS display: block- div,h1, it will take full width, space, inline- it take space as per content only, none-
removed from html layout not hidden,not invisible we can put in that area
 CSS Flexbox:
 CSS Grid: u can define o of rows and cols, we can overlap also
 Use gap instead. Of padding

You might also like