CSS Basics Tutorial

Topics

Introduction
Syntax
Selector
Using CSS in HTML Pages
CSS Rules
CSS Fonts
CSS Text Formating
CSS Box Model
CSS Backgrounds

CSS Introduction

Cascading Style Sheets (CSS)
Applies to HTML Pages For Designing the Layout and View Appearance of Your Website.

A styled HTML document produced by the CSS

<!DOCTYPE html>
<html>
<head>
 <title>CSS Style</title>
 <style type="text/css">
  body {
   background: yellow;
  }
  p {
   color: red;
   font-size: 20px;
  }
 </style>
</head>
<body>
 <p>Hello World</p>

</body>
</html>

CSS Usage :

CSS Syntax

css selector { property-name:values }

Css Selector - HTML Dom Elements Selecting By Elements Tag,Class name or By id.

Property-name : like - background , font-size , color , text-alignment etc.

Property -values: like - orange , 17px, center, etc.

CSS Elements Selecting Syntax

Single Element Type

Syntax : - Single Element Type - p { color:red; }

HTML Element : - <p>Hello World! I Select All p Tag Elements</p>

Multi Element Type

Syntax : - h1,h2,h3 { background : orange }

HTML Element : <h1>Hello H1<h1><h2>Hello H2<h2><h3>Hello H3<h3>

All Element Type

Syntax : - * { padding:5px; }

HTML Element : <p>selected me</p> <h2>Selected me</p>

Element By id ( # )

Syntax : - #p1 , #p2 { marging:5px }

HTML Element : - <p id=”p1”>paragraph1</p><p id=”p2”>paragraph2</p>

Element By Class ( . )

Syntax : - .p1,.h1 { color :seagreen; }

HTML Element : - <p class=”p1>Class p1</p><h1 class=”h1”>Heading 1</h1>

Element with class

Syntax : - p.p1 { font-style:italic; }

HTML Element : - <p class=”p1>Only Select me</p><p class=”p2”>Not Select me</p>

Descendents Selector (E.g : - Only Select li element which parent is ul )

Syntax : - ul li { color : green; }

HTML Element : - <ul><li>select me</li><li>select me</li></ul>

Using CSS in HTML Pages

We Can Use CSS in HTML Pages in 3 ways: -

Inline css -

E.g :

<p style=”color:red”>I am a inline CSS Style Paragaraph Tag</p>

Internal CSS -
E.g :

<html>
<head>
<style>  p { color:red; } </style>
<!----Internal CSS--->
</head>
<body>
<p> My Color Changed By Internal CSS</p>
</body>
</html>

External CSS -
E.g :

<html>
<head>
<link rel=”stylesheet” href=”style.css”>
<!---Linking External CSS Using Href-->
</head>
<body>
<p>My Style Changed By External CSS style.css</p>
</body>
</html>

style.css

p{color:red;}
h1{color:blue;}

As a Developer i Not Prefered To Using Inline CSS use minimum inline CSS Try to Use CSS Externally or Internally Because managing all element style easy.

You think what you like to edit?
100 time paragraph tag style?
Or
Just 1 change in External CSS

CSS Rules

Now What happened If Multiple Style Comes To Same Elements ?

E.g : - in Internal i add

p{ color :red; }

And in External I add
p{ color:black;}

Then Here is a Some Rules Which we See How It Works And Whom It Select.

Important ( <p style=’color:red!important’>Important</p>)

This always Comes First when we Selecting Element whether any internal external or inline css added important works first.

Inline css (we already see inline css above)

This comes in Second Position.

Now Inline and External Had Some Different Case.

Rule with selector :
1. ID
2. class
3. descendant/element type
4. universal
5. HTML attribute

This Rules Followed By Internal and External but Internal Always Comes First Then External.

CSS Fonts

CSS font is Very important part of CSS for Customizing Fonts in Our Webpage. We Can Customize this fonts using Css.
Change Font Weight
Change Color
Change line height (line gap between paragraph)
Change Font Size
Change Font Style

Example : -

<!DOCTYPE html>
<html>
<head>
 <title>CSS Style</title>
 <style type="text/css">
  #p1 {           color: red;font-size: 20px; }
  #p2{   font-family: sans-serif;  line-height: 40px;  }
  #p3{   font-style: italic;font-weight: 600;  }
 </style>
</head>
<body>
 <p id="p1">I am p1 text  with css font property color red and font size 20px </p>
<p id="p2">I am p2 text with css font property font family sans-serif and line height 20px</p>
 <p id="p3">I am p3 with css property font style italic and font weight 600</p>
</body>
</html>

CSS Box Model

All elements in HTML can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

Css BOX Model is Wraps HTML elements.It consists of: margins, borders, padding, and the content.

CSS Box Model Example

<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<style type="text/css">
body{
padding: 10px;
background: red;
}
#box{
margin: 20px;
padding: 20px;
border:10px solid yellow;
}
</style>
</head>
<body>
<div id="box">
<p>I m inside a box Model</p>
</div>
</body>
</html>

Results :

Thanks.

Video Demo.

Breaking

Post Top Ad

Post Top Ad

Sunday, May 20, 2018

CSS Basics Tutorial