New Exclusive Deal:
Up To 78% OFF a New Website01
:
02
:
52
:
07
Zyro encyclopedia
Learn about online business
What is CSS?
CSS is an abbreviation for Cascading Style Sheets. It’s used to stylize elements on a web page, including colors, fonts, and layouts.
This is achieved by specifying the style to the structure of a document. The structure itself is most commonly made using HTML.
How does CSS work?
When a visitor accesses a website, the web browser converts the HTML file into a Document Object Model (DOM).
DOM is a tree-structured interface containing nodes that represent different parts of the document. You can use CSS on a particular element to style it.
After retrieving all the resources including CSS linked to the HTML file, the web browser assigns the HTML to the targeted nodes based on selectors used.
The web browser then displays the stylized end result along with all the content to the visitor.
CSS consists of two parts — a selector and a declaration block.
A selector declares the targeted HTML elements, while a declaration block, which conveys one or multiple sets of properties and values separated by semicolons, determines how to style it.
What is a CSS selector?
CSS selectors are rules set to determine how to style a particular element. There are several CSS selector types you can use to identify HTML elements.
CSS element selector is a type of selector that targets HTML elements by declaring their name.
For example, if you want to style all the hyperlinks on a page, you can use the :any-link pseudo-class selector.
:any-link {
color: red;
}
You can target specific HTML elements by declaring their class attribute preceded by a dot. All elements having the specified class will be changed.
For example, the class of the HTML element <p class=”center”> is center. You can use it as a selector, followed by a property and a value you want to use to style it.
.center {
text-align: center; font-weight: bold;
}
You can combine both types of selectors for more precise results.
For example, the selector p.class will only affect the <p class=”center”> tag, text that is contained in a paragraph and centered. Similarly, the selector h1.class will only affect <h1 class=”center”> which would only affect the title heading.
To manipulate all the elements on a web page, you can use the CSS Universal Selector instead. It uses an asterisk as the selector.
* {
color: red; font-weight: bold;
}
What is the difference between HTML and CSS?
HTML is used to structure a page, creates the foundation to create content. You cannot use CSS to stylize a page if no structure is defined.
CSS is responsible for making the content look presentable by styling HTML elements like color, fonts, and font sizes, in addition to layouts on a page.
Because of this, a website can still function without using any CSS, but the appearance will take your site a few decades back in time.
Another difference is that CSS can be used in an HTML file, but HTML is inapplicable in a CSS style sheet.
Three ways to use CSS
External CSS
This method loads CSS from an external style sheet .css file. To activate it, you have to import it to the HTML file’s <head> section manually.
This method is an ideal option if you are working with multiple web pages, as the changes made in the style sheet will be implemented on all pages.
| <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> |
Note that mystyle.css is the name of the CSS file.
Internal CSS
This method links a CSS style sheet to the <head> section of an HTML page using a <style> tag, which is suitable for styling a single web page.
| <head> <style> body {background-color: blue;} </style></head> |
Inline CSS
Inline CSS is used to style a single HTML element. This method applies CSS to the targeted element within an HTML page.
| <h1 style=”color:yellow;”>This is a heading</h1> |
