CSS Tutorial

CSS stands for Cascading Style Sheets.
What is CSS?
➢ CSS is a Cascading Style Sheets
➢ CSS is used for layout and formatting of the web pages.
➢ Without CSS, designing web sites makes it difficult because the many lines of code are
written in HTML.
➢ Using HTML makes the process expensive and time consuming
➢ The reason being that every line of code has to be repeated when coding in HTML
➢ CSS was designed to enable the separation of presentation and content
➢ Formatting information of web pages can be moved to a separate style sheet
What CSS can do

➢ CSS makes it easy to apply same styles rules to various elements
➢ A single style sheet can be used to control multiple pages of a website
➢ The same page can be presented differently on different devices
➢ One can easily change the position of an element on a page without
changing the HTML tag associated with it
➢ Enables designers to create and print friendly version of their web pages
Advantages of Using CSS
➢ Provides a lot of flexibility thus saving a lot of time
➢ Allows for easy maintenance of the website
➢ Pages Load Faster
➢ Allows for Multiple Device Compatibility
How to add style and formatting information to the web pages using CSS
a) Using the Inline styles
➢ Use the style attribute in the HTML start tag
➢ Apply the unique style rules to an element directly into the start tag
➢ Use the following syntax: "property: value" and you can separate pairs with a
semi (;)
➢ Example
p{
color: red;
text-align: center;
}
Explanation
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 a value
b) Embedded styles
➢ Use the <style> element in the head section of a document
➢ Only affect the document they are embedded in

➢ A style sheets is defined in the <head> section of an HTML document
➢ The <style> element is used in this definition
➢ All style elements must be placed within the <head> and </head> tags
Example
<!DOCTYPE html>
<html lang="en">
<head> <title>My HTML Document</title>
<style> body { background-color: YellowGreen; } p { color: #fff; }
</style>
</head>
<body> <h1>This is a heading</h1> <p>This is a paragraph of
text.</p> </body>
</html>
c) External style sheets
➢ Use the <link> element to point to an external CSS file.
➢ Appropriate when the style is applied to many pages of the website
➢ The sheet holds all the style rules in a separate document that can be linked
to different html files
➢ External style sheets are the most flexible
➢ You can change the look of an entire website by changing just one html file
➢ Linking can be done by linking and importing techniques
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Importing External Style Sheets
The Import @import rule helps to load an external style sheet
Example
<style>
@import url("css/style.css");
p{
color: blue;
font-size: 16px;
}
Example 2
</style>
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}
CSS Syntax
➢ The Selector specifies which element or elements in the HTML page

the CSS rule
➢ The declarations within the block determines how the elements are
formatted on a webpage
➢ Each declaration consists of a property and a value separated by a colon
(:) and ending with a semicolon (;)
➢ Declaration groups are surrounded by curly braces {}
➢ The property is the style attribute you want to change;
➢ These could be font, color, background
➢ Each property has a value, for example color property can have value
either blue or #0000FF
Example
h1 {color:blue; text-align:center;}
Selectors
Class selector
Enables you to specify which elements are to receive a particular
style.
Example h1, h2, h3, can be made to have different colors instead of a
single color. This can be can be achieved by use of a class selector
Syntax
.class-name { property: value; }
Example
p.large { font-size: 2em; }
ID Selectors
Helps you to assign a unique identifier to an HTML element, then
style that element by referencing its unique identifier
Use the # instead of a dot operator
#id-name {property: value;}
Example
p#intro { font-size: 2em; }
Read on selectors, there are many of them
CSS animation
Use the animationn property in conjunction with
the @keyframes keyword/at-rule, which allows you to define visual
effects for your animation.
Example
<!DOCTYPE html>
<title>Example</title>
<style>
div.bounce {
width: 100px;
padding: 20px;
background: gold;
position: relative;
animation: bounce 1s ease-in 2s 6 alternate none;
}
@keyframes bounce {
from {
top: 0px;
left: 0px;
}
to {
top: 150px;
left: 150px;
}
}
</style>
<div class="bounce">Bouncing box...</

CSS Tutorial

Uploaded by

Copyright:

Available Formats

You might also like

CSS Tutorial

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Tutorial

Uploaded by

Copyright:

Available Formats

CSS stands for Cascading Style Sheets.

What CSS can do

color is a property, and red is the property value

➢ Use the <style> element in the head section of a document

➢ Only affect the document they are embedded in

➢ The Selector specifies which element or elements in the HTML page

You might also like