CSS Tutorial

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

Privacy Policy  |  Copyright@2017 - All Rights Reserved.  |  Contact us   |  Report website issues in Github   |  Facebook page   |  Google+ page

Free online programming tutorials

Email Facebook Google LinkedIn Twitter
^