Scribd
Upload
26 views

CSS Essential Training

Uploaded by

[L]Jinesh pande
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views

CSS Essential Training

Uploaded by

[L]Jinesh pande
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 42

CSS Essential training

CHAPTER 1:
1.HTML and CSS -

HTML CSS

CSS is a style sheet language used to


HTML is a markup language used to define
style the web pages by using different
a structure of a web page.
styling features.

It consists of tags inside which text is It consists of selectors and declaration


enclosed. blocks.

CSS can be internal or external


HTML doesn’t have further types.
depending upon the requirement.

We can use CSS inside an HTML


We cannot use HTML inside a CSS sheet.
document.

HTML is not used for presentation and CSS is used for presentation and
visualization. visualization.

HTML has comparatively less backup and CSS has comparatively higher backup
support. and support.

HTML doesn’t allow animations and CSS allows animation and transitions
transitions. which helps to improve the UI.

HTML files are saved


CSS files are saved with .css extension.
with .htm or .html extension.

3. Referencing CSS :
 There are 3 way Css can added to HTML. 1 )External,2)Internal,
3) Inline.
 There are the 2 diff ways to Load External CSS file with a Link
tag or using the @import method.
# External Css with <link>
 Always refernced within the <head> of the document
<head>
<link rel = “stylesheet” href = “css/style.css”>
</head>

# External Css with @import

# Inline Css :
#Internal CSS :

#Relative Path :
#Absolute Path :

CHAPTER 2
Css Syntanx :
A CSS rule consists of a selector and a declaration block.

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.

Multiple CSS declarations are separated with semicolons, and declaration blocks
are surrounded by curly braces.

Example
In this example all <p> elements will be center-aligned, with a red text color:

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

Example Explained

 p is a selector in CSS (it points to the HTML element you want to style:
<p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value
Pseudo Classes :
HTML :
<a>no href</a>
<a href="#">link</a>
<a href="#">:visited</a>
<a href="#">:hover</a>
<a href="#">:active</a>
<a href="##">:focus</a>
CSS:
body {
font-size: 20px;
}
a{
/* color: red; */
}
a:link {
color: green;
}
a:visited {
color: gray;
}
a:focus {
/* outline: 1px solid black; */
}
a:hover {
background: gray;
}
a:active {
color: white;
}
CHAPTER 3 The Box Model
There are Five properties that make up the Box Model.
There are two type of HTML element : inline element and block
level.
https://codepen.io/christinatruong/pen/xxaYNLK

You might also like