CSS Tutorial

CSS - Introduction

CSS Basics

What is CSS?

It has powerful control over the presentation of an HTML document and Most commonly, CSS is combined with the markup languages HTML or XHTML.
Group of style rules that are interpreted by the browser and then applied to the corresponding elements in your HTML document.
CSS is created by World Wide Web Consortium (W3C).

Style rule based on three parts:

Selector: An HTML tag at which a style will be applied. This could be any tag like <p> or <table> etc.
Property: Type of attribute of HTML tag. they could be color, border, etc.
Value: Assigned to properties. For example, font-size property value can be either 12px or 14pt etc.

Style Rule Syntax:

selector { property: value }

Example: div border

div{ border :1px solid #C00; }

Example CSS styles

body {
    background-color: lightgrey;
}

div {
    color: white;
    text-align: center;
}

p {
    font-family: Arial;
    font-size: 18px;
}

Three ways to use CSS in HTML document

External style sheet:

Style(CSS) is defined in separate file and link tag is used to reference the CSS file. This type is used when multiple HTML pages need to be in same style.

<head>
<link rel="stylesheet" type="text/css" href="file_name.css">
</head>

file_name.css:

body {
    background-color: lightgrey;
}

p {
    color: #000000;
    padding-left: 10px;
}

Internal style sheet:

Internal styles are defined using <style> element in the <head> section of an HTML document. This type is used when particular page needs to be in different style.


<head>
<style>
body {
    background-color: lightgrey;
}

p {
    color: green;
    padding-left: 20px;
} 
</style>
</head>

Inline style:

Inline style can be used to apply a unique style for particular element. Use the style attribute to the relevant element for adding inline style.

<h1 style="color:red;margin-left:20px;">Welcome!</h1>

Python installation

CSS Tutorial

CSS - Introduction