CSS is an abbreviation for Cascading Style Sheets. It is a language for formatting documents written in a markup language such as HTML. CSS allows for the separation of document content and presentation.
To apply styles to an HTML element, you specify a CSS property followed by a colon and a value:
property : value
The spaces before and after the colon are optional. For example:
background-color:green
A style may be affected by multiple properties. In this case, two properties are separated by a semicolon and or a line break. For example, this style consists of two properties.
color: red; padding: 10px;
It can also be written like so
color: red padding: 10px
OR
color: red; /* ends with semicolon */ padding: 10px;
As you can see, you can add comments to a style declaration. A comment starts with /* and ends with */.
Applying Styles
There are three ways to apply a style to an HTML element.
1. Use the style attribute of the element to be styled.
2. Use the style element within the head element of a web page to define styles. A style in the style element may apply to all instances of a particular element type or an element having a matching identifier. You can also create styles that can be used by referencing them in the class attribute of the element to be styled.
3. Isolate styles in a .css file and load the file from the HTML document.
Using the style Attribute
The simplest way to add a style is by defining the style in the element itself, using the style attribute. For example, the body, p and span elements in the HTML below are styled this way.
<!DOCTYPE html> <html> <head> <title>Using the style attribute</title> </head> <body style="background:#dedbce;padding:10px"> <p style="font-family:sans;font-size:12px"> Lorem ipsum <span style="color:red;border:1px solid green"> dolor sit amet</span>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>
Output
Using the Style Element
<!DOCTYPE html> <html> <head> <title>Using the style element</title> <style> body { background:#abbaca; } p { font-size:14px; } #intro { color:red; font-style:italic; } .teal-with-border { color:teal; border:1px solid green; } .bold { font-weight:bold; color:cyan; } </style> </head> <body> <p id="intro"> Lorem ipsum <span class="teal-with-border"> dolor sit amet</span>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum <span class="bold"> dolor sit amet</span>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>
Output
Using a CSS File
With this approach, you isolate all styles in a separate CSS file and link the file from any HTML document that needs to use the styles. A CSS file normally has .css extension, but it doesn’t have to. You can use the same text editor you use to write HTML documents to create CSS files.
<!DOCTYPE html> <html> <head> <title>Using CSS file</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p id="intro"> Lorem ipsum <span class="teal-with-border"> dolor sit amet</span>, consectetur adipiscing elit, sed do eiusmod... </p> </body> </html>
The HTML document in above HTML has a references to CSS file called style.css using the link element, specifying the URL of the CSS file with its href attribute:
The contents of CSS File
body { background:#abbaca; } p { font-size:14px; } #intro { color:red; font-style:italic; } .teal-with-border { color:teal; border:1px solid green; } .bold { font-weight:bold; color:cyan; }
Which Method to Use?
Of the three methods, the style attribute is the quickest way to format an element. However, it does not promote separation of content from presentation. In addition, styles written this way are not reusable. You should not use this method except for very simple documents.
By contrast, styles in a CSS file can be linked by multiple documents that share the same theme. Changing a value in the CSS file affects all the documents. This is the best way of using CSS and you should always choose this approach when possible. The are drawbacks are you end up with one extra file, the CSS file, and there is some performance penalty because browsers have to download an addition file. This performance hit is usually negligible.