Question | Answer |
p { display: none; } | The selector p will not be appeared. |
div:hover {background-color: pink;color:black;} | If you hover over the div element, it will get this specific style. |
margin: auto; | Align center horizontally a block element. |
span:hover p {display: block;} | If you hover over the <span> element, the <p> element will be appeared. |
display: inline-block; | Create an inline block box. |
The combinator: | Explains the relationship between the selectors. |
div p {color:green;} | Matches all p elements in <div> elements. |
div > p {color:green;} | Selects all <p> elements that are immediate children of a <div> element. |
div + p {color:green;} | Selects all <p> elements that are placed immediately after <div> elements. |
div ~ p {color:green;} | Selects all <p> elements that are siblings of <div> elements. |
::selection {color: white; background: blue;} | Specify a style in a selected text. |
h3::after {content: url(unicaf.jpg);} | After every <h3> element, the image "unicaf.jpg" will be appeared. |
h3::before{content: url(unicaf.jpg);} | Before every <h3> element, the image "unicaf.jpg" will be appeared. |
p::first-line {color: green;} | The first line of a paragraph will be appeared with this specific style. |
p::first-letter {color: green;} | The first letter of a paragraph will be appeared with this specific style. |
:not(p){color: red;} | Matches all elements that are not p element and format them with this specific style. |
:not(h1){color:red;} | Matches all elements that are not h1 element and format them with this specific style. |
Display property: | Specify how an element is displayed. |
Span {display: block;} | Every span element creates a new line. |
overflow: hidden; | If the content is not fit to the content box, the content will be disappeared. |
overflow: scroll; | If the content is not fit to the content box, a scrollbar will be appeared. |