Tutorials without tears! Learn HTML, CSS, JavaScript and more

Tutorials without
tears !
KnowledgeisPOWER!
HTML
CSS
JavaScript
Jquery
SEO
Web
Development
App
Developer
Books
VideoTutorials
Slides

CSS
Know your
Used to style webpages
Cascading Style Sheets
Can be inserted Internally or Externally
Tells browsers how to display HTML files.

CSS Rules
Know your
A selector: Indicates what element to style
CSS Rules Consist of two main functions
Declaration Block containing other declarations
Each declaration block contains a property
name and value separated by a colon :
The block is then surrounded by a curly bracket
} which marks the end of the block

CSS Rules
Know your
color: blue;H1} font-size: 40px; }
Selector Declaration Declaration
Property PropertyValue Value
the heading text would be blue and font size of 20.

<head>
<title> My First Website </title>
<style>
h1 { color: blue; font-size: 40px;}
</style>
</head>
<body>
<div class=“content”>
<h1>welcome to our website</h1>
</body>
</html>
RUN >> OUTPUT
welcome to our website

External Style Sheet
Know your
Useful for multipage websites that share code
A link to this is placed within the head section
Saves time not inserting code in every page
Improves web page load time
Creates consistent look to all documents

<head>
<style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
h1 { color: blue; font-size: 40px;}
</style>
</head>
<body>
</body>
</html>
RUN >> OUTPUT
External Stylesheet

Hmmmm!!
Know your
The text is too close to the edge..
We can fix this by adding a margin-left property
This moves the text away from the left by ?px

<head>
<style>
}
h1 {
color: blue;font-size: 40px; margin-left:50px;
}
</style>
</head>
<body>
</body>
</html>
RUN >> OUTPUT
H1 Style

Body CSS
Know your
We can add a background colour to the page..

<head>
<style>
h1 {
}
body { background-color:silver;
}
</style>
</head>
<body>
</body>
</html>
RUN >> OUTPUT
Body CSS

Inline Style
Know your
Used for styling a single element on a page
Applied to specific elements with the <body> tags
All linked pages in an external stylesheet

<head>
<style>
h1 {
}
}
</style>
</head>
<body>
<h1 style=" color: blue;font-size: 40px; margin-left:50px;
">welcome to our website</h1>
</body>
</html>
RUN >> OUTPUT
Inline Style

Element ID’s
Know yourThis gives a group of elements their own ID
Can be used to style an individual element
# styles the element with the specified id
Syntax : #id {css declarations;}

}
}
#intro {
background-color: yellow;
color: black;
font-size: 16px;
font-family: verdana;
}
</style>
</head>
<body>
<div class="content">
<p id="intro">I love learning HTML.</p>
<p id="body">But CSS is even cooler.</p>
</div>
<p>Iam learning how to create a website.</p>
</body>
</html>
RUN >> OUTPUT
CSS #id Selector
But CSS is even cooler.
Iam learning how to create a website.
I love learning HTML.

Class Selector
Know yourPoints to the HTML element you want to style
Selects elements with a specific class attribute
Can be applied to a range of elements
Symbol (.) followed by the name of the class.

}
}
.intro {
background-color: blue;
color: white;
font-size: 16px;
font-family: Arial;
}
</style>
</head>
<body>
<div class="content">
<p id="intro">
<p>I love learning HTML.</p>
<p>But CSS is even cooler.</p>
</div>
<p>Iam learning how to create a website.</p>
</body>
</html>
RUN >> OUTPUT
CSS .class Selector
Iam learning how to create a website.
I love learning HTML.
But CSS is even cooler

You can follow more
tutorials in the book
https://gumroad.com/products/jyZwR/edit
https://payhip.com/b/CFQu

Tutorials without tears! Learn HTML, CSS, JavaScript and more

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Tutorials without tears! Learn HTML, CSS, JavaScript and more

Similar to Tutorials without tears! Learn HTML, CSS, JavaScript and more (20)

Recently uploaded

Recently uploaded (20)

Tutorials without tears! Learn HTML, CSS, JavaScript and more