What is CSS?
In our day-to-day life, we all are interacting with many websites for various tasks. The one thing that is visible to us as normal users is the look and feel of the websites, in technical words we can say UI. We all know HTML is the foundation of a webpage on top of that using other technologies like CSS, JS and other JavaScript frameworks the website is built.
HTML is used for the structure of the webpage and CSS is used for styling the webpage. CSS stands for Cascading Style Sheets, using CSS we can change the default look of the HTML tags like we can change the size of <p> tag to greater than <h1> tag or vice versa.
Different Ways to Embed CSS
Inside the head tag
There are different ways to define CSS inside the HTML document, one is using <style></style> inside the <head></head> tag of the HTML document.
<html>
<head>
<style>
/* The CSS rules are defined here. */
</style>
</head>
<body>
<!-- The content goes here. -->
</body>
</html>
Inline CSS
Another method is using inline CSS, in this case, the CSS properties are written inside the tags themselves.
<html>
<head>
</head>
<body>
<h1 style="color:red; background-color:yellow;">CSS is cool.</h1>
</body>
</html>
Output:
External Stylesheet
The third way is creating a CSS file with the extension (.css) and embedding the file using the <link> tag in the <head></head> of the HTML document. The file is known as a stylesheet, and generally, the name of the file is style.css, however, one can name the file anything as per requirement.
The Syntax
The CSS is defined using the selector and the rule is applied to that selected element. Selectors are HTML tags or combinations of tags used to target the specific HTML element. An example of CSS targeting <p> tag is shown below:
Syntax:
selector {
/* Rules are defined here */
}
Example:
<p> This is a paragraph. </p>
p {
color: yellow;
background-color: red;
}
Browser output:
Another example of using CSS to change the default behaviour of HTML elements is given below. In the example below CSS is used to change the default size of <p> and <h1> tags.
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
h1 {
font-size: 25px;
}
p {
font-size: 25px;
}
Output:
The left image shows the default browser rendering of the <h1> and <p> tags while the right image shows the use of custom CSS to increase the font size of the <p> tag. Although the default behaviour of the heading <h1> tag is still there and it is still bold. We can change any default property of the HTML tags using CSS.
CSS Selectors
The word selector in itself is self-explanatory, and you guessed it right, it is used to select the HTML elements. There are different types of CSS selectors based on their uses. The types of CSS selectors are universal selectors, individual selectors, child selectors, sibling selectors etc.
Universal Selectors
The universal selectors are used for selecting everything. The asterisk symbol is used for defining universal rules. The syntax for the universal selector is as shown below:
* {
/* Rules are defined here. */
}
Example:
In the above example, it is visible that all the HTML elements are selected when we are using the universal selector (*).
Individual Selectors
The individual selectors are used for targetting a single HTML tag, like <p>, <h1>, <div>. When individual selectors are used all the elements having the same tag got selected. Some individual selectors are shown in the example below:
Child Combinators
The child selectors can be used for selecting the children of an HTML element. The greater than (>) symbol is used to define this selector. The syntax for this selector is:
first_selector > second_selector {
/* CSS properties goes here. */
}
Example:
In the above example, it is clear that the child selector selects all the direct children of the same type. In the above case, the paragraph outside the div is not selected but all the paragraphs inside the div are selected. The heading inside the div is also excluded.
Class & Id Selectors
The class and ids selectors are more specific than the individual selectors. Classes and Ids are defined as an attribute in the HTML tags. The class selectors are targetted using the period (.) symbol and the id selectors are selected using the pound (#) symbol.
In the example below it is shown how it works. The class can be used multiple times on a webpage.
An example of the id selector is given below. The id should be unique and can be used once. For the user, it creates no difference as shown in the example. One paragraph is targetted using class and another is using id, but since the same CSS rules are applied on both, there is no difference in result.
Precedence Order of Classes & Ids
In the example below we used class and id both to target the HTML element.
The rules applied using id is selected and the rules applied on the class selector are ignored. This is known as specificity, and we can say that ids are more specific than classes.
Descendant Selectors
The descendant selectors are defined using the space ( ) symbol. In this case, all the descendants are selected and the rules are applied to them.
Siblings Selectors
The sibling selectors are either defined using the addition (+) or tilde (~) symbol. The sibling selectors select the element next to it on the same level.
Pseudo Selectors
The pseudo selectors target an HTML element in a specific state, it is different from normal selectors. It is built in a way so that the CSS rules will be applied when the user interacts with the element like, hover, focus, visit etc.
In the above example on hover the paragraph colour will be changed. The anchor tag can have different states like hover, visited etc. Visited will be applied when the link is clicked once.
Different CSS Properties
Borders and Color
The borders are used for aesthetic purposes or sometimes used to create a division between two contents. The border can be of many styles the border-style property is used for defining the border style, like solid, dotted, dashed etc. The shorthand for defining border is
selector_name {
border: border-width border-style border-color;
}
p {
border: 2px solid red;
}
The color is simply used for changing the text colour. There are many ways to define colours, like using HEX code, RGB code, or colour name. It is recommended to use HEX code or RGB code because the colour interpretation of different browsers varies if the name of the colour is used.
Background
The background property is used to set a custom background of an HTML element. In the background, we can also use images using the background-image property.
The size of the background image can be adjusted using the background-size property.
Margin and Padding
The margin is the space between the content and the viewport, the viewport is the area which is visible to the user. Padding is the space between the content and the border. The example shown below can elaborate on the padding and margin more.
The margin and padding are shorthand for margin-top, margin-right, margin-bottom and margin-left, and padding-top, padding-right, padding-bottom and padding-left respectively. When we give only one value to margin and padding it means all the four values are the same.
Text-align
The text-align property is used for aligning the text. By default, the text is left-aligned, and it can be aligned in the centre or right.
Float
The float property changes the flow of the element from regular elements, suppose we have a paragraph and we set it to float left, in that case, the elements other than the floated paragraph starting from the vacant space. This will not happen if the float is removed from the paragraph, both paragraphs take their spaces.
When the float is set to none:
There are many more properties in CSS, for more detailed information about properties must visit the MDN docs.
Good Luck :)