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