In CSS( Cascading Style Sheet), a border is a attractive or functional element that surrounds an HTML element, similar as a div, paragraph, or image. The border property in CSS allows you to set the style, color, and thickness of the border.
/* Syntax of border in css*/
selector {
border: thickness style color;
}/* Border-Width: To set the border width or border thickness.*/
border-width: 7px | thin | medium | thick | length;/* Border-Style: To set the border style like that solid border, dotted border etc. */
border-style: solid | hidden | dotted | dashed | double | groove | ridge | inset | outset | none;/* Border-Color: To set the border color.*/
border-color: red;/* border-left-width : To set the left width only left border of the element.*/
border-left-width: 10px;/* border-left-style: To set the style only left border of the element.*/
border-left-style: dotted;/* border-left-color: To set the color of left border of the element.*/
border-left-color: blue;/* border-right-width : To set the right width only left border of the element.*/
border-left-width: 10px;/* border-right-style: To set the style right side border of the element.*/
border-right-style: solid;/* border-right-color: To set the color right side border of the element.*/
border-right-color: tomato;/* border-right-width: To set the width right side border of the element.*/
border-right-width: thick;/* border-top-style : To set the style of border on top of the element.*/
border-top-style: ridge;/* border-top-color: to set the color of top border of the element. */
border-top-color: aqua;/* border-top-width: To set the width of the top border.*/
border-top-width: thin;/* border-bottom-color: To set the color of border bottom of element. */
border-bottom-color: green;/* border-bottom-style: To set the style of border bottom. */
border-bottom-style: groove;/* border-break property to control the border of an element that spans multiple columns.*/
selector{
border-width: 12px;
border-style: dotted;
border-color: red;
border-break: close;
}box-shadow: inset || [length, length, length, length || color] none;border-collapse: collapse | separate;border-image: [number / % border-width stretch | repeat | round] none;/* border-radius: To use the corner round of the border of element. */
border-radius: 10px;/* border-top-right-radius: round the only top-right corner.*/
border-top-right-radius: 10px;/* border-bottom-right-radius: round the only bottom-right corner.*/
border-bottom-right-radius: 10px;/* border-bottom-left-radius: round the only bottom-left corner.*/
border-bottom-left-radius: 10px;/* border-top-left-radius: round the only top-left corner.*/
border-top-left-radius: 10px;In CSS (Cascading Style Sheet), background is used to set the background of the HTML. In the background property can be use set color in background, image in background, linear-gradient background etc.
/* Set the color of background*/
background: red;/* background-image: To set the image | gradient background | none in the background. */
background-image: url | gradient | none;/* background-position: To set the background position. */
background-position: top left | top center | top right | center left | center center | center-right | bottom-left | bottom-center | bottom-right | x% y% | x-pos y-pos;/* background size */
background-size: length | % | auto | cover | contain;/* background-repeat: To control the background repetation. */
background-repeat: repeat | repeat-x | repeat-y | no-repeat;/* background-attachment */
background-attachment: scroll | fixed | local;/* background-origin */
background-origin: border-box | padding-box | content-box;/* background-clip */
background-clip: border-box | padding-box | content-box; | no-clip;/* background-color */
background-color: color | transparent;The CSS (Cascading Style Sheet) box model is a way to represent the layout and sizing of HTML elements in a web page. Each element in a web page is treated as a rectangular box, which has four properties: content, padding, border, and margin.
/* Float */
float: left | right | none;/* Height: Height is use to set the height of the element */
height: auto | length | %;/* Max height: Max height is the maximum height of the element */
max-height: none | lenght | %;/* Min height: Min height is the minim height of the element */
min-height: none | length | %;/* Width: Set the width of the element */
width: auto | % | length;/* max width: max width is the maximum width of the element */
max-width: none | length | %;/* min width: min width is the minimum width of the element */
min-width: none | length | %;/* margin: Margin set the space of outside the block/element, margin takes space all around of the block*/
margin: lenght | % | 3px;/* margin-bottom: margin bottom used for outside space on bottom side of the block */
margin-bottom: auto | length | %;/* margin-top: margin top used for outside space on top side of the block */
margin-top: auto | length | %;/* margin-left: margin left used for outside space on left side of the block */
margin-left: auto | length | %;/* margin-right: margin right used for outside space on right side of the block */
margin-right: auto | lenght | %;/* padding: paddiing takes the space inside the block, padding takes space all around in the block */
padding: length | %;/* padding-top: padding top used for inside space in top side of the block */
padding-top: length | %;/* padding-bottom: padding bottom used for inside space in bottom side of the block */
padding-bottom: length | %;/* padding-left: padding left used for inside space in left side of the block */
padding-left: length | %;/* padding-right: padding right used for inside space in right side of the block */
padding-right: length | %;display: none | inline | block | inline-block | list-item | run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group
| table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | inline-flex |
inline-grid | contents | flex | grid; overflow: visible | hidden | scroll | auto | no-display | no-content;overflow-style: auto | marquee-line | marqueeblock;overflow-x: visible | hidden | scroll | auto | no-display | no-content;overflow-y: visible | hidden | scroll | auto | no-display | no-content;rotation: angle;rotation-point: position (paired value off-set)visibility: visible | hidden | collapse;clear: left | right | both | none;In CSS (Cascading Style Sheet), the font property is used to style the font of the webpages. There are more font property which used to style the font, font-family, font-size, font-weight, font-style and font-variant.
/* font family */
font-family: serif | sans-serif | monospace |cursive;/* font size adjust */
font-size-adjust: none | inherit | number;/* font style */
font-style: normal | italic | oblique | inherit;/* font variant */
font-variant: normal | small-caps | inherit;/* font size */
font-size: xx-small | x-small | small | medium | large | x-large | smaller | larger | inherit | length | %;/* font weight */
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit;/* font */
font: style variant weight size family;In CSS (Cascading Style Sheet), the text property can be used to set the color of text, text-alignment (left, right, center), text-decoration (underline, none), text-transform (lowercase, uppercase) , and line-height and letter-spacing.
/* direction */
direction: ltr | rtl | inherit;/* hanging punctuation */
hanging-punctuation: none | [start | end | endedge];/* letter spacing */
letter-spacing: normal | length | %;/* text outline */
text-outline: none | color | length;/* unicode bidi */
unicode-bidi: normal | embed | bidi-override;/* white space */
white-space: normal | pre | nowrap | pre-wrap | pre-line;/* white space collapse*/
white-space-collapse: preserve | collapse | pre-servebreaks | discard;/* punctuation trim */
punctuation-trim: none | [start | end | adjacent];/* text align */
text-align: start | end | left | right | center | justify;/* text align last */
text-align-last: start | end | left | right | center | justify;/* text decoration */
text-decoration: none | underline | overline | line-through | blink;/* text shadow */
text-shadow: none | color | length;/* word break */
word-break: normal | keep-all | loose | break-strict | break-all;/* word wrap */
word-wrap: normal | no-wrap;/* text emphasis */
text-emphasis: none | [ [accent | dot | circle | disc | [ before | after ] ? ];/* text indent */
text-indent: length | %;/* text justify */
text-justify: auto | inter-word | interideograph | inter-cluster | distribute | kashide | tibetan;/* text transform */
text-transform: none | capitalize | uppercase | lowercase;/* text wrap */
text-wrap: normal | unresrricted | none | suppress;/* word spacing */
word-spacing: normal | length | %;/* letter spacing */
letter-spacing: normal | length | %;/* line height */
line-height: normal | length | %;| :active | an activated element. |
| :focus | an element while the element has focus. |
| :hover | an element when you mouse over it. |
| :link | an unvisited link. |
| :disabled | an element while the element is disabled. |
| :enabled | an element while the element is enabled. |
| :checked | an element that is checked. |
| :selection | an element that is currently selected or highlighted by the user. |
| :lang | allows the author to specify a language to use in a specify element. |
| :nth-child(n) | an element that is the n-th sibling. |
| :nth-last-child(n) | an element that is the n-th sibling counting from the last sibling. |
| :first-child | an element that is the first sibling. |
| :last-child | an element that is the last sibling. |
| :only-child | an element that is the only child. |
| :nth-of-type(n) | an element that is the n-th sibling of its type. |
| :nth-last-of-type(n) | an element that is the n-th sibling of its type counting from the last sibling. |
| :last-of-type | an element that is the last sibling of its type. |
| :first-of-type | an element that is the first sibling of its type. |
| :only-of-type | an element that is the only child or its type. |
| :empty | an element that has no children. |
| :root | root element within the document. |
| :not(x) | an element not represented by the argument ‘x’. |
| :target | a target element as specified by a target in a UR. |
Comments
Oops!