CSS Tutorial || Introduction with CSS

Step by Step CSS tutorial with examples. This complete tutorial series will guide you to work with CSS. Complete CSS tutorial for beginners as well as for professionals.

Introduction with CSS

CSS  is defined as Cascading Style Sheets.
It can be used to define text styles and other aspects of web pages. Let us understand the HTML in detail.

WHAT IS CSS?

CSS describes presentation of HTML elements are to be displayed on screen, paper, or in other media.

  • CSS was developed by Hakon Wium lie in 1994 with www.
  • CSS a style sheet language.
  • CSS helps to display and present the content of HTML.
  • CSS is stored in a simple text file that is .css
  • CSS is used to control the way a web browser displays elements on a page.

TYPES OF CSS

1. INLINE  CSS

  •  The Inline CSS  is defined in the style attributes of HTML Tag.
  • Since the Inline CSS style is not cached in the browser, so the browser has to read the CSS rules every time the page is reloaded and have to act upon it, the problem with caching does not occur if the CSS rules are not lengthy.
<h1 style="color:black;text-align:center;background-color:red;">
Welcome to Codedec
</h1>
<p style="color:orange;font-size:2rem">Introduction to css.</p>

OUTPUT:   2. INTERNAL CSS

  • The Internal CSS is defined inside the style HTML tag, Which is within the head tag of the webpage.
  • Internal CSS cannot be used with multiple web pages.
<style>
body {
background-color: #ff981f;
}
  
h1 {
     color: red;
     margin-left: 100px;
}
</style>

OUTPUT:

 3. EXTERNAL CSS

  • External CSS is defined within the head section of the HTML page inside the link tag.
  • External CSS takes less load time and file size easily.
  • External CSS helps in improving page rank.
<link rel="stylesheet" type="text/css" href="mystyle.css">

Content of the Style.CSS

body {
background-color: #ff981f;
}
  
h1 {
color: red;
margin-left: 100px;}

OUTPUT:

CSS COLORS

  • Use the color property to change the text color inside the tag.
<h1 style="color:orange;">welcome to codedec</h1>

      OUTPUT:

  •   Use the background-color property to change the background color of the tag.
<body style="background-color:aqua;">welcome to codedec</body>

OUTPUT:

CSS MARGIN & PADDING

  • Margin is space around the element and Padding is within the element.
  • Margin is used to set the difference between nearby elements.
  • The padding used to change the size of the element.
p {
   margin-left: 100px;
   margin-right: 100px;
   margin-top: 100px;
   margin-bottom: 100px;
   padding-left: 100px;
   padding-right: 100px;
   padding-top: 100px;
   padding-bottom: 100px;
 
 }

OUTPUT:

CSS BACKGROUNDS

  • Background image – sets the background image of the element by attaching the image URL.
background-image: url("image-url");

OUTPUT:

ADVANTAGES & DISADVANTAGES OF CSS

Advantages:

  • CSS saves a lot of time.
  • It helps to define the layout of the page.
  • It improves the loading speed of the page.
  • It has more formatting options.

Disadvantages:

  • Compatibility issue between other browsers.
  • There are multiple levels of CSS such as CSS, CSS 2, CSS 3. This can create confusion for non-developers and beginners.
  •  It does not have built-in security, so anyone who has read/write access to the webpage can override the CSS file.
  •  first CSS specification to become an official W3C Reco.

VERSIONS AND UPDATES OF CSS

CSS 1

  • first CSS specification to become an official W3C Reco.
  • CSS 1 has Font properties such as typeface and emphasis properties.

CSS 2

  •  CSS 2  was developed by w3c in May 1998.
  • More features like fixed positioning of elements and concepts of media type were added.

CSS 3

  • CSS 3 was developed in 1999.
  • CSS 3 is divided into separate documents called modulus having different features.
  • CSS 3 Template layout module and CSS3 Grid positioning module: Creating grids with CSS 3.
  • CSS 3 Text module: Outline text and even create drop-shadows with CSS.
  • CSS 3 Color module: Now with opacity.
  • CSS 3 is the latest updated version of CSS.