CSS (Cascading Style Sheets) is a programming language that allows you to design a website. CSS allows us to control, with extreme precision, how HTML elements appear on a webpage.
A document or text file is structured using a markup language such as HTML. Text files are then presented (usually in a visual format) by using internet browsers which can display information on a screen, project something, or print it out.
Note: Internet browsers (Google Chrome, Microsoft Edge, Mozilla Firefox, etc.) are also known as user agents.
When we see how basic HTML is read in a web browser we can notice that the text does have design elements applied such as headings being larger and links being blue/underlined. This is because our internet browsers have very basic CSS styles built into them that apply what is written in HTML.
CSS is defined by rules which specify what styles should be applied to an element or groups of elements written by your markup language.
HTML is the markup language that most people are familiar with, however, there are others such as SVG or XML which can be styled by CSS.
Let’s look at an example of CSS being used to style the heading on a page to be displayed as large blue text.
h1 {color: red;
font-size: 5em;}
<h1> which selects the HTML element which is being styled.{} is used to contain the styling code.color then a colon : to separate the value red followed by a semicolon ; to end the declaration.color and one for font-size.Web standard technologies such as HTML, CSS, or JavaScript are defined by large reference documents aka specifications (or “specs”). These specs are kept up to date and published by organizations such as W3C, WHATWG, ECMA, or Khronos.
CSS is developed by a group within the W3C known as the CSS Working Group. This group consists of internet browser vendors and companies who have an interest in maintaining CSS. New features for CSS are created as need or demand by the community requires. However, the CSS Working Group remains vigilant to NOT change any CSS data that would “break old websites.”
NOTE: CSS features can only be utilized in making a web page if browsers have implemented the feature.
Code must be written to understand the instructions in our CSS files and output design onto a monitor/screen. Browsers implement features at different times, so there can be gaps where CSS will fully implement on one browser but NOT another.
There are three (3) ways of inserting a CSS style sheet into an HTML document:
An external style sheet is a separate file which can be used to add CSS style instructions for an entire website. Each HTML page must include a reference to the external style sheet inside the <link> elements inside the <head> section. An external style sheet can be written in any text editor and must be saved with an .css extension. The industry best practice is to title this file style.css
<link rel=“stylesheet” href=“style.css”>Note: Do NOT add spaces between property values and the units.
margin-left: 20 px;margin-left: 20px;An internal style sheet can be used if a single HTML page has a unique style. The internal style is defined using a <style> element inside the <head> section.
Inline CSS styling is used for adding unique design to a single element. In this method, the style attribute is added directly to the element as shown below.
<h1> style="color:blue;text-align:center;"This is a heading</h1>
If more than one CSS style is used for a specific HTML element then the styles will “cascade” based on the following order of priority.
<head> section)