Scribd
Upload
23 views

CSS Tutorial

CSS stands for Cascading Style Sheets and is used to style and lay out web pages. CSS allows separation of document content from document presentation which makes web page design simpler and less time consuming. CSS controls elements like color, layout, font and more and can be applied internally, embedded in HTML, or through external style sheets for easier maintenance. CSS properties have selectors that specify elements to style and declarations that define styles with property-value pairs.

Uploaded by

Jaspher Abong'o
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

CSS Tutorial

CSS stands for Cascading Style Sheets and is used to style and lay out web pages. CSS allows separation of document content from document presentation which makes web page design simpler and less time consuming. CSS controls elements like color, layout, font and more and can be applied internally, embedded in HTML, or through external style sheets for easier maintenance. CSS properties have selectors that specify elements to style and declarations that define styles with property-value pairs.

Uploaded by

Jaspher Abong'o
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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...</

You might also like