Introduction
- CSS stands for Cascading Style Sheets
- It is used to style and position HTML elements in web pages
- There are few ways of writing CSS:
- Inline
- written inside the style attribute of an HTML tag - Internal
- written inside the <style> element - External
- written in a seperate CSS file and linked to the HTML file using the <link> tag
- Inline
CSS Syntax
Syntax is the way code is written. Every language has it's own syntax with some rules to follow, below is the basic CSS Syntax
selector {
attribute : value unit;
}
selector refers to the HTML element to which we add styles
attribute refers to the CSS property & value refers to that selector value applied to the element
There is no fixed rule to write CSS, the spaces and line breaks are just added for code readability, we can minify
the CSS by removing additionals spaces and comments which reduces the file size to load the websites faster. It is suggested to minify the CSS to improve the site's performance.
/* CSS without spaces and line breaks - Minified */
selector{attribute : value unit;}
/* CSS with spaces and line breaks - Suggested for Readability */
selector {
attribute : value unit;
}There is no fixed rule on how to write CSS, the spaces and new lines can be
Comments
Comments are used everywhere in the developer community to make the code understable. A comment in CSS start with /* and ends with */
/* This is a single line comment */
/*
Multi line comments can also be
written using the same syntax
*/
Linking a CSS file with HTML
A CSS file can be linked to an HTML file using the <link> tag in the head section
<head>
<title>CSS Tutorial</title>
<!-- The link tag in the HTML file links the external CSS -->
<link rel="stylesheet" href="path-to-file/file-name.css">
</head>
<head>
<title>CSS Tutorial</title>
<!-- I named the CSS file as custom.css, you can give any name and link it accordingly -->
<link rel="stylesheet" href="custom.css">
</head>What is the use of rel in link tag?
rel is an attribute which specifies the relationship between the current file to the linked file. Here we are linking a stylesheet file which is nothing but the CSS file, and the href attribute is used to specify location of file or the file destination
Priority
The most recent occurance is considered when there are similar and multiple CSS properties for the same element. For example
<!-- Internal Styling -->
<style>
/* The text color of the paragraph tag is set to red */
p {
color : red;
}
/* Now the text color of the paragraph tag is overridden to green */
p {
color : green;
}
</style>
<p>
Sample Text
</p>Here, the color of the text is green and not red, as the styling is overridden by the most recent occurrence
Parent and Child Elements
Elements written inside another element are considered as it's child elements. Child elements can inherit the properties of parent element i.e they can get the same properties as the parent element
<div>
<p>I'm a child element</p>
</div>
Properties & Values
Some CSS properties
| Property | How they work? |
|---|---|
| background-color | Used to change the background color of the element |
| border | Used to add a border to element |
| margin | Margin is outer space of an element to position it |
| padding | Padding is nothing but the inner space of the element |
| font-size | Used to change the size of the text |
| font-family | Can be used to change the font and enables to use multiple fonts in the site |
| text-decoration | It can be used to style the text like underlining, and more |
| list-style | Used to style the lists like Roman, Greek and more.. |