Scribd
Upload
41 views

CSS Introduction

CSS (Cascading Style Sheets) is a language used to style and lay out web pages. CSS allows you to control the color, font, size, spacing and layout of text, images, and other HTML elements. CSS rules are made up of selectors that point to HTML elements and declaration blocks that contain styles that are applied to selected elements. External CSS files can store stylesheets that control the presentation of multiple web pages, reducing work and allowing global styling changes by editing one file.

Uploaded by

ponmadhan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
41 views

CSS Introduction

CSS (Cascading Style Sheets) is a language used to style and lay out web pages. CSS allows you to control the color, font, size, spacing and layout of text, images, and other HTML elements. CSS rules are made up of selectors that point to HTML elements and declaration blocks that contain styles that are applied to selected elements. External CSS files can store stylesheets that control the presentation of multiple web pages, reducing work and allowing global styling changes by editing one file.

Uploaded by

ponmadhan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 26

CSS 

Introduction
CSS is the language we use to style a Web page.

What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages
all at once
 External stylesheets are stored in CSS files

CSS Demo - One HTML Page - Multiple


Styles!
Here we will show one HTML page displayed with four different stylesheets.
Click on the "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" links
below to see the different styles:

Why Use CSS?


CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;
}

h1 {

color: white;

text-align: center;

p{

font-family: verdana;

font-size: 20px;

</style>

</head>

<body>

<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>

</body>

</html>

CSS Solved a Big Problem


HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
websites, where fonts and color information were added to every single page,
became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

If you don't know what HTML is, we suggest that you read our HTML Tutorial.

CSS Saves a Lot of Work!


The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by
changing just one file!

CSS Syntax
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.

<!DOCTYPE html>

<html>

<head>

<style>

p{

color: red;

text-align: center;

</style>

</head>

<body>

<p>Hello World!</p>

<p>These paragraphs are styled with CSS.</p>

</body>

</html>

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

CSS Selectors
A CSS selector selects the HTML element(s) you want to style.
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to
style.

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)

<!DOCTYPE html>

<html>

<head>

<style>

p{

text-align: center;

color: red;

</style>

</head>

<body>

<p>Every paragraph will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.

The id of an element is unique within a page, so the id selector is used to select


one unique element!

To select an element with a specific id, write a hash (#) character, followed by
the id of the element.

Example
<!DOCTYPE html>

<html>

<head>

<style>

#para1 {

text-align: center;

color: red;

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by
the class name.

Example
<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: red;

</style>

</head>

<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.center {
text-align: center;

color: red;

</style>

</head>

<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.center {

text-align: center;

color: red;

p.large {

font-size: 300%;

</style>

</head>

<body>

<h1 class="center">This heading will not be affected</h1>


<p class="center">This paragraph will be red and center-aligned.</p>

<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>

</body>

</html>

The CSS Universal Selector


The universal selector (*) selects all HTML elements on the page.

<!DOCTYPE html>

<html>

<head>

<style>

*{

text-align: center;

color: blue;

</style>

</head>

<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>
</html>

The CSS Grouping Selector


The grouping selector selects all the HTML elements with the same style
definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style
definitions):

<!DOCTYPE html>

<html>

<head>

<style>

h1, h2, p {

text-align: center;

color: red;

</style>

</head>

<body>

<h1>Hello World!</h1>

<h2>Smaller heading!</h2>

<p>This is a paragraph.</p>

</body>

</html>
All CSS Simple Selectors

Selector Example Example description

#id #firstname Selects the element with id="firstname"

.class .intro Selects all elements with class="intro"

element.class p.intro Selects only <p> elements with class="intro"

* * Selects all elements

element p Selects all <p> elements

element,element,.. div, p Selects all <div> elements and all <p> elements

CSS Comments
CSS comments are not displayed in the browser, but they can help
document your source code.
CSS Comments
Comments are used to explain the code, and may help when you edit the
source code at a later date.

Comments are ignored by browsers.

A CSS comment is placed inside the <style> element, and starts with /* and


ends with */:

<!DOCTYPE html>

<html>

<head>

<style>

/* This is a single-line comment */

p{

color: red;

</style>

</head>

<body>

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>
<style>

p{

color: red; /* Set text color to red */

</style>

</head>

<body>

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

/* This is

a multi-line

comment */

p{

color: red;

</style>

</head>

<body>
<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

</body>

</html>

HTML and CSS Comments


From the HTML tutorial, you learned that you can add comments to your HTML
source by using the <!--...--> syntax.

In the following example, we use a combination of HTML and CSS comments:

<!DOCTYPE html>

<html>

<head>

<style>

p{

color: red; /* Set text color to red */

</style>

</head>

<body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>


<p>HTML and CSS comments are not shown in the output.</p>

</body>

</html>

CSS Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values.

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:Tomato;">Tomato</h1>

<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

<h1 style="background-color:Gray;">Gray</h1>

<h1 style="background-color:SlateBlue;">SlateBlue</h1>

<h1 style="background-color:Violet;">Violet</h1>

<h1 style="background-color:LightGray;">LightGray</h1>

</body>

</html>

<!DOCTYPE html>

<html>

<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.

</p>

</body>

</html>

CSS Text Color


You can set the color of text:

<!DOCTYPE html>

<html>

<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>

</html>

<!DOCTYPE html>
<html>

<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>

<h1 style="background-color:#ff6347;">#ff6347</h1>

<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even
transparent colors using RGBA or HSLA color values.</p>

</body>

</html>

CSS RGB Colors
An RGB color value represents RED, GREEN, and BLUE light sources.

RGB Value
In CSS, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255) and the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>

</html>

Other Elements
You can set the background color for any HTML elements:
Example
<!DOCTYPE html>

<html>

<head>

<style>

h1 {

background-color: green;

div {

background-color: lightblue;

p{

background-color: yellow;

</style>

</head>

<body>

<h1>CSS background-color example!</h1>

<div>

This is a text inside a div element.

<p>This paragraph has its own background color.</p>

We are still in the div element.

</div>

</body>
</html>

CSS Background Image Repeat


CSS background-repeat
By default, the background-image property repeats an image both horizontally and
vertically.

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("gradient_bg.png");

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>Strange background image...</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>
body {

background-image: url("gradient_bg.png");

background-repeat: repeat-x;

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>Here, a background image is repeated only horizontally!</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>W3Schools background image example.</p>


<p>The background image only shows once, but it is disturbing the reader!</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>Here, the background image is only shown once. In addition it is positioned away from the text.</p>

<p>In this example we have also added a margin on the right side, so that the background image will not
disturb the text.</p>

</body>

</html>

CSS Background Attachment
CSS background-attachment
The background-attachment property specifies whether the background image
should scroll or be fixed (will not scroll with the rest of the page):

Example
<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

background-attachment: fixed;

</style>

</head>

<body>

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background image should scroll or be
fixed (will not scroll with the rest of the page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

background-attachment: scroll;

</style>

</head>

<body>

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background image should scroll or be
fixed (will not scroll with the rest of the page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>


<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

<p>The background-image scrolls. Try to scroll down the page.</p>

</body>

</html>

You might also like