What is CSS? CSS is an acronym for Cascading Style Sheets which is a rule-based digital language that dictates the visual appearance and formatting of text documents using a markup language such as HTML, XHTML, XML, and SVG.
While HTML is the structure or bones of a webpage, CSS is the style or skin. CSS controls how each element on a webpage is displayed and presented to users.
CSS can be used to create multiple layouts of your website, like making a two or three-column webpage. It can also be used to change the size and colors of headings and links. And can even be used for special effects such as animation.
It is an easy language to learn once you understand the basics. CSS can be used in three different ways.
- External CSS: An External stylesheet allows you to make changes using a text file with a .css extension.
- Internal CSS: An internal stylesheet can be used in one single HTML page. This is declared at the top of an HTML file inside the <head> section using the <style> element.
- Inline CSS: An inline style can be used on an individual element by adding the style attribute on the element.
CSS is rule-based, meaning that you define a rule with a group of styles to be applied to particular HTML elements or element groups on a webpage.
For example, if you want to make all the main headings on your website a specific size and color, you need to create a rule for all h1 elements.
Below we create a rule for all h1 elements and assign the hex number for the color blue with a font size of 18 pixels.
H1 Header CSS Example:
You can also target specific HTML elements by assigning identifiers and classes to define different sections of your website. This allows you to select and style sections of the same element on a webpage.
For instance, you can style the header section of an article page then style individual elements inside the header.
Below we add an identifier named “article-header” to a div element and a class named “article-title” to the h1 element. This allows both to have unique styles applied separately.
Basic HTML Header Example:
For our CSS, we’ll add a background color to the article header, adjust the width, and add some padding. And for the article title we’ve added a font color, size, and which fonts to use.
Basic CSS Header Example:
To get more familiar with CSS, how it works, and a list of styles that can be used, we recommend heading over to W3Schools and taking the CSS Tutorial.
Additional Reading: