Introduction to CSS – CSS Properties

CSS stands for Cascading Style Sheets. It is a style sheet language that is used to describe the look and formatting of a document written in a markup language.

It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG, and XUL.

While CSS is great for creating text styles, it is helpful for formatting other aspects of Web page layout as well. For example, CSS can be used to define the cell padding of table cells, the style, thickness, and color of a table’s border, and the padding around images or other objects. CSS gives Web developers more exact control over how Web pages will look than HTML does. This is why most Web pages today incorporate cascading style sheets.

Type of Style Sheet

External Style Sheet

The CSS rules in a separate file known as an External style sheet with the help of element. The element is used in web pages to describe the relationship between two documents. The element is always an empty element and when used with style sheets it must carry three attributes.

Advantages of External CSS Style Sheets

  • It saves you repeating the same style on each page.
  • The appearance of several pages by altering just the style sheet rather than each individual page.
  • The style sheet can act as a style template to help the different authors achieve the same style of the document.

CSS Properties

You style HTML elements via CSS properties. Different HTML elements may have different CSS properties you can set. A CSS property declaration consists of a property name and a property value. The property name comes first, then a colon, and then the value. If you specify more than one CSS property, each name-value pair is separated by a semicolon. There are many CSS properties you can specify for different HTML elements.

List of Properties

align-content

It helps to align a flex container’s lines within it when there is extra space in the cross-axis

align-items

It defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis).

align-self

Specifies the alignment for selected items inside a flexible container

all

Resets all properties

animation

It can be used to animate many other properties

animation-delay

Specifies a delay for the start of an animation

animation-direction

Sets the direction of the animation after the cycle. Its default resets on each cycle

animation-duration

Specifies the length of time it takes for an animation to complete one cycle

animation-fill-mode

Sets which values are applied before/after the animation

animation-iteration-count

Specifies the number of times an animation should be played

animation-name

Declares the name of the @keyframes animation

animation-play-state

Specifies if the animation is paused/playing

animation-timing-function

Specifies the acceleration curve of an animation

backface-visibility

Defines whether or not the back face of an element should be visible

background

A shorthand property that allows you to control the background of any element

background-attachment

Specifies how to move the background relative to the viewport

background-blend-mode

Defines how an element’s background-image should blend with its background-color

background-clip

Defines how far a background image or color extends beyond an element’s padding or content

background-color

Specifies the solid colors as background on an element

background-image

Specifies one or more background images for an element

background-origin

Specifies the origin position of a background image-across the whole element, inside the border, or inside the padding.

background-position

Specifies the position of a background image within its container

background-repeat

Defines if (and how) background image will repeat

background-size

Defines the size of the background images

border

A shorthand property that accepts multiple values for drawing a line around the element

border-collapse

Specifies if table borders should collapse-single border/separated

border-color

Specifies the border-color

border-image

Shorthand property that lets you use an image as the border of an element

border-radius

Shorthand property that lets you give any element “rounded corners” for the four border

border-spacing

Sets how far apart the adjacent cells are between the borders

bottom

Sets the placement of an element from the bottom of its parent element

box-decoration-break

Lets you control how box decorations are drawn across the fragments of a “broken” element at page-break, or, for in-line elements, at line-break

box-shadow

Used in casting shadows from elements

box-sizing

Defines how the width and height of an element are calculated: should they include padding and borders, or not

break-inside

Adjusts page breaks inside the current element

caption-side

Allows you to define the position of a table caption

caret-color

Changes the color of the cursor (caret) in inputs, textareas, or  any element that is editable

@charset

Specifies the character encoding used in the style sheet

clear

Sets whether an element must be moved below (cleared) floating elements that precede it. It applies to float and non-floating elements

color

Sets the color of text and text decorations

column-count

Breaks an element’s content into the specified number of columns

column-fill

Specifies how an element’s contents are balanced when broken into columns

column-gap

Specifies the gap between the columns

column-rule

Sets the width, style, and color of the line drawn between columns in a multi-column layout

column-span

Makes it possible for an element to span across all columns

column-width

Sets the ideal column width in a multi-column layout

columns

Sets the column width and column count of an element

content

Used in conjunction with the pseudo-elements:before and :after. It is used to literally insert content

counter-increment

Increases or decreases the value of a CSS counter by a given value

counter-reset

Create or resets a CSS counter to a given value

cursor

Controls what the mouse cursor will look like when it is located over the element in which this property is set

direction

Sets the direction of text, table columns, and horizontal overflow

display

Specifies how a certain HTML element should be displayed

empty-cells

Sets whether borders and backgrounds appear on empty cells in a table

filter

Provides access to effects like blur or color shifting on an element’s rendering before the element is displayed

flex-basis

Specifies the initial size of the flex item

flex-direction

Specifies the direction flex items are placed in the flex container

flex-flow

A shorthand property for the flex-direction and the flex-wrap properties

flex-grow

Defines the ability for a flex item to grow if necessary

flex-shrink

Determines how much the flex item will shrink relative to the rest

flex-wrap

Sets whether flex items are forced onto one line or can wrap onto multiple lines

float

Specifies whether or not a box should float

font

A shorthand property for the font-style, font-variant, font-weight, font-size/line-height, and the font-family

font-display

Defines how font files are loaded and displayed

font-family

Defines the font that is applied to the selected element

font-feature-settings

Controls advanced typographic features in OpenType fonts

font-size

Specifies the size  or height of the font

font-size-adjust

Sets how the font size should be chosen based on the height of lowercase rather than capital letters

font-stretch

Selects a normal, condensed or expanded face from a font

font-style

Sets whether a font should be styled with a normal, italic, or oblique face from its font-family

font-variant

Allows you to change the targeted text to small caps

font-variant-numeric

Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers

font-weight

Sets the weight or thickness of a font

grid-row / grid-column

Defines which row or column an element will be displayed on

grid-template-columns

Specifies the size of the columns, and how many columns in a grid layout

grid-template-rows

defines the line names and track sizing functions of the grid rows

hanging-punctuation

specifies whether a punctuation mark should hang at the start or end of a line of text, it may be placed outside the line box

height

Specifies the height of an element

hyphens

Specifies how words should be hyphenated when text wraps across multiple lines

image-rendering

Defines how the browser should render an image if it is scaled up or down from its original dimensions

@import

Allows you to import a style sheet into another style sheet

isolation

Determines whether an element must create a new stacking context

justify-content

Defines how the browser distributes space between and around content items along the main axis of a flex container, and the inline axis of a grid container

@keyframes

Specifies the animation code

left

Specifies the horizontal position of a positioned element

letter-spacing

Controls the amount of space between each letter in a given element or block of text

line-height

Defines the amount of space above and below inline elements

list-style

A shorthand property that sets values for three different list-related properties in one declaration

margin

Defines the outermost portion of the box model, creating space around an element, outside of any defined borders

max-height

Sets the maximum height of a specified element

max-width

Sets the maximum width of a specified element

@media

Sets the style rules for different media types/devices/sizes

min-height

Sets the minimum height of a specified element

min-width

Sets the minimum width of a specified element

mix-blend-mode

Defines how an element’s content should blend with its background

object-fit

Defines how an element responds to the height and width of its content-box

object-position

specifies the alignment of the selected replaced element’s contents within the element’s box

opacity

specifies how transparent an element is

order

Sets the order to lay out an item in a flex or grid container

orphans

Controls the minimum number of lines of a paragraph that can be left on the old page

outline

A shorthand property to set various outline properties in a single declaration- outline-style, outline-width, and outline-color properties

outline-offset

Offsets a defined outline from an element’s border edge by a specified amount

overflow

Sets what to do when an element’s content is too big to fit in its block formatting context

overflow-wrap

Applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box

padding

Sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left

page-break-after/page-break-before/page-break-inside

Properties help define how the document is supposed to behave after an element, before an element and inside and element

perspective

Gives an element a 3D-space by affecting the distance between the Z plane and the user

perspective-origin

determines the position at which the viewer is looking

pointer-events

Sets under what circumstances (if any) a particular graphic element can become the target of pointer events

position

Help you manipulate the location of an element

quotes

Specifies which types of quotes are used when quotes are added for embedded quotations

resize

Controls if and how an element can be resized by the user

right

Specifies the right position of a positioned element

scroll-behavior

Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump

tab-size

Sets the amount of spaces that display for the tab character

table-layout

Defines what algorithm the browser should use to lay out table rows, cells, and columns

text-align

Align the inner content of a block element

text-align-last

Control the alignment of the last (or only) line of text right before a forced line break

text-decoration

Sets the appearance of an underline, overline, line-through, or a combination of lines to selected text.

text-decoration-color

Specifies the color of the text-decoration

text-decoration-line

Specifies the type of line in a text-decoration

text-decoration-style

Specifies the style of the line in a text decoration

text-indent

Specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element

text-justify

Sets what type of justification should be applied to text when text-align: justify; is set on an element

text-overflow

Deals with situations where text is clipped when it overflows the element’s box

text-shadow

Adds shadow to text

text-transform

Controls text case and capitalization

text-underline-position

sets the placement of the underline on links or on text with text-decoration property

top

Specifies the top position of a positioned element

transform

Allows you to visually manipulate an element by skewing, rotating, translating, or scaling

transform-origin

Sets the origin for an element’s transformations

transform-style

Sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element

transition

A shorthand property used to represent up to four transition-related longhand properties

transition-delay

Defines a length of time to delay the start of a transition

transition-duration

Sets the length of time a transition animation should take to complete

transition-property

Sets the CSS properties to which a transition effect should be applied

transition-timing-function

Define a function that describes how a transition will proceed over its duration, allowing a transition to change speed during its course

unicode-bidi

Used together with the direction property, determines how bidirectional text in a document is handled

user-select

Controls how the text in an element is allowed to be selected

vertical-align

Controls how elements set next to each other on a line are lined up

visibility

Specifies whether or not an element is visible

white-space

Specifies how text is handled on the element it is applied to

widows

Specifies the minimum number of lines of a paragraph that can fall to a new page

width

Specifies the width of the element’s content area

word-break

Specifies how words should break when reaching the end of a line

word-spacing

Sets the length of space between words and between tags

writing-mode

Sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress

z-index

Specifies the vertical stacking order of elements that overlap

zoom

Allows you to scale your content

Introduction to CSS – CSS Properties
You may Also Like
Scroll to top