[go: up one dir, main page]
Scribd
Upload
93 views10 pages

CSS Syntax: Cascading Style Sheet (CSS)

CSS (Cascading Style Sheets) allows styling and layout of HTML documents. CSS describes how HTML elements are displayed on different devices and saves work by controlling page styling across multiple web pages from a single CSS file. CSS rules consist of selectors that point to HTML elements to style along with declaration blocks containing property-value pairs to style elements with specific properties like color, text alignment, and background color. Comments can also be added to CSS to explain the code.

Uploaded by

Jonathan Jeevaratnam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
93 views10 pages

CSS Syntax: Cascading Style Sheet (CSS)

CSS (Cascading Style Sheets) allows styling and layout of HTML documents. CSS describes how HTML elements are displayed on different devices and saves work by controlling page styling across multiple web pages from a single CSS file. CSS rules consist of selectors that point to HTML elements to style along with declaration blocks containing property-value pairs to style elements with specific properties like color, text alignment, and background color. Comments can also be added to CSS to explain the code.

Uploaded by

Jonathan Jeevaratnam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Cascading Style Sheet (CSS)

 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

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 Syntax
A CSS rule-set consists of a selector and a declaration block:

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.

A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.

1
<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>

The id of an element should be 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.

<html>

<head>

<style>

p{

text-align: center;

color: red;

2
}

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

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

3
The class selector selects elements with a specific class attribute.

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

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

<html>

<head>

<style>

p.center {

text-align: center;

color: red;

</style>

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

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

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

5
</html>

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 starts with /* and ends with */. Comments can also span multiple
lines:

<style>

p{

color: red;

/* This is a single-line comment */

text-align: center;

/* This is

a multi-line

comment */

</style>

</head>

Colors in CSS are most often specified by:

 a valid color name - like "red"


 an RGB value - like "rgb(255, 0, 0)"
 a HEX value - like "#ff0000"

<html>

<body>

6
<h2>Color Names Examples</h2>

<p>Note: You will learn more about the background-color and the color property later in our tutorial.</p>

<h2 style="background-color:red">

Red background-color

</h2>

<h2 style="background-color:green">

Green background-color

</h2>

</body>

</html>

<html>

<body>

<h2>RGB Color Examples</h2>

<h2 style="background-color:rgb(255, 0, 0)">

Background-color set by using rgb(255, 0, 0)

</h2>

<h2 style="background-color:rgb(0, 255, 0)">

Background-color set by using rgb(0, 255, 0)

</h2>

<h2 style="background-color:rgb(0, 0, 255)">

Background-color set by using rgb(0, 0, 255)

</h2>

7
<h2 style="background-color:rgb(255, 165, 0)">

Background-color set by using rgb(255, 165, 0)

</h2>

</body>

</html>

<html>

<body>

<h2>HEX Color Examples</h2>

<h2 style="background-color:#FF0000">

Background-color set by using #FF0000

</h2>

<h2 style="background-color:#00FF00">

Background-color set by using #00FF00

</h2>

</body>

</html>

The background-color property specifies the background color of an element.

<html>

<head>

<style>

body {

background-color: lightblue;

</style>

</head>

8
<body>

<h1>Hello World!</h1>

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

</body>

</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>
9
</body>

</html>

10

You might also like