CSS Tutorial – Excellence Technology

CSS Tutorial

This CSS tutorial, whether you’re a student or a professional is a valuable resource to enhance the visual appeal of your websites or personal blogs. Here, you will learn CSS from basic to advanced concepts, such as properties, selectors, functions, media queries, and more.

CSS is used to enhance the visual presentation of web pages. Without the use of CSS, a web page will appear visually unappealing.

CSS Introduction

Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independently of the HTML that makes up each web page. It describes how a webpage should look: it prescribes colours, fonts, spacing, and much more. In short, you can make your website look however you want. CSS lets developers and designers define how it behaves, including how elements are positioned in the browser.

While HTML uses tags, CSS uses rulesets. CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document.

Why CSS

  • CSS saves time: You can write CSS once and reuse the same sheet in multiple HTML pages.
  • Easy Maintenance: To make a global change simply change the style, and all elements in all the webpages will be updated automatically.
  • Search Engines: CSS is considered a clean coding technique, which means search engines won’t have to struggle to “read†its content.
  • Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
  • Offline Browsing: CSS can store web applications locally with the help of an offline cache. Using this we can view offline websites.

CSS versions release years:

CSS Syntax:

CSS comprises style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule set consists of a selector and declaration block.

 
  1. Selector: A selector in CSS is used to target and select specific HTML elements to apply styles to.
  2. Declaration: A declaration in CSS is a combination of a property and its corresponding value.
Selector -- h1
Declaration -- {color:blue;font size:12px;}
  • The selector points to the HTML element you want to style.
  • The declaration block contains one or more declarations separated by semicolons.
  • Each declaration includes a CSS property name and a value, separated by a colon.

For example :

 
selector {
    property1: value1;
    property2: value2;
}

CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

Here is a more specific example: In the following example all p elements will be centre-aligned, with a blue text colour:

 
p {
    color: blue;
    text-align: center;
}

Let’s see how our page looks with & without CSS :

Before CSS: In this example, we have not added any CSS.

 

 

 

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <main>
       <h1>HTML Page</h1>
       <p>This is a basic web page.</p>
    </main>
</body>
</html>

Output:

After CSS: In this example, we added some CSS styling inside the HTML code only to show how CSS makes a dull HTML page look beautiful.

 
<!DOCTYPE html>
<html>
 
<head>
    <title>Example</title>
    <style>
        main {
            width: 600px;
            height: 200px;
            padding: 10px;
            background: beige;
        }
         
        h1 {
            color: olivedrab;
            border-bottom: 1px dotted darkgreen;
        }
         
        p {
            font-family: sans-serif;
            color: orange;
        }
    </style>
</head>
 
<body>
    <main>
        <h1>My first Page</h1>
        <p>This is a basic web page.</p>
    </main>
</body>
 
</html>

Output:

CSS Syntax

A CSS Syntax rule consists of a selector, property, and its value. The selector points to the HTML element where the CSS style is to be applied. The CSS property is separated by semicolons. It is a combination of the selector name followed by the property: value pair that is defined for the specific selector. 

Syntax:

selector { Property: value; }

CSS Colors

CSS Color property is used to set the color of HTML elements. This property is used to set font color, background color, etc. The color of an element can be defined in the following ways:

  • Built-In Color
  • RGB Format
  • RGBA Format
  • Hexadecimal Notation
  • HSL
  • HSLA

Built-In Color: These are a set of predefined colors which are used by its name. For example: red, blue, green etc.

 

Syntax:

h1 {
    color: color-name;
}

CSS Margins and Padding

In this article, we will learn about the CSS Margin & Padding properties of the Box Model & understand their implementation through the example. 

CSS Margins: CSS margins are used to create space around the element. We can set the different sizes of margins for individual sides(top, right, bottom, left).

 

Margin properties can have the following values:

  • Length in cm, px, pt, etc.
  • Width % of the element.
  • Margin calculated by the browser: auto.

Syntax:

body {
    margin: value;
}

The margin property is a shorthand property having the following individual margin properties:

  • margin-top: It is used to set the top margin of an element.
  • margin-right: It is used to set the right margin of an element.
  • margin-bottom: It is used to specify the amount of margin to be used on the bottom of an element.
  • margin-left: It is used to set the width of the margin on the left of the desired element.

    We will discuss all 4 properties sequentially.

    1.  If the margin property has 4 values: 

    margin: 40px 100px 120px 80px;
    • top = 40px
    • right = 100px
    • bottom = 120px
    • left = 80px


      2. If the margin property has 3 values: 

      margin: 40px 100px 120px; 
      • top = 40px
      • right and left = 100px
      • bottom = 120px


        3. If the margin property has 2 values:

        margin: 40px 100px; 
        • top and bottom = 40px;
        • left and right = 100px;


          4.If the margin property has 1 value: 

          margin: 40px; 
          • top, right, bottom and left = 40px

CSS Animations

CSS Animation: CSS Animations is a technique to change the appearance and behavior of various elements in web pages. It is used to control the elements by changing their motions or display. It has two parts, one contains the CSS properties which describe the animation of the elements and the other contains certain keyframes which indicate the animation properties of the element and the specific time intervals at which those have to occur. 

What is a Keyframe?

Keyframes are the foundations with the help of which CSS Animations work. They define the display of the animation at the respective stages of its whole duration. For example: In the first example code, the paragraph changes its color with time. At 0% completion, it is red, at 50% completion it is of orange color and at full completion i.e. at 100%, it is brown. 

 

Syntax:

/*property-name*/: /*value*/;

Animation Properties:

There are certain animation properties given below:

  • animation-name: It is used to specify the name of the @keyframes describing the animation.
  • animation-duration: It is used to specify the time duration it takes animation to complete one cycle.
  • animation-timing-function: It specifies how animations make transitions through keyframes. There are several presets available in CSS which are used as the value for the animation-timing-function like linear, ease,ease-in,ease-out, and ease-in-out. 
  • animation-delay: It specifies the delay of the start of an animation.
  • animation-iteration-count: This specifies the number of times the animation will be repeated.
  • animation-direction: It defines the direction of the animation. animation direction can be normal, reverse, alternate, and alternate-reverse.
  • animation-fill-mode: It defines how styles are applied before and after animation. The animation fill mode can be none, forwards, backwards, or both.
  • animation-play-state: This property specifies whether the animation is running or paused.

CSS Background

The CSS background properties are used to define the background effects for elements. There are lots of properties to design the background. 

CSS background properties are as follows: 

  • CSS Background-color Property: The background-color property in CSS is used to specify the background color of an element.
  • CSS Background-image Property: The background-image property is used to set one or more background images to an element.
  • CSS Background-repeat Property: The background-repeat property in CSS is used to repeat the background image both horizontally and vertically.
  • CSS Background-attachment Property: The background-attachment property in CSS is used to specify the kind of attachment of the background image with respect to its container.
  • CSS Background-position Property: In CSS body-position property is mainly used to set an image at a certain position.
  • CSS Background-origin Property: The background-origin is a property defined in CSS which helps in adjusting the background image of the webpage.
  • CSS Background-clip Property: The background-clip property in CSS is used to define how to extend the background (color or image) within an element.

Background color Property: This property specifies the background color of an element. A color name can also be given as: “greenâ€, a HEX value as “#5570f0â€, an RGB value as “rgb(25, 255, 2)â€. 

Syntax:

body {
   background-color:color name
}

Background Image Property: This property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. 

Syntax: 

body {
   background-image : link;
}

Background repeat Property: By default the background image property repeats the image both horizontally and vertically. 
Syntax: To repeat an image horizontally

body {
   background-image:link;
   background-repeat: repeat:x;
}

Background-attachment Property: This property is used to fix the background ground image. The image will not scroll with the page. 
Syntax: 

body {
   background-attachment: fixed;
}

Background-position Property: This property is used to set the image to a particular position. 
Syntax : 

body {
   background-repeat:no repeat;
   background-position:left top;
}

 

CSS Positioning Elements

The position property in CSS tells about the method of positioning for an element or an HTML entity and the positioning of an element can be done using the top, right, bottom, and left properties. These specify the distance of an HTML element from the edge of the viewport. 

There are five different types of position properties available in CSS:

  1. Fixed position: Any HTML element with position: fixed property will be positioned relative to the viewport. An element with fixed positioning allows it to remain in the same position even we scroll the page. We can set the position of the element using the top, right, bottom, and left.
  2. Static: This method of positioning is set by default. If we don’t mention the method of positioning for any element, the element has the position: static method by default. By defining Static, the top, right, bottom, and left will not have any control over the element. The element will be positioned with the normal flow of the page.
  3. Relative: An element with position: relative is positioned relatively with the other elements which are sitting on top of it. If we set its top, right, bottom, or left, other elements will not fill up the gap left by this element. An element with its position set to relative and when adjusted using top, bottom, left, and right will be positioned relative to its original position.
  4. Absolute: An element with position: absolute will be positioned with respect to its nearest Non-static ancestor. The positioning of this element does not depend upon its siblings or the elements which are at the same level.
  5. Sticky: Element with position: sticky and top:0 played a role between fixed & relative based on the position where it is placed. If the element is placed in the middle of the document then when the user scrolls the document, the sticky element start scrolling until it touched the top. When it touches the top, it will be fixed at the top place in spite of further scrolling. 

CSS Specificity

CSS Specificity of the Selectors can be determined when more than one set of CSS rules applies to the same element, the browser will have to decide which specific set will be applied to the element. This set of rules that the browser follows is collectively called Specificity.

CSS Specificity Rules 

Inline CSS

Inline CSS is a method of applying CSS styling directly within HTML elements using the “style†attribute. It has the highest specificity and will override all other selectors, including External stylesheets and Internal CSS.

Internal CSS

Internal stylesheets are a method for defining CSS styles within an HTML document’s <style> element. This styling can be used when we want to directly implement the styles within an HTML Document. The specificity of this styling depends on the CSS Selector used with the Element. For instance, if an id is used then it has the highest specificity, in comparison to the External stylesheet. For this, internal CSS will override rules defined in an external stylesheet.

External CSS

External CSS is used to style multiple HTML pages with a single style sheet. External CSS contains a separate CSS file with a .css extension. This style can be linked via the <link> tag in the HTML document. The specificity of this styling also depends on the CSS Selector used with the Element.Â