Content

  • CSS Introduction
  • CSS Syntax
  • CSS Selectors
  • CSS Methods
  • Margin and Padding
  • CSS Typography
  • CSS Background

CSS Introduction

  • Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML
  • CSS describes the style of an HTML document,it defines how HTML elements should be displayed
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Syntax

  • 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.
  • When we write inline CSS we use property name and a value

Example :

h1{ color : red;background-color:white}

CSS Selectors

Selector Example
Element Selector : The element selector selects elements based on the element name. 
p { color: red; }
The Id selector : The id selector uses the id attribute of an HTML element to select a specific element.To select an element with a specific id, write a hash (#) character, followed by the id of the element. 
#para1 { color: red; }
The Class selector : The class selector selects elements with a specific class attribute.To select elements with a specific class, write a period (.) character, followed by the name of the class. 
.center { text-align: center; color: red; }
Grouping Selectors : To minimize the code, we can use Grouping Selectors 
h1, h2, p { text-align: center; color: red; }

CSS Methods

Basicaly, We use style attribute to apply css to html tags i.e.inline, other than style attribute we use class attribute to apply css from framework i.e. external, also we can apply css using id attribute of HTML tag i.e.internal

Method Example
Inline CSS : apply css within tag using style attribute 
<a style="color:blue;margin-left:30px;"></a>
External CSS : create external css file and add css reference in head tag 
<link rel="stylesheet" type="text/css" href="bootstrap.css">
Internal CSS : using id selectors,class selectors within page 
h1 { color: maroon; margin-left: 40px; }

Margin and Padding

Margin : The CSS margin properties are used to create space around elements, outside of any defined borders. 
#id{margin-top:20px}
Padding : The CSS padding properties are used to generate space around an element's content, inside of any defined borders. 
#id{padding-top:20px}

CSS Typography

Property Description
Color Sets the color of text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-transform Controls the capitalization of text
font-family To change font-family of text

CSS Background

Background Color 
background-color: orange
Background Image 
background-image: url("paper.gif");
Background Repeat 
background-repeat: repeat-x (horizontal),repeat-y(vertical),background-repeat: no-repeat