CSS is acronym of “cascading style sheets” is a computer language for laying out and Structuring web pages (html) this language contains coding elements and is composed of these “cascading style sheets” which are equally called css files.
CSS syntax
h1 is the element you want to style
the declaration block contain a one or more declaration these are separate by semicolones
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
In this article i am going to talk about some important contents of CSS. like Box model and position property .these contents very important consider about layout of web page.
BOX MODEL
we consider about layout and design box model come to first. it includes margin, border, padding and actual content.
content : area of the images and text include.
padding : clears and area around the content. the padding is transparent
border : A border that goes around the padding and content
margin : Clears an area outside the border. The margin is transparent
this content, padding, border, and margin four areas called edge. all edges broken down into left, right, top, bottom. then we can place our content in right place.
in above example we can give values margin top, margin right like wise. with these edges we should add height and width to the element. then we can calculate total width and height using these edges.
total width=width+ padding-left+ padding-right+ left border+ right border+ left margin +right margin.
like wise we can calculate total height of the element
total height= height+ padding top + padding bottom + border top + border bottom + margin top + margin bottom
CSS Layout- The position property
Position property indicate type of positioning method used for an element. static, relative, fixed, absolute, or sticky. there is five position values.
static, relative, fixed, absolute, sticky.
we set elements top, bottom, left, right like wise. but that is does not work first we did not use position property. they defending on position value differently.
Position : static;
every element has static position by default. it is always stick to the normal flow of the page. left right bottom top changed in element is nothing effect to the element in static position.
POSITION : relative;
An element with position relative value its assigned to it is normal position. setting up element left right top bottom is caused adjusted away from it is normal position. Other content will not be adjusted to fit into any gap left by the element.
Position : fixed;
An element with position: fixed; is positioned relative to the viewport. that means it is always in same place even page is scrolled. The top bottom left right are use to position the element. the fixed element not change in normal position which in it is fixed position.
Position : absolute ;
very important position. element with position absolute s positioned relative to the nearest positioned ancestor(instead of positioned relative to the viewport, like fixed).that element is absolute position it is not positioned ancestor.it use the document body and moves along with the ancestor. lets consider about this more. when we talking about relationship of relative position and absolute position.
an element with relative position gives you the control of inside it use absolute position element.
children element of absolute position get control of inside the element of relative positioned. this very impotent designing web page. let see what happen when we did not do it.
in this change absolute positioned elements are positioning them selves relation to the body element instead of it is their parent element. that is why page window grows bottom element going to stick with the browser element. when we touch this trick it is very useful.
Position : Sticky;
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. this position based on the users scroll position. it can basically use menu bars in webpages. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position :fixed).
above i mentioned about some important concepts of CSS. there are lot of things in CSS. i describe some basics but very important.
