CSS Cheat Sheet: Types, Syntax, Concepts, & More
It was in 1994 that Håkon Wium Lie proposed the idea of CSS. In 1996, the first version of the same was invented. Since then many new additions and enhancements have been made and new versions of the CSS released.
CSS was invented to solve the problem of adding styling information to every single page of an HTML document. This blog will give you a CSS cheat sheet on all the necessary commands and properties so that you do not end up taking a lot of time with your website design.
What is CSS?
Cascading Style Sheet or CSS is a style sheet language used to define the style of a document written in a markup language such as HTML or XML. It specifies the page layout, color, and font while the HTML deals with the structure of the web page. It is responsible for describing how HTML elements will look on the webpage. External stylesheets are also stored in CSS files.
Join our Full stack developer course with placement and start your journey to becoming a professional full stack developer today and let us help you secure placement.
Types of CSS
CCS is of three types. These are as follows.
1. External CSS
- It is a separate style sheet that is later linked to the .html file. It includes a header section in the HTML document to link the external style sheet. It is used mainly to give a cleaner structure to our HTML files.
Example:
<head>
<link rel=”stylesheet” type=”text/css” href=mysitestyle.css”>
</head>
2. Internal CSS
It is written directly into the header of the HTML document. It is useful when styling a single page.
Example:
<head>
<style>
Body { background-color:pink; }
P { font-size:30px; color:blue; }
</style>
</head>
3. Inline CSS
It is a CSS block that is written directly into a single instance of HTML code.
Example:
<h1 style=”font-size:25px;color:blue;”>This is the headline!</h1>CSS Syntax
The CSS syntax consists of a selector and declaration block. Here an attribute is assigned values within the brackets following the name of the element that is to be styled.
Look at this sample syntax-
h2 {color:orange; font-size: 14px;}
Here the “h2” is the selector and the values in the bracket are declared.
CSS Concepts
There are basic to advanced commands in this CSS cheat sheet to get your cascading stylesheet started.
1. CSS Selectors
Selectors in CSS instruct the browser to find the HTML elements that are to be styled. Different types of CSS selectors are as follows:
| Command | Description | Syntax |
| Universal Selector | It matches any type of element. It can be namespaced when utilizing @namespace. | {property:value;} |
| ID Selector | It matches an element based on the value of its id attribute. | Id {property:value;} |
| Class Selector | It matches the elements on the basis of the given class attribute. | .class {property:value;} |
| Type Selector | It matches elements based on their node names, that is, it selects all the elements of the given type. | h1, h2, h3 {property, value;} |
| Adjacent Sibling Selector | It is used to separate two selectors that are usually children of the same parent. A “+” sign denotes an adjacent sibling combinator. | h1+p {property, value;} |
| Child Selector | It is used to match the elements which are children of a specified element. A child combinator (>) is put between two CSS selectors to establish the relationship. | parent element>child element {property, value;} |
| General Sibling Selector | It matches all the elements that follow the first element where both are children of the same parent. | h1~p {property, value;} |
| Descendant Selector | It matches all the elements which are children of the element. But it selects the elements matched by the second selector only if they have an ancestor element matching the first selector. | element element {property, value;} |
2. Pseudo-classes and Pseudo-elements
A pseudo-class is used for defining an element’s special state. Specific parts of an element are styled using pseudo-elements. Different types of pseudo-classes and pseudo-elements are as follows:
| Command | Description | Syntax |
| Move over Selector | It is used to target an element that we want to get triggered when the user hovers over it with the cursor. | a:hover {property, value;} |
| Active Link Selector | It is used to style the link that is clicked on. It is usually used with <a> and <button> elements. | a:active {property, value;} |
| Focus Selector | It is for the element that gets triggered when the user clicks or taps on it or selects it with the tab key. | input:focus {property, value;} |
| Visited Links Selector | It styles the links that have already been visited by the user. | :visited {property, value;} |
| Link Selector | It is used to select links that have not been visited. | .class:link {property, value;} |
| Checked Selector Element | It represents a radio, checkbox, or option element that is checked, selected, or toggled to an on-state. | input:checked {property, value;} |
| Disabled Elements Selector | It selects the disabled element. | input:disabled {property, value;} |
| Enabled Elements Selector | It selects the element that is currently enabled. | input:enabled {property, value;} |
| Not a Specified Element Selector | It selects the element that does not match a list of selectors. | :not(p) {} |
| First Line Selector | It is used to style the first line of a block-level element. | p::first-line {property, value;} |
| First Letter Selector | It is used to style the first letter of the first line of a block-level element. | ::first-letter {property, value;} |
| First Child Selector | It represents the first element among the group of sibling elements. | :first-child {property, value;} |
| Last Child Selector | It represents the last element among the group of sibling elements. | :last-child {property, value;} |
| Only Child Selector | It is used to select the element without any siblings. | :only-child {property, value;} |
| :nth-child Selector | It selects elements based on their position. | :nth-child{property, value;} |
| The First Element of Its Parent Selector | It is used to target the first appearance of an element within a container. | P:first-of-type {property, value;} |
| Elements That Have No Children Selector | It represents the elements that do not have children. | p:empty {property, value;} |
| Before Element | It is used to define created content that comes before the content of an element. | class::before {property, value;} |
| After Element | It is used to define created content that comes after the content of an element. | .class::after {property, value;} |
3. CSS Text Styling
Text Styling in CSS is used to style and format text. Here are different types of CSS text styling commands.
| Command | Description | Syntax |
| Font Style | It defines the font style. | font-style: normal | italic | oblique |
| Font Variant | It defines the font variation. | font-variant: normal | small-caps |
| Font Weight | It sets the weight of the font. | font-weight: normal | bold | bolder | lighter | 100 – 900 |
| Vertical Alignment | It adjusts the alignment of the text. | vertical-align: baseline | 10px | sub | super | top | text-top | middle | bottom | text-bottom | initial |
| Text Transform | It defines the case of the text, i.e. upper case, lower case, or capitalized. | text-transform: capitalise | lowercase | uppercase |
| Font Size | It defines the size of the font. | font-size: 12px | 0.8em | 60% |
| Space Between Characters | It is used to adjust the space between characters. | letter-spacing: normal | 4px |
| Line Height | It is used to define the height of the line. | line-height: normal | 3em | 24% |
| Horizontal Alignment | It is used to align the text horizontally. | text-align: left | right | center | justify |
| Text Align Last | It defines the orientation of the last line of a block before a forced line break. | text-align-last: auto | left | right | center | justify | start | end | initial | inherit |
| Text Decoration | It is used to specify the decoration to be added to a text. It is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness. | text-decoration: none | underline | overline | line-through |
| Indent First Line | It sets the indentation of the first line of the text block. | text-indent: 20px |
| Font Family | It specifies the font of an element. It can hold several font names as a “fallback” system where if the first font is not supported by the browser, the next font is tried. | font-family: ‘Open Sans’, sans-serif |
| Text Justify | It is used to specify the justification method of the text, i.e. how the text will be justified. | text-justify: auto | inter-word | inter-character | none |
| Text Overflow | It is used to specify how the hidden overflowed content is signaled to the user. | text-overflow: clip | ellipsis | string | initial | inherit |
| Text Shadow | It adds a shadow to the text. | text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit |
4. CSS Table
The CSS Table commands are used to give styling instructions for the table in the HTML sheet. Various CSS Table commands are as follows:
| Command | Description | Syntax |
| Adding Borders to Tables | The border property is used to define the borders of the table. | border: 2px solid black; |
| Adjusting Spacing Inside Tables | The padding property defines the padding or the space between the cell contents and cell borders. | th, td {padding: 20px;} |
| Width and Height | With the width and height property, we can specify not just the width and height for the table but the cells too. | table {width: 100%;} | th {height: 20px;} |
| Table Layout | It is used to specify the layout for table cells, rows, and columns. | table { width: 200px; table-layout: fixed; } |
| Horizontal Alignment of Cell Contents | It is used to position a text inside the table cells horizontally. | th {text-align: left;} |
| Vertical Alignment of Cell Contents | It is used to align the content in the cells to the top, bottom, and center. | th {height: 20px; vertical-align: center;} |
| Making a Table Responsive | The overflow property is used to add responsiveness to the tables by allowing horizontal scrolling on tiny displays to support mobile devices. | <div style=”overflow-x: auto;”> <table> table content </table> </div> |
5. CSS Position
With position commands, one can specify how and where an element has to be displayed on a webpage. Here are some CSS Position commands:
| Command | Description | Syntax |
| Position | It is used to set the position of the element in a document. | position: static | relative | absolute | fixed | sticky |
| Position Properties | It is used to define the final location of the positioned elements in a document. | top | right | bottom | left |
| Float Element | It is used to define the position of an element in a document and inline elements to wrap around. | float: left | right | none |
| Clear Floating Elements | It is used to specify whether an element is supposed to be moved below the floating element that precedes it. | clear: none | left | right | both |
| Z Index | It is used to set overlapping elements with a larger z-index to cover those with a smaller one. | z-index: 3 | auto | inherit |
6. CSS Background
Background commands are used to design the background and background effects for elements. Here are various CSS Background commands:
| Command | Description | Syntax |
| Background Image | It is used to set a background image in a div. | background-image: url() |
| Background Repeat | It is used to set whether a background image should be repeated or not. | background-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat |
| Background Attachment | It is used to set how the background will move in relation to the view port. | background-attachment: scroll | fixed | local | initial | inherit |
| Background Color | It is used to set the background of a div or container. | background-color: #specify color |
| Background Position | It is used to set the position of the background. | background-position: top | right | bottom | left | center |
| Background Opacity | It is used to specify the opacity or transparency of a background. We can insert a value between 0.0 to 0.1. A low value will mean higher opacity. | div {background-color: color name; and opacity: value}; |
7. CSS Box Model
A Box Model is a box that wraps around an HTML element. Here are various CSS Box Model commands:
| Command | Description | Syntax |
| Box Sizing | It sets the width and height of the box. | box-sizing: border-box | content-box |
| Margin | It sets the margin from all sides of the box. | margin: 3px 6px 4px 7px | 0 auto | inherit |
| Padding | It sets the padding, i.e. space around the element inside the defined borders of the box. | padding: 3px 4px 4px 9px | 100% | inherit | |
| Border Color | It is used to set the color of the box’s border. | border-color: #specify color |
| Border Style | It is used to set the style of the border. | border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
| Border Width | It is used to set the width of the border. Up to four values can be added, that is, the width for the top, right, bottom, and left border can be specified. | border-width: thin 10px medium 20px; |
8. CSS Styling Lists
Here are some commands that are used to style the list elements on a webpage:
| Command | Description | Syntax |
| List Type | It is used to select the type of the list. | list-style-type: disc | circle | square | none |
| List Position | It is used to set the position of the list. | list-style-position: inside | outside |
| List Image | It is used to set the background image of the list. | list-style-image: url() |
9. CSS Flexbox
A Flexbox or Flexible Box is used to make elements behave predictably when used with different screen sizes and different display devices. Here are various commands to style a CSS Flexbox.
| Command | Description | Syntax |
| Flex Direction | It determines how flex items are placed in the flex container. | flex-direction: row | row-reverse | column | column-reverse |
| Flex Wrap | It sets the flex items either to be in one line or wraps them into multiple lines. | flex-wrap: nowrap | wrap | wrap-reverse |
| Justify Content | It aligns the flexible items when they have not used all the available space on the main axis horizontally. | justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly |
| Align Items | It specifies the default alignment for items inside a flex or grid container. | align-items: flex-start | flex-end | center | baseline | stretch |
| Align Content | It determines the space between and around the content. | align-content: flex-start | flex-end | center | space-between | space-around | stretch |
| Order | It sets the order to lay out an item in a flex or grid container. | order: 0 |
| Flex Grow | It specifies how much the item will grow relative to the rest of the flexible items inside the same container. | flex-grow: 0 |
| Flex Shrink | It is used to reduce the size of a flexible item. | flex-shrink: 0 |
| Flex Basis | It is used to set the initial length of a flexible box. If “auto” is used as the value, the size will be decided according to the content. | flex-basis: 3px | auto |
| Align Self | It is used to align the items inside the grid area. | align-self: auto | flex-start | flex-end | center | baseline | stretch |
10. CSS Grid
CSS Grid helps in making a grid-based layout system with rows and columns. It enables the user to align elements into rows and columns. Here are various CSS Grid commands.
| Command | Description | Syntax |
| Grid Template Columns | It defines the number of columns along with their width in a grid layout. | grid-template-columns: none | auto | max-content | min-content | length | initial | inherit; |
| Grid Template Rows | It defines the number of rows along with their height in a grid layout. | grid-template-rows: none | auto | max-content | min-content | length | initial | inherit; |
| Grid Template Areas | It specifies areas within the grid layout. | grid-template-areas: none | itemnames; |
| Grid Template | It is a property to define grid rows, columns, and areas. | grid-template: none | grid-template-rows / grid-template-columns | grid-template-areas | initial | inherit; |
| Grid Column Gap | It sets the size of the gap between columns in a grid. | grid-column-gap: length; |
| Grid Row Gap | It sets the size of the gap between rows in a grid. | grid-row-gap: length; |
| Justify Items | It defines the default justify-self for all items of the box. | justify-items: start | end | center | stretch |
| Align Items | It sets the align-self value on all direct child elements as a group. | align-items: start | end | center | stretch |
| Justify Content | It specifies how space will be distributed by the browser between and around the content. | justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly |
| Align Content | It is used in a grid container to align grid items in the block direction. | align-content: stretch | center | flex-start | flex-end | space-between | space-around | space-evenly | initial | inherit; |
| Grid Auto Columns | It defines the size of an implicitly-created grid column track or pattern of tracks. | grid-auto-columns: 100px | max-content | min-content |
| Grid Auto Rows | It defines the size of an implicitly-created grid row track or pattern of tracks. | grid-auto-rows: 100px | max-content | min-content |
| Grid Auto Flow | It controls how auto-placed items are inserted in a grid. | grid-auto-flow: row | column | row dense | column dense |
| Grid Column Start | It specifies the start position of a grid item within the grid column. | grid-column-start: 2 | areaname | span 2 | span areaname | auto |
| Grid Column End | It specifies how many columns an item will span or on which column-line the item will end. | grid-column-end: 2 | areaname | span 2 | span areaname | auto |
| Grid Row Start | It specifies the start position of a grid item within the grid row. | grid-row-start: 2 | areaname | span 2 | span areaname | auto |
| Grid Row End | It specifies how many rows an item will span or on which row-line the item will end. | grid-row-end: 2 | areaname | span 2 | span areaname | auto |
| Grid Column | It specifies the size and location of a grid item within the grid column. | grid-column: 3 / span 2 |
| Grid Row | It specifies the size and location of a grid item within the grid row. | grid-row: 3 / span 2 |
| Justify Self | It defines the way a box is justified inside its alignment container along the appropriate axis. | justify-self: start | end | center | stretch |
| Align Self | It overrides a grid or flex item’s align-items value. | align-self: start | end | center | stretch |
You inspect the CSS grid layout for the applied properties through Chrome DevTools.
11. CSS Content (Dynamic)
Here are some CSS content selectors and properties:
| Command | Description | Syntax |
| CSS Variable | It is used in other declarations using the var() function. | –variable-name: value |
| Variable Usage | It is used in other declarations using the var() function. | var(–variable-name) |
| Counter Reset | It creates a new counter or reversed counter with the given name on the specified element. | counter-reset: name-of-counter |
| Counter Increment | It is used to increase or decrease the value of a CSS counter. | counter-increment: name-of-counter |
| Counter Dynamic Value | Content property inserts the generated content. Counter adds the value of a counter to an element. | content: counter(name-of-counter) |
| Attribute Dynamic Value | It is used to adjust the appearance of content based on its location in a document. | content: attr(name-of-attribute) |
Also, learn from our comprehensive web development course to get a better knowledge of HTML and CSS.
Conclusion
CSS is important when it comes to styling HTML documents cleanly and efficiently. The commands and properties mentioned in this cheat sheet are, thus, essential for web developers and those interested in web design. You can always keep a CSS cheat sheet PDF handy for a quick look for interview or exam preparation.
