CSS Stylesheet or Cheatsheet
Cascading style sheets describe the web page in a markup language like HTML, XML, etc. CSS properties describe the item or function displayed on the screen or in different media. CSS improves the webpage's appearance and feel of interactive functions.
CSS's most popular style properties are gradient, background, button, radius, box, font family, order, and text-shadow generators. The CSS Cheat Sheet provides additional tools to enhance the visual impact of your work. You can find all these and other helpful web design tools on one website.
CSS Fundamentals
The Cascading Style Sheets or CSS are used to style web pages that contain HTML components. In this section, we will look at the three distinct methods we can use to add CSS to our HTML page over steps one by one.
1. Internal CSS:
- The following syntax is used to apply the internal CSS style sheet in the head section.
- The internal CSS is used to apply design using the style tag in the HTML page.
<head>
<style>
Element{
Property: value;
Property: value;
….
}
</style>
</head>
2. Inline CSS:
- The inline CSS is used to apply design using a style tag in the HTML tag or element.
- The following syntax is used to apply the inline CSS style sheet in the HTML tag.
<tag style = "property: value; property:value;">
3. External CSS:
- The external CSS file is created using the CSS file name with the.css extension.
File_name: style_demo.css
- It contains the single or multiple properties in the file.
Selector{
Property: value;
Property: value;
….
}
- The external CSS files are included in the head section of the HTML page.
<link rel="stylesheet" type="text/css" href="/style_demo.css" />
4. Clearfix:
- : It clears floats to operate and control margins and padding.
.clearfix_element::after {
content: "";
clear: both;
display: block;
}
5. Selector: Select the HTML elements to style with the element name, id, etc. These are basic selectors as follows:
| Basic Selectors | Description | Syntax |
| Universal | It selects all available elements on the pages. | *{ property: value; } |
| Element Type | It selects the required HTML tag or element used in the document. | p{ property: value; } |
| Id | It selects a unique ID name of the element. | #id{ property: value; } |
| Class | It selects a unique and required class name of the element. | .class_name{ property: value; } |
| Attribute | It Selects all available elements with a specified attribute. | a[attribute=value] { property: value; } |
| Combinatory | It is used for Complex selectors. It consists of more than one selector with the relationship between the selector. | selector_1 selector2/ selector_1+selector2 / selector_1> selector 2 {property: value;} |
| pseudo | It is used to define the special state of an element. The element adds an effect to an available element and its states. | selector: pseudo-class{ property: value; } |
Example
The following example shows the various CSS selectors with the style property. We can see all types of selectors and internal and inline CSS style tags.
<!DOCTYPE html>
<html>
<head>
<title> CSS Selectors </title>
<!-- CSS Selectors are in use -->
<style>
/* CSS universal selector */
* {
background-color: lightblue;
text-align: center;
}
/* CSS type selector */
span {
background-colour: navy;
color: white;
}
/* CSS id selector */
#id1 {
color: yellow;
text-align: center;
font-size: 18px;
font-weight: bold;
}
/* CSS class selector */
.class2 {
color: orange;
text-align: center;
font-size: 25px;
font-style: italic;
}
/* CSS attribute selector */
div[style] {
text-align: center;
color: purple;
font-size: 20px;
font-weight: bold;
margin-bottom: -20px;
}
/* CSS combinator selector */
div>p {
color: #009900;
font-size: 32px;
font-weight: bold;
margin: 0px;
text-align: center;
}
/* CSS class selector */
.boxes {
background-color: brown;
width: 200px;
height: 120px;
margin: auto;
font-size: 20px;
text-align: center;
}
/* CSS pseudo selector */
.boxes:hover {
background-color: orange;
}
</style>
</head>
<body>
<p>
Universal Selector here (*) gives a lightblue background
</p>
<br>
<span>This span tag is used to style a type selector.
<br><br>
<div id = "id1">
This div is used to style functions using the ID selector
</div>
<br>
<div class = "class2 ">
This div is used to style functions using a class selector
</div>
<br>
<div style = "color: red;">
This div is used to style functions using the attribute selector
</div>
<br>
<div style = "text-align: center;">
This div is used to style functions using combinators
<p> child selector </p>
</div>
<br>
<p> pseudo selector: </p>
<div class = "boxes">
This div is used to style function using a pseudo-selector
The colour changes if you hover over the box!
</div>
</span>
</body>
</html>
Output
The output shows the selector and its design.
Font Properties
CSS font properties are worked to set the style and design of the font's content in the HTML element according to requirements.
| Property | Description | Syntax |
| Font-family | We can give the Specific font family for the context. | Font-family: generic-family |initial | family-name |inherit; |
| Font-style | We can style the text in a normal, italic, or oblique style for its font family. | Font-style: normal |initial |inherit |italic |oblique; |
| Font-variant | It is used to Convert all lowercase letters into uppercase letters. | Font-variant: normal| small caps | initial; |
| Font-weight | It is used to Specify the thickness of the font | font-weight: normal| bold |initial |inherit |unset |number; |
| Font-size | It Specifies the size of the text in an HTML document. | Font-size: small |medium |large |initial |inherit; |
Example
The following example shows the various CSS font properties with style differences.
<!DOCTYPE html>
<html>
<head>
<title> CSS Font properties </title>
<style>
.demostyle1 {
font-family: "Times New Roman", "sans-serif";
font-weight: bold;
font-size: 30px;
color: #090;
text-align: center;
font-style: normal;
font-variant: normal;
}
.demostyle2 {
font-family: "sans-serif";
font-weight: 5px;
font-size: 15px;
color: blueviolet;
text-align: left;
font-style: italic;
font-variant: normal;
}
.demostyle3 {
font-family: "arial";
font-weight: 10px;
font-size: 20px;
color: black;
text-align: right;
font-style: oblique;
font-variant: small-caps;
}
div{
width : 300px;
border: 1px solid black;
background-color: aqua;
}
</style>
</head>
<body>
<div>
<h3> CSS Font properties </h3>
<p> Regular text is used to align centre-sized 10 px </p>
<div class = "demostyle1"> Javatpoint Learning portal </div>
<p> Italic text and aligned left is used with 15px font size </p>
<div class = "demostyle2"> Javatpoint Learning portal </div>
<p> Oblique text and aligned right is used with 20px font size using in small caps </p>
<div class = "demostyle3"> Javatpoint Learning portal </div>
</div>
</body>
</html>
Output
The output shows the font property on the text.
Text-properties
The CSS text formatting properties are used to format and style text. It is used for setting their colour, alignment, spacing, and others according to requirements.
| Property | Description | Syntax |
| text-color | It is used to set the colour of the text. | color: color_value; |
| text-alignment | It works to get the horizontal alignment of the text. | Text-align: left|right|center| justify|initial|inherit; |
| text-decoration | This property is worked to Add or remove text- decorations. | Text-decoration: decoration-type; |
| text-transform | Changes the text case such as uppercase. | Text-transform: none|capitalize|uppercase| lowercase|initial|inherit; |
| text-indent | Indents the first line of text function. | Text-indent: length|initial|inherit; |
| letter-spacing | Gives spacing between the letters of the text. | Letter-spacing: normal|length| initial|inherit; |
| line-height | Provides the space between the text lines. | Line-height: normal|number|length| percentage|initial|inherit; |
| text-shadow | Provides shadow to the text. | Text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit |
| word-spacing | Provides space between words and lines. | Word-spacing: normal|length| initial|inherit; |
Example
The following example shows text properties for different types of text design.
<!DOCTYPE html>
<html>
<head>
<title> CSS Text formatting properties </title>
</head>
<body>
<h3> CSS Text formatting properties </h3>
<div style = "background-color:aqua; width:300px;">
<div style = " color: red">
CSS Color property
</div>
<br>
<div style = " text-align: center">
CSS Text align property
</div>
<br>
<div style = " text-decoration: underline">
CSS Text decoration property
</div>
<br>
<div style = "text-transform: lowercase">
CSS Text transform property
</div>
<br>
<div style = "text-indent: 70px">
CSS Text indent property
</div>
<br>
<div style = " letter-spacing: 3px">
CSS Text line spacing property
</div>
<br>
<div style = "line-height: 35px">
CSS Text line-height property
</div>
<br>
<div style = "text-shadow: 4px 2px blue;">
CSS Text shadow property
</div>
<br>
<div style = "word-spacing: 10px;">
CSS Text word spacing property
</div>
</div>
</body>
</html>
Output
The output shows the text property on the information.
Background Properties
The CSS background properties are worked to design the background of the function, text, and other elements. It defines the background effects for elements.
| Property | Description | Syntax |
| Background-color | specifies an element's background colour. | background-color: color_name; |
| Background-image | It gives an element one or more backdrop pictures. | Background-image: url(‘url’); |
| Background-repeat | Both vertically and horizontally, add or delete background image repetition. | Background-repeat: repeat|repeat-x|repeat-y| no-repeat|initial|inherit; |
| Background-position | It describes the specific way in which the image is positioned. | Background-position: value; |
| Background-origin | It is utilised for modifying the webpage's background picture. | Background-origin: padding-box |border-box |content-box | initial| inherit; |
| Background-attachment | Describe the background image's type of attachment within its container </td> | background-attachment: scroll|fixed|local|initial|inherit; |
| Background-clip | It indicates the desired background length (colour or picture). | Background-clip: border-box|padding-box|content-box|initial|inherit; |
Example
The following example shows the CSS background property and its output.
<!DOCTYPE html>
<html>
<head>
<title> CSS Background Properties </title>
<style>
body{
background:aqua;
}
.a {
background-image:
url(
"https://static.javatpoint.com/images/logo/jtp_logo.png");
}
.b {
background-image:
url(
"https://static.javatpoint.com/images/logo/jtp_logo.png");
background-repeat: no-repeat;
}
.c {
background-image:
url(
"https://static.javatpoint.com/images/logo/jtp_logo.png");
background-repeat: no-repeat;
background-position: center;
}
.d {
background-image:
url(
'https://static.javatpoint.com/images/logo/jtp_logo.png');
background-repeat: no-repeat;
background-origin: initial;
}
.e {
background-image:
url(
"https://static.javatpoint.com/images/logo/jtp_logo.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div style = "background-color: red"> CSS Background color property </div>
</br>
<div class = "a" style = "height: 100px; width: 100%">
<h3> CSS Background Image property </h3>
</div>
<br> <br>
<h3> CSS Background repeat property: no-repeat </h3>
<div class = "b" style = "height: 50px; width: 100%">
</div>
<br> <br>
<div class = "c" style = "height: 50px; width: 100%">
<h3> Background position property </h3>
</div>
<br> <br>
<div class = "d" style = "height: 100px; width: 100%">
<h3> CSS Background origin property
It is used to set the origin of the image in the background.
</h3>
</div>
<br> <br>
<div class = "e" style = "height: 400px;
width: 100%;
text-align:center;">
<h3> CSS Background-attachment property </h3>
<p> The background-attachment property is used to get the attachment of the background image using CSS. It is used to set the scroll or remain fixed.
</p>
</div>
<br>
</body>
</html>
Output
The output shows the background property on the function.
Box Properties
The CSS box property is a box that contains the data that wraps around every HTML element. It comprises the border, padding, margin, height, width and content. The following CSS properties are used to apply style to the box model.
| Property | Description | Syntax |
| Margin | Apply to set the margin | margin: value; |
| Padding | Apply the space between the box border and its content using the selector. | padding: value; |
| Border | Apply the element’s border with the width, and set the style and colour for the border. | border: value; |
| Width | Apply the width to the box or function | width: value; |
| Height | Apply the height to the box or function | height: value; |
Example
The following example shows box properties for different margins, padding, and function sizes.
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main {
font-size: 18px;
font-weight: bold;
Text-align: left;
margin-bottom: 20px;
}
.jtp {
margin-left: 50px;
border: 30px solid orange;
width: 280px;
height: 200px;
text-align: center;
padding: 30px;
}
.jtp1 {
font-size: 42px;
font-weight: bold;
color: yellow;
margin-top: 30px;
background-color: #c0c0c0;
}
.jtp2 {
font-size: 18px;
font-weight: bold;
background-color: #c5c5db;
}
</style>
</head>
<body>
<div class = "main"> CSS Box-Model Property </div>
<div class = "jtp">
<div class = "jtp1"> JavaTpoint Learning Portal </div>
<div class = "jtp2">
A computer science website for a programmer
</div>
</div>
</body>
</html>
Output
The output shows the text property on the information.
Shadow properties
These shadow properties are used to add a shadow on the required text border or frames of elements.
| Property | Description | Syntax |
| Text shadow | Add text shadow using the selector. | Text-shadow: h-shadow v-shadow blur-radius color_name| none |initial | inherit; |
| Box Shadow | Add a frame or box shadow using the selector. | Box-shadow: h-offset v-offset blur spread color_name |none |inset |initial | inherit; |
Example
The following example shows shadow properties for the attractive and animate function. The box-shadow property comes in different colours.
<!DOCTYPE html>
<html>
<head>
<title> CSS box-shadow Property </title>
<style>
.jtp1 {
border: 1px solid;
padding: 8px;
/* box-shadow: h-offset v-offset blur color*/
box-shadow: 5px 8px 8px grey;
}
/* text-shadow: h-shadow v-shadow
blur-radius color */
h2 {
text-shadow: 5px 5px 8px orange;
}
.jtp2 {
border: 1px solid;
padding: 5px;
/* box-shadow: h-offset v-offset blur*/
box-shadow: 3px 3px 5px;
background-color: aqua;
}
</style>
</head>
<body>
<h1> CSS box-shadow Property </h1>
<div class = "jtp1">
<h3> Welcome to the javatpoint website! </h3>
</div>
<h2> Education portal for developer </h2>
<div class = "jtp2">
<h3> javatpoint website! </h3>
</div>
</body>
</html>
Output
The output shows the shadow property on the information.
Gradient Property
The CSS gradient property transitions between shape or size with the two or more required colours.
| Gradient | Description | Syntax |
| Linear Gradient | It is used to create smooth colour transitions. | Background-image: linear-gradient(direction, color-1, color-2, …); |
| Radial Gradient | It is used to get an elliptical shape gradient. | Background-image: radial-gradient(position's shape size, start-color, …, last-color); |
Example
The following example shows the various CSS gradient properties with the style difference. The linear gradient and radial gradient are used to display the background with many colours.
<!DOCTYPE html>
<html>
<head>
<title> CSS Gradients</title>
<style>
#main1 {
height: 200px;
width: 500px;
background-color: white;
background-image: linear-gradient(orange, yellow, white, orange, red);
}
#main2 {
height: 200px;
width: 500px;
background-color: white;
background-image: radial-gradient(orange, yellow, white, orange, red);
}
.jtp {
text-align: center;
font-size: 30px;
font-weight: bold;
padding-top: 40px;
}
.jtps {
font-size: 27px;
text-align: center;
}
</style>
</head>
<body>
<!-- Linear gradient property -->
<div id = "main1">
<div class = "jtp"> javatpoint </div>
<div class = "jtps">
CSS Radial Gradient
</div>
</div>
<br><br>
<!-- Radial Gradient property -->
<div id = "main2">
<div class = "jtp"> javatpoint </div>
<div class = "jtps">
CSS Radial Gradient
</div>
</div>
</body>
</html>
Output
The output shows the gradient properties box.
Border Properties
The CSS border properties specify the style and size of the box's border. The following properties set the border.
| Property | Description | Syntax |
| Border Color | Apply the colour of the border on the function. When the border-style property is used, then this property works bydefault. | Border-color: color-value; |
| Border Style | Apply the border style like solid, double, dotted, rigged, etc. | Border-style: value; |
| Border Width | Apply the border width of the element. | Border-width: length |thick |thin |medium |initial |inherit |
Example
The following example shows border properties for an attractive and animated function. The border uses the width, style, and color per the user's requirement.
<!DOCTYPE html>
<html>
<head>
<title> CSS border Property </title>
<style>
.jtp1 {
/* border: width style color */
border: 4px solid blue;
padding: 8px;
}
/* text-shadow: h-shadow v-shadow
blur-radius color */
h2 {
border: 3px dotted navy;
}
.jtp2 {
border-style: double;
border-color: red;
}
</style>
</head>
<body>
<h1> CSS border Property </h1>
<div class = "jtp1">
<h3> Welcome to the javatpoint website! </h3>
</div>
<h2> Education portal for developer </h2>
<div class = "jtp2">
<h3> javatpoint website! </h3>
</div>
</body>
</html>
Output
The output shows the border property on the information.
Classification Properties
The following CSS classification properties are used to display proper elements and boxes.
| Property | Description | Syntax |
| Display | It is used to show elements on the web page. | Display: inline| grid|table|group|none|block|flex| inherit; |
| Float | Specifies flow of data | float: initial| inherit |none|left|right; |
| Position | Defines the positioning of html elements on the web page. | Position: fixed|relative |sticky|static|absolute; |
| Clear | Defines the sides of a box where floating elements are not allowed. | Clear: left|right|both|none; |
| Visibility | Apply an element is visible or not. | Visibility: visible|hidden|initial|inherit|collapse; |
| Cursor | Apply the type and shape of the cursor | cursor: auto|default|pointer|crosshair|help | e-resize | all-scroll |progress |initial |inherit; |
Example
The following example shows the classification property for the display of the box.
<!DOCTYPE html>
<html>
<head>
<title> CSS Classification properties </title>
<style>
#jtp1 {
height: 30px;
width: 100px;
background: teal;
display: block;
}
#jtp2 {
height: 30px;
width: 100px;
background: cyan;
display: block;
}
#jtp3 {
height: 30px;
width: 100px;
background: green;
display: block;
}
.pos {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
.clr {
width: 50px;
height: 50px;
background-color: red;
color: white;
font-weight: bold;
font-style: itallic;
font-size: 18px;
text-align: center;
float: left;
padding: 15px;
}
p.GFG {
clear: left;
}
h1,
h2 {
color: red;
text-align: center;
}
.wait {
cursor: wait;
}
</style>
</head>
<body>
<p> CSS display Property: block </p>
<div>
<div id = "jtp1"> BOX 1 </div>
<div id = "jtp2"> BOX 2 </div>
<div id = "jtp3"> BOX 3 </div>
</div>
<br>
<p> CSS Float Property:left </p>
<div style = "font-size:20px; color:#006400; float:right;">
css Content floats right
</div>
<br>
<p> CSS Position Property:relative </p>
<div class = "pos">
The div element has a position: relative;
</div> <br>
<p> CSS Clear property: left </p>
<div class = "clr">
<pre> JTP </pre>
</div>
<p>
Javatpoint portal:
A computer science website for developers and coders
</p>
<p class = "GFG"> Javatpoint portal </p>
<br>
<p> CSS Visibility property: visible/ hidden </p>
<div style = "visibility: visible;"> CSS Content shows visible </div>
<div style = "visibility: hidden"> CSS Content shows hidden </div>
<br>
<p> CSS Cursor property: wait </p>
<p class = "wait">
Mouse over the sentence to display running the mouse cursor.
</p>
</body>
</html>
Output
The output shows the classification property of the information.
CSS Functions
The CSS has a range of inbuilt functions to operate content using various CSS properties. Some of the CSS functions can be nested or simple. It ranges from simple properties to mathematical properties like shape, color, transform, gradient, and animations functions. Some of the properties are shown below:
| Function | Description | Syntax |
| attr() | Display the value of the selected elements' attribute | attr( attribute_name ); |
| calc() | Use a single mathematical expression to calculate the input parameter and perform operations | calc( input_Expression ); |
| max() | Get the largest number of the given input set of numbers. | max(value_1, value_2, value_3,…) |
| url() | Use a string URL as a parameter. It is used to load fonts, images, and data. | url( <string> <url-modifier>* ) |
| var() | Inserts the value of a custom property. Its name must start with two dashes. | var( custom_property, value ) |
Example
The following example shows the attribute and function properly with the set box.
<!DOCTYPE html>
<html>
<head>
<title> CSS functions property </title>
<style>
a:before {
content: attr(href) " =>";
}
a {
text-decoration: none;
}
body {
text-align: center;
}
.jtps {
position: absolute;
left: 50px;
width: calc(100% - 30%);
height: calc(100px - 30px);
background-color: orange;
text-align: center;
}
.url {
background-image: url(
"https://static.javatpoint.com/images/logo/jtp_logo.png");
text-align: center;
}
.jtp1 {
background-color: var(--main-bg-color);
padding: 5px;
}
:root {
--main-bg-color: yellow;
}
</style>
</head>
<body>
<h3> CSS functions property </h3>
<p> CSS attribute function </p>
<a href = "https://www.javatpoint.com"> javatpoint </a>
<br>
<p> CSS Calc function </p>
<div class = "jtps">
<h3> CSS calc() Function </h3>
</div>
<br> <br> <br>
<p> CSS URL function </p>
<div class = "url" style = "height: 100px; width: 100%">
<h3 style = "color:red;"> CSS url() function </h3>
</div>
<br>
<div class = "jtp1">
<p> CSS var function</p>
Example of var function </div><br>
</body>
</html>
Output
The output shows the function property on the information.
