Written in
HTML CSS Development
updated on 10 Jan 2023
CSS, which stands for Cascading Style Sheet, is a language used to customize how your HTML elements are displayed on the browser. Like HTML, it is not really a programming language. The first website created did not have CSS, and back then it was fine because websites were usually used to share research paper and information between scholars.
Nowadays, we use CSS to make websites more vibrant and eye-catching, sometimes even easier to read. Look at the screenshot of Pinterest.com below.
CSS can target specific elements in HTML and apply styles to it. In order to do this, you need to specify a Selector, choose the correct Property, and define its Property value. Say we want to make all the paragraphs text red, we would do this.
Image from Mozilla Developer Network
Each rule set must be wrapped inside curly braces {}. Within each declaration, you must use a colon : to separate the property and the value. At the end of each declaration, you must end with a semicolon ;.
Just like HTML, you can comment in CSS, but it uses a different syntax. It's pretty straight forward none the less. You start with a /* and end with a */.
language=>CSS
p {
color: red;
/* this is a comment in CSS */
}
/* You can also comment
across multiple lines */
There are two ways you can write CSS. The first way, the one we demonstrated above, is called a CSS rule. You need to define the element you are targeting with a selector. You can either write this rule inside an HTML style element or write it in a separate CSS file and link it to your HTML element. To embed it directly in your HTML file, add it inside the <head> tag of your HTML file.
Note: When writing CSS rule inside the HTML file, you need to enclose it inside a <style> tag, so the browser knows you are writing CSS. If you write your CSS inside a separate CSS file, you don't need the <style> tag, you can just write your CSS rule immediately.
language=>HTML
<style>
p {
color: red;
}
</style>
If you have a separate CSS file, called "custom.css", you need to link your CSS file to your HTML file in the <head> tag like this.
Again, the <link> tag is a self-closing tag so it doesn't need a closing tag. We add a forward slash at the end to demonstrate it is self-closing. The attribute rel stands for relationship and it is required for <link> tags. It specifies the relationship between the current document and the linked document, CSS file is a stylesheet in this case. type specifies the media type of the linked document, which is "text/css" for CSS files.
The other way of writing CSS is directly on the HTML element you are targeting. This is called in-line CSS. You use the style attribute when you want to write in-line CSS.
language=>HTML
<p style="color:red;">a red paragraph</p>
