CSS Flashcards
p.center {
text-align: center;
color: red;
}
< p> elements with class=”center” will be center-aligned
- {
text-align: center;
color: blue;
}
Universal Selector
h1, h2, p {
text-align: center;
color: red;
}
grouped selectors
<link></link>
External CSS
hsla, rbga
color hsla(9, 100%, 64%, 0)
background-image: url(“paper.gif”);
background image
background-repeat: repeat-x;
repeat-x, repeat-y, no-repeat
background-attachment: fixed
fixed, scroll
background: #ffffff url(“img_tree.png”) no-repeat right top;
background shorthand
border-style: solid;
border-width: 5px;
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border
border-width: 2px 10px 4px 20px;
border-width: 5px;
border-color: green;
border-color: red green blue yellow;
border: 5px solid red;
border-width
border-style (required)
border-color
border-left: 6px solid red;
background-color: lightgrey;
border-bottom: 6px solid red;
background-color: lightgrey;
border-left: 6px solid red;
background-color: lightgrey;
border-bottom: 6px solid red;
background-color: lightgrey;
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px
max-width
The value of the max-width property overrides width max-height max-width min-height min-width
outline-style outline-color outline-width outline-offset outline
outline: 5px solid yellow;
text-align
center / left/ right/ justify
a {
text-decoration: none;
}
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
text-transform
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
text-indent
p {
text-indent: 50px;
}
letter-spacing
h2 {
letter-spacing: -3px;
}
line-height
p.small {
line-height: 0.8;
}
direction
The direction property is used to change the text direction of an element:
p {
direction: rtl;
}
word-spacing
h1 {
word-spacing: 10px;
}
font-family
font-family: “Times New Roman”, Times, serif;
font-weight
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
a: link - a normal, unvisited link
a: visited - a link the user has visited
a: hover - a link when the user mouses over it
a: active - a link the moment it is clicked
a: hover MUST come after a:link and a:visited
a: active MUST come after a:hover
list-style-type
ul.a {
list-style-type: circle; or none
}
Table Borders
table, th, td {
border: 1px solid black;
}
border-collapse: collapse;
The border-collapse property sets whether the table borders should be collapsed into a single border:
td {
height: 50px;
vertical-align: bottom;
}
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in or
tr:hover {background-color: #f5f5f5;}
Use the :hover selector on to highlight table rows on mouse over:
tr:nth-child(even) {background-color: #f2f2f2;}
For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:
display: none;
display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved.
visibility:hidden;
visibility:hidden; also hides an element. However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:
position
static relative fixed absolute sticky
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
An element with position: relative; is positioned relative to its normal position.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Note: A “positioned” element is one whose position is anything except static.
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
An element with position: sticky; is positioned based on the user’s scroll position.
You must also specify at least one of top, right, bottom or left for sticky positioning to work.
overflow
visible - Default. The overflow is not clipped. The content renders outside the element’s box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary
float
left / right / none / inherit
clear
The clear property specifies what elements can float beside the cleared element and on which side.
none/left/right/both/inherit
div p {
background-color: yellow;
}
Descendant Selector
The following example selects all <p> elements inside <div> elements:
div > p {
background-color: yellow;
}
The child selector selects all elements that are the children of a specified element.
div + p {
background-color: yellow;
}
The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.
div ~ p {
background-color: yellow;
}
The general sibling selector selects all elements that are siblings of a specified element.
p:first-child {
color: blue;
}
The :first-child pseudo-class matches a specified element that is the first child of another element.
p:nth-child(2) {
background: red;
}
Specify a background color for every p element that is the second child of its parent:
::first-letter
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
list-style-type
ul {
list-style-type: none;
margin: 0;
padding: 0;
}li a {
display: block;
width: 60px;
}
Vertical Navigation Bar
:not(p) {
background: #ff0000;
}
Set a background color for all elements that are not a <p> element:
a[target] {
background-color: yellow;
}
CSS [attribute] Selector
a[target=”_blank”] {
background-color: yellow;
}
CSS [attribute=”value”] Selector
[title~=”flower”] {
border: 5px solid yellow;
}
The [attribute~=”value”] selector is used to select elements with an attribute value containing a specified word.
[class|=”top”] {
background: yellow;
}
The [attribute|=”value”] selector is used to select elements with the specified attribute starting with the specified value.
[class^=”top”] {
background: yellow;
}
The [attribute^=”value”] selector is used to select elements whose attribute value begins with a specified value.
[class$=”test”] {
background: yellow;
}
The [attribute$=”value”] selector is used to select elements whose attribute value ends with a specified value.
[class*=”te”] {
background: yellow;
}
The [attribute*=”value”] selector is used to select elements whose attribute value contains a specified value.
input[type=text]:focus {
background-color: lightblue;
}
Use the :focus selector to do something with the input field when it gets focus:
textarea {
resize: none;
}
Use the resize property to prevent textareas from being resized (disable the “grabber” in the bottom right corner):
border-radius
The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
Full Size Background Image
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}Hero Image
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
CSS Linear Gradients
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
CSS Linear Gradients
#grad1 {
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow); /* Standard syntax (must be last) */
}
background-image: linear-gradient(angle, color-stop1, color-stop2);
#grad {
background-image: linear-gradient(-90deg, red, yellow);
}#grad {
background-image: radial-gradient(red, yellow, green);
}#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}div {
box-shadow: 10px 10px 5px grey;
}
horizontal shadow and the vertical shadow / blurr / color
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
text-overflow: ellipsis;
}It can be clipped:
This is some long text that will not fit in the box
or it can be rendered as an ellipsis (…):
This is some long text that will
What do you want to eat?
<br></br>
We then assign the for attribute of the element with the value of the id attribute of , like so:
We can also provide a step attribute which creates arrows inside the input field to increase or decrease by the value of the step attribute.
