CSS stands for cascading style sheet It file extension is .CSS. It is main objective is to enhance an attractive look of created webpage in HTML.
CSS describes how HTML element are to be displayed on screen, paper, or in other media. CSS work just like a human body.
- It stands for cascading style sheet.
- It is main objective is to enhance an attractive look of created webpage in HTML.
- It is only designing tool.
- It is a collection of style which are used with HTML tags.
- It file extension is .CSS .
- It is not case sensitive.
How To Add CSS
Three ways to Insert CSS
- External CSS
- Internal CSS
- Inline CSS
Components of CSS
- selector
- property / style
- Value
Selector
Selector is an element in which we can define/set style according to requirement.
There are five types of selector.
- Tag selector /element selector.
- It represent the name of HTML Tag
- Class selector.
- It is identifies with the help of any particular name a/c to identifier rule.
- It must be start with dot(.) symbol.
- It is applies with multiple tags a/c to requirement.
- It can be use multiple times.
- Id selector.
- It is similar to class selector but it is written with the help of of # symbol.
- One major difference b/w Id and class is that Id can be use only once time but class can be use multiple times according to requirement.
- Group selector.
- In this case we define styles with multiple tag
- Universal selector.
- It is applies for all elements.
- It is represent with the help of (*)star .
Method for using style in CSS
- Inline style
- It is mainly use with particular tag.
- Internal style
- It is use for only single webpage.
- It is written within <style> tag.
- <style> tag must be define in <head> tag.
- External style / Embedded style
- It is use for multiple webpages.
- It consist of separate CSS file in which only style or property are define.
- <link> tag is used to embed CSS file in html webpage.
- <link> tag is define within <head> tag.
Background style
- Background-color
- Background-attachment
- Background-position
- Background-size
- Background-repeat
- Background-image
Border style
- Border-color = change border color
- Border-width = set border width
- Border-style
- Border-left = use modify particular border
- Border-top:
- Border-right
- Border-bottom
- Border-left/right/bottom/top-style = dotted;
- Border-radius.
Margin style
- Margin-top
- Margin-left
- Margin-right
- Margin-bottom
Paddding style
- Padding -top
- Padding -left
- Padding -right
- Padding –bottom
Position Property
It is mainly used to set the position of element on web page according to requirement.
It has four values
- Static
- It is default position . in this case we cannot set position of element from its normal position.
- relative
- In this case we can set the position of element in any direction a/c to requirement
- fixed
- In this case we can set the position of element in any direction but it is fixed
- absolute
- It work a/c to nearest ancestor . in this case we can set position of element in any direction.
Display property
It is use to display element in block level and inline level on web page. In other words, it is specify how to display element on web page.
Value of display property
- Inline = It is use to create inline level tag element. In this case heigh and width cannot be define.
- Block = It is use to display element in block level. In this case height and width can be define.
- Inline-block – It is similar to inline but we can set height and width.
- None = In this case element cannot be display.
Layers in css/ z-index property
- z-index property is use to create layer like stack in program.
- It used with positional element.
- The value of z-index must be integer value.
Outline style
It is similar to the border but it must be defined in all direction of any particular on web page. While border can be define with any direction.
Outline is not part of element while border is part of element.
Outline style
- Outline-style
- Outline-width
- Outline-color
Transform property
This property is used to the change the shape/size and position of any element on the web-page.
There are some transform method :-
- Translate()
This method is use to move any element from one place to another place. - Rotate()
This method is use to rotate any element clock wise or anti-clock wise according to the specified degree. - Scale()
This method is use to increase or decrease the size of element. - Skewx() and skewy()
This method is use to increase or decreased the particular axis odd element.
If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below or write us on info@basicengineer.com for more details. See you guys in another article.
Stay Connected Stay Safe. Thank you.
0 Comments