02-05-2021

Css Style Cheat Sheet



CSS stands for Cascading Style Sheets.

  1. Css Style Sheet Cheat Sheet
  2. Css Cheat Sheet Table
  3. Css List Style Cheat Sheet

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

Colors, Boxes

Cascading Style Sheets (CSS) works with HTML to simplify web page design. If you understand how to use CSS rules, you can specify a style once that can be applied to every page (or to every particular element) of your website. A list of tips and tricks can help all web designers build sites that. HTML Cheat Sheet PDF. Save the.pdf version of this interactive page to keep it on your desktop or print it and hang it on the wall and always sneak a peek while coding, composing an article or designing a website. A PDF file is available for every cheat sheet on this website: CSS, JavaScript and others.


What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to 'blue', all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!

Using CSS

CSS can be added to HTML documents in 3 ways:

  • Inline - by using the style attribute inside HTML elements
  • Internal - by using a <style> element in the <head> section
  • External - by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

Example

<h1>A Blue Heading</h1>
<p>A red paragraph.</p>
Try it Yourself »

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a 'powderblue' background color:

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

Example

<!DOCTYPE html>
<html>
<head>
<link href='styles.css'>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »

The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is what the 'styles.css' file looks like:

'styles.css':

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example

Use of CSS color, font-family and font-size properties:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »

CSS Border

The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example

Use of CSS border property:

Try it Yourself »Css and html cheat sheet

CSS Padding

The CSS padding property defines a padding (space) between the text and the border.

Example

Use of CSS border and padding properties:

p {
border: 2px solid powderblue;
padding: 30px;
}
Try it Yourself »

CSS Margin

The CSS margin property defines a margin (space) outside the border.

Example

Use of CSS border and margin properties:

p {
border: 2px solid powderblue;
margin: 50px;
}
Try it Yourself »

Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to the current web page.

Example

This example uses a full URL to link to a style sheet:

<link href='https://www.w3schools.com/html/styles.css'>

Example

This example links to a style sheet located in the html folder on the current web site:

Example

This example links to a style sheet located in the same folder as the current page:

You can read more about file paths in the chapter HTML File Paths.

Chapter Summary

  • Use the HTML style attribute for inline styling
  • Use the HTML <style> element to define internal CSS
  • Use the HTML <link> element to refer to an external CSS file
  • Use the HTML <head> element to store <style> and <link> elements
  • Use the CSS color property for text colors
  • Use the CSS font-family property for text fonts
  • Use the CSS font-size property for text sizes
  • Use the CSS border property for borders
  • Use the CSS padding property for space inside the border
  • Use the CSS margin property for space outside the border

Tip: You can learn much more about CSS in our CSS Tutorial.

HTML Exercises

HTML Style Tags

TagDescription
<style>Defines style information for an HTML document
<link>Defines a link between a document and an external resource
Css Style Cheat Sheet

For a complete list of all available HTML tags, visit our HTML Tag Reference.



What is CSS?

CSS is a foundational element of the Internet. CSS stands for Cascading Style Sheets. It was created in 1994 by Håkon Wium Lie during the early days of the modern World Wide Web. The “style” term in the acronym gives the one-word explanation of what CSS is. The coding language specifies the style and design elements of a website.

CSS is distinct from HTML (Hyper Text Markup Language), which specifies the content. Separating the style from the content allows website developers to better manage websites. HTML elements could be styled in-line in the early days of the Internet. Many browsers still support some HTML attributes for style, which mimic CSS.

For example, to make an item bold in CSS, the code used is font-weight: bold;. the code used in HTML is strong. The best practice for coding is to use CSS for styling and not use any in-line HTML styles.

One advantage of using CSS is that the design style can be separated from the in-line, on-page code. This means that developers can edit the text in one location and the changes will be reflected across the website.

This benefit is realized if the developers specifies the names of CSS Classes and IDs in the code on the page. In conjunction the developer writes the CSS code to style elements in an external CSS file. Which will be placed in the head of your document.

With CSS code, all sorts of element design parameters can be specified. The color, size, spacing alignment, and other characteristics of blocks of text, images, and many other elements can be controlled. Modern CSS continues to evolve to give developers more and more control and creativity with design. The latest set of guidelines being developed is CSS3.

CSS Selectors

CSS Selectors are the foundation of using CSS. You use selectors to target specific elements that you want to style. Below is how the syntax works.

Descendant

Selects all li within an unordered list ul

  • ul li

Adjacent

Selects all p elements that are placed immediately after ul elements

  • ul + p

Direct children

Selects all a elements where the parent is a p element

  • p > a

Sibling combinator

Selects every a element that are preceded by a p element

  • p ~ a

Attributes

Selects all elements with a target attribute

  • a[target]

Backgrounds

Property

Values

background

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

background (shorthand)

background: bg-color bg-image [position/bg-size] [bg-repeat] [bg-origin] [bg-clip] [bg-attachment] [initial|inherit];

Example

Property

Values

background-position

  • top left
  • top center
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
  • x-%
  • y-%
  • x-pos
  • y-pos

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Borders

Property

Values

border (shorthand)

border: width style color;

Example

Property

Values

border-style

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • dashed
  • ridge
  • inset
  • outset

Property

Values

border-bottom

  • border-bottom-width
  • border-style
  • border-color

border-left

  • border-left-width
  • border-style
  • border-color

Property

Values

Property

Values

Property

Values

Property

Values

Property

Css

Values

Property

Values

Property

Values

Property

Values

Property

Values

border-top

  • border-top-width
  • border-style
  • border-color

Property

Values

Property

Values

Property

Values

Property

Values

border-right

  • border-top-width
  • border-style
  • border-color

border-radius

  • border-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • border-top-left-radius

Property

Values

Property

Values

Box Model

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

margin

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

margin (shorthand)

margin: top right bottom left;

Example

Property

Values

Property

Values

Property

Values

Property

Values

padding

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

padding (shorthand)

padding: top right bottom left;

Example

Property

Values

Property

Values

Property

Values

Property

Values

display

  • inline
  • inline-block
  • block
  • flex
  • inline-flex
  • grid
  • inline-grid
  • table
  • none
  • initial
  • inherit

Property

Values

Property

Values

Property

Values

Property

Values

Text

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

text-decoration

  • none
  • underline
  • overline
  • line-thorugh
  • blink

Property

Values

word-break

  • normal
  • keep-all
  • loose
  • break-strict
  • break-all

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Font

Property

Values

font

  • font-style
  • font-weight
  • font-size/line-height
  • font-family

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

font-weight

  • lighter
  • normal
  • bold
  • bolder
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • inherit

Lists

list-style

  • list-style-type
  • list-style-position
  • list-style-image

Css Style Sheet Cheat Sheet

These are just a few. To see all list style types visit w3schools.

Property

Css Cheat Sheet Table

Values

Colors

Property

Values

Tables

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Css List Style Cheat Sheet

Animations

Property

Values

animation

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

Property

Values

Property

Values

Property

Values

animation-timing-function

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-Bezier

Property

Values

Transitions

Property

Values

transition

  • transition-property
  • transition-duration
  • transition-duration
  • transition-timing-function
  • transition-delay

Property

Values

Property

Values

Property

Values

transition-timing-function

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubicBezier

Recieve resources directly to your inbox

Sign up to get weekly insights & inspiration in your inbox.

Please enable JavaScript to view the comments powered by Disqus.