Introduction

Comments

Linking a CSS file with HTML

Priority

Parent and Child Elements

Properties & Values

End

CSS Crash Course For Beginners

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

 

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

The type attribute is used to specify the type of the file (code) to the browser, but it is a best practice to avoid the type attribute as the modern browsers can identify the file type without mentioning the type

 

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..
Tags