CSS Stands for Cascading Style Sheets. It is used to style web pages (websites). While HTML determines the text, and elements that are displayed on a web page, CSS is used to add color, determine fonts, font sizes, spacing, alignment, and much more. If we were to use the human body as an analogy: HTML is the bones of the page, it defines the basic structure of the page. CSS, however; is the skin and texture that overlays the bones and brings the page to life. A few CSS properties below to give you an idea of what CSS is capable of:
Property
Description
Example Values
background
Defines the background color or image of an element
#fff, blue
border
Defines the border that should be placed around an element
1px solid black
color
Defines the color of a text
red, #ff0000
font-family
Defines the font family that should be used for text
Roboto', san-serif
font-style
Defines the style that should be applied to text
italic, oblique
font-weight
Defines the weight (bold) of a font (text)
400, 900
height
Defines the height of an element
100px, auto
margin
Defines the space that should be placed around an element
100px, auto
opacity
Defines the transparency/visibility level of an element
0, 0.5, 1
padding
Defines space that should be placed within an element
100px, auto
text-shadow
Adds shadow to text
2px 2px #673ab7
text-transform
Defines the case applied to text
uppercase, capitalize
The list above does not do justice to what can be accomplished with CSS. To drive the example home, the below is a website with no CSS applied, the bare bones - just HTML, vs how it looks like when CSS is applied.
EugeneYeboah.com with all CSS Removed:
EugeneYeboah.com with CSS applied:
Same website, the only difference is that one has CSS removed, and the other does not. The different is night and day. We only recognize that it's the same website based on the text on the page and the URL bar. CSS is used to style web pages. The internet only looks as good as it does because of CSS.
CSS is used to hide and display elements.
You may have noticed that a lot of the text on the bare-bones / HTML only rendering of the site is missing on the HTML + CSS rendering. We'll it's not missing, it's just that it's displayed after the hamburger menu is opened - CSS is used to defined how elements are positions on the page, whether or not they are hidden or not, the stacking order overlapping elements on a page, and much more.