The CSS language is used to choose or define how you want each element on your web page to look. You can change the opacity or the quality of buttons or text on the web page. Through this CSS Cascading Style Sheets cheat sheet, you will learn about the different snippets in CSS, such as Gradient and Classification Properties. You can use many more tools, all of which we’ll cover. Keep reading to find out more.
What is CSS?
CSS, or Cascading Style Sheet, is one of the cornerstones of the World Wide Web. The other cornerstones are HTML and JavaScript. This language was developed to help separate content/text from the presentation. Using CSS, you can allow specific webpages to be cached to make them load faster. Using CSS is easy enough if you’re doing simple tasks, but you need resources to perform more complex tasks. This is where this CSS cheat sheet comes into play. This article will teach you the tasks you can perform with CSS. Keep reading to learn more.
CSS Cheat Sheet
The following material is everything you need to know about CSS. Keep note of the syntax under each heading.
Selectors
Use CSS selectors to find or select any HTML element you want to style. The list of CSS selectors is as follows.
Universal
Description: Will select any element on the website’s pages.
Syntax: *{porpertyvalue}
Type
Description: The type selector will select all elements in your document with an HTML element.
Syntax: p {
CSS declarations
}
Id
Description: The Id will select any element you want according to the value of its unique attribute.
Syntax: #id {cssdeclarations}
Class
Description: Using this selector, you can define a class attribute and select all the elements that have it.
Syntax: .class {
cssdeclarations
}
Attribute
Description: all elements on the page that have a specific attribute will be selected. You can also style element groups that have that attribute value.
Syntax: a[attributevalue]
{
propertyvalue
}
Combinators
Description: Think of this as complex selectors (more than one) that have something in common with each other, including general sibling selector and descendant selector.
Syntax: selector1, selector2/
selector1-selector2
{propertyvalue}
Pseudo
Description: use Pseudo to define an element’s state and add effects to existing elements according to their states.
Syntax: selector: pseudoclass {
propertyvalue
}
Font Properties
The font properties in CSS can be used to add style to your web page’s font. It’ll set your business above most of your competition.
Font family
Description: Using the font family property, you can specify the family you want to use for an element’s text content. As a fallback system, you can use different font names.
Syntax: fontfamily: familyname|genericfamily|initial|inherit
Font style
Description: The font style property helps you change and style your text content differently.
Syntax: fontstyle: normal|oblique|initial|inherit
Font variant
Description: The font-variant property helps you change the lowercase letters into uppercase. However, the uppercase is smaller than the original uppercase letters.
Syntax: fontvariant: normal|small caps|initial
Font weight
Description: The font-weight property helps you change the thickness or weight of your font on the page. Or even change the colour elements.
Syntax: fontweight: normal|bold|number|inherit|unset
Font size
Description: The font size property helps specify the text’s font size.
Syntax: fontsize: small|medium|initial|inherit
Text Properties
Using these properties, you can format or style your text to make it look how you want it to. Change the color, spacing, and much more.
Text Color
Description: This property is used to change the color of the text on a given page. To set or change the color, you must put in its hex value and NOT its name (red, green, etc.).
Syntax: color: value
Text alignment
Description: This property allows you to change the alignment of the text to the left, right, or centre.
Syntax: textalign: left|right|center|initial
Text decoration
Description: Text decoration allows you to add text decorations to your text. Decorations include underline, strikethrough, overline, etc.
Syntax: textdecoration: decorationtype
Text transformation
Description: This property allows you to change the text’s case (uppercase or lowercase).
Syntax: none|uppercase|lowercase|initial
Text indentation
Description: The text indentation property allows you to set an indent value for the first line of paragraphs. This indentation can be entered in any metric and should be a positive number.
Syntax: textindent: length|initial|inherit
Letter spacing
Description: This property allows you to set the amount of space between the letters in your text. Enter the size in pixels.
Syntax: letterspacing: normal|length|initial
Line height
Description: The line height property allows you to set the amount of space between each line in text blocks.
Syntax: lineheight: normal|number|length|initial|inherit
Text shadow
Description: This property allows you to add shadows to all your pages’ texts. Additionally, you can change the shadow color, size, and vertical and horizontal size.
Syntax: textshadow: hshadow vshadow blurradius color|initial|inherit
Word spacing
Description: This property allows you to specify how much space should be between each word.
Syntax: wordspacing: normal|length|initial|inherit
Background Properties
The background properties in CSS allow users to design their backgrounds and choose different effects for the elements on the page.
Background color
Description: This property allows you to change or define an element’s background color.
Syntax: backgroundcolor: colorname
Background image
Description: This property allows you to add several background images to the page’s elements.
Syntax: backgroundimage: url(‘url’)
Background repeat
Description: This property allows you to choose whether or not the background image is repeated.
Syntax: backgroundrepeat: repeat |repeatx |repeaty |norepeat
Background position
Description: This property allows you to change the images’ positioning on the webpage.
Syntax: backgroundposition: value
Background Origin
Description: This property allows you to adjust a webpage’s background image.
Syntax: backgroundorigin: paddingbox |borderbox |contentbox | initial| inherit
Background attachment
Description: This property allows you to define the type of attachment of your background according to its container.
Syntax: backgroundattachment: scroll |fixed |local |initial
Background clip
Description: This property allows you to define the extension length of an element’s background.
Syntax: backgroundclip: borderbox| paddingbox| contentbox| initial
Box Properties
The box in CSS is a box that is set on and around every element on your webpage. The elements should have a border, margin, content, and padding.
Margin
Description: This property allows you to define the position of the margin in addition to its length and percentage.
Syntax: margin: value
Padding
Description: This property allows you to define the space between the content of the selector and the border.
Syntax: padding: value
Border
Description: This property allows you to define any HTML element’s border width by choosing the border you want to edit.
Syntax: border: value
Width
Description: This property allows you to adjust an element’s width. This adjustment can be made as a percentage, auto, or length.
Syntax: width: value
Height
Description: This property allows you to adjust an element’s height. This adjustment can be made as a percentage and auto.
Syntax: height: value
Shadow Properties
By using shadow properties, you can add shadows to boxes of the HTML elements on a webpage. This is usually done to attract the reader’s attention and improve the visual quality of the webpage.
Text shadow
Description: This property allows you to add a dark to the written content on a webpage.
Syntax: textshadow: hshadow vshadow blurradius color| none |initial
Box Shadow
Description: This property allows you to add shadows to the boxes around the HTML elements on a webpage. You can define the shadow’s spread radius and blur.
Syntax: boxshadow: hoffset voffset blur spread color |none |inset |initial
Gradient
The gradient in CSS is commonly used to make the transition between the colors on the webpage smooth and seamless. The gradient can be upwards or downwards, or in any other direction.
Linear gradient
Description: This property allows you to create smooth transitions between colors in linear directions. Linear directions are up, down, left, right, and diagonal.
Syntax: backgroundimage: lineargradient(direction, color1, color2, …)
Radial gradient
Description: This property allows you to turn the gradient’s “direction” into an elliptical shape. The starting point is always a single point, and the gradient goes outwards in all directions.
Syntax: backgroundimage: radialgradient(shape size/position, startcolor, lastcolor)
Border properties
The border in CSS helps you define, or describe, how a box’s border should look like. Through this property, you can adjust the color and width of your border.
Border color
Description: This property allows you to change the color of the box’s border. Remember that to use this property; you must first define the border style.
Syntax: bordercolor: colorvalue
Border style
Description: This property allows you to change how the border looks. By changing the borders' look or style, you can create your ideal border on the webpage. The values can be set up to four values at a time.
Syntax: borderstyle: value
Border width
Description: This property allows you to adjust the width of the box’s border. The width can be entered as thin, medium, or thick.
Syntax: borderwidth: length |thin |medium |thick |initial
Classification Properties
The classification properties specify the where and how of an element’s placement.
Display
Description: This property allows you to choose how you want the elements to be displayed.
Syntax: display: block |flex |grid |table |group | inherit
Float
Description: This property allows you to choose the direction in your content floats. This property allows texts or images to be displayed inline.
Syntax: float: none| left| right| inherit
Position
Description: This property allows you to choose the positioning method of your elements on the page. You can choose from static, fixed, absolute, and relative.
Syntax: position: fixed| static| absolute |relative
Clear
Description: This property allows you to move your element somewhere without floating elements around automatically.
Syntax: clear: left |right |both
Visibility
Description: This property allows you to adjust the element’s visibility.
Syntax: visibility: visible |hidden|initial |inherit
Cursor
Description: This property allows you to adjust the shape and type of the cursor.
Syntax: cursor: auto |pointer |crosshair | eresize | allscroll |progress |initial
People also read:
I'm fascinated by the IT world and how the 1's and 0's work. While I venture into the world of Technology, I try to share what I know in the simplest way with you. Not a fan of coffee, a travel addict, and a self-accredited 'master chef'.