* This excerpt was taken from pages 60-67 of Quick and Fun guide for HTML and CSS by Hamit Peña Sierra.
CSS (Cascading Style Sheets) is a language that describes the style for HTML documents. Using CSS, you can control the layout, colours margins, height, width, backgrounds and many other things from elements in HTML.
CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments
While HTML was created to define the structure and content of a web page, CSS is meant to be used to format and give style to those pages.
The idea when using CSS is simple:
You create a stylesheet defining the styles you want to apply, things like color, font, spacing can be defined here; then you link your web page or pages to use the created stylesheet (you can define many pages to use the same stylesheet)
CSS Syntax
A set of style rules in CSS consists of a selector and a declaration block:
The selector points to the elements you want to apply the styles to. In the declaration block we define the style rules we want to apply to the selected elements; inside it, we can set the value to many properties separated by a semicolon (;), and those are applied to the selected element(s)
When creating a selector, it will “select” the elements based on different criteria: element’s name, id, class among others.
Element Selector
To apply styles based on the element’s name we need to define an element selector. To define it we merely set the selector’s name to be equals to the element’s name we want to select
ID Selector
An id selector uses the element’s id attribute to find it and apply the defined style properties to it. To define an id selector, we must write a hash (#) character followed by the element’s id
As the id of an element is meant to be unique per document, this selector is used to apply a set of styles on a single element within the web page
Class Selector
Another type of selector we can use is the one based on the class attribute of an element. To define it we must start its name with a period (.) character followed by the class name
As the class attribute is not meant to be unique, this selector usually applies its styles to many elements on the same web page
It is possible to group selectors to avoid code repetition. To do so, we have to place a comma(,) to separate each selector.
We can also mix some selectors, specifying element name and class, element’s name and id or element’s id and class.
To mix selectors we just place them together (without any space or comma between them)
Adding CSS to HTML
We can link an HTML document with a CSS stylesheet in 3 main ways:
- Inline style
- Internal stylesheet
- External stylesheet
Inline style
When using the inline style, you define the CSS properties directly in the element by using the style attribute.
You can define many properties, as much as you wish using a semicolon (;) to separate them, and all the defined properties only applies to that specific element.
Internal style sheets
Another way to insert CSS stylesheet in a HTML document is by using Internal style sheets, those are defined by using the <style></style> element inside the <head> section of your HTML page
When using internal stylesheets, the CSS properties defined are only going to be applied in a single page, if we want to reuse them we need a different approach, we need external stylesheets
External style sheets
With an external style sheet you can create a set of selectors written in a separated file using the .css extension, and then we can link as many web pages as we wish by using the <link> element on each.
You can link as many style sheets as you need in the same HTML document.
Adding External style sheets
First, you have to create a new file and write all selectors you desire, the created css file should not contain any HTML tags, just CSS declaration blocks. Save it using the .css extension.
Once you’ve created the css file, you can link it using the <link> element inside the head section
Some of the advantages of using an external stylesheet are:
- You can apply the same style to many pages of your site using a single style sheet.
- You Write your style sheet once and can use it as many times as you wish.
- It’s easier to maintain. (In the case of a change, there’s one single file to modify)
* This excerpt was taken from pages 60-67 of Quick and Fun guide for HTML and CSS by Hamit Peña Sierra.
CSS Quiz
Test your CSS knowledge with our quiz
