Scribd
Upload
0 views

Css (Cascading Style Sheet)

CSS, or Cascading Style Sheets, is a language used to style HTML documents, allowing control over design, layout, and display variations for different devices. It consists of selectors and declaration blocks, with various types of selectors such as element, id, and class selectors to target specific HTML elements. CSS can be applied inline, internally within a document, or externally through linked CSS files, with external styles being the preferred method for maintaining consistency across multiple pages.

Uploaded by

onyinyeinnocentia32
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0 views

Css (Cascading Style Sheet)

CSS, or Cascading Style Sheets, is a language used to style HTML documents, allowing control over design, layout, and display variations for different devices. It consists of selectors and declaration blocks, with various types of selectors such as element, id, and class selectors to target specific HTML elements. CSS can be applied inline, internally within a document, or externally through linked CSS files, with external styles being the preferred method for maintaining consistency across multiple pages.

Uploaded by

onyinyeinnocentia32
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

CSS (CASCADING

STYLE SHEET)
CSS was introduced together with HTML 4, to provide a better way
to style HTML elements. Styles were added to HTML 4.0 to solve a
problem
What is CSS?
 CSS stands for Cascading Style Sheets

 CSS is a language that describes the style of an HTML document.

 CSS describes how HTML elements should be displayed.

 CSS is used to control the style of a web document in a simple and easy
way.
•
•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.
CSS Syntax and Selectors
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.
Example

In this example all <p> elements will be center-aligned, with a red


text color:
•p {
color: red;
text-align: center;
}
CSS Selectors

CSS selectors are used to "find" (or select) HTML elements based on their
element name, id, class, attribute, and more.
The element Selector
 The element selector selects elements based on the element name.

Example

 You can select all <p> elements on a page like this (here, all <p> elements will be center-
aligned, with a red text color):

p{

text-align: center;

color: red;
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.

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.

Example

The style rule below will be applied to the HTML element with id="para1":

#para1 {

text-align: center;

color: red;

• Note: An id name cannot start with a number!


The class Selector
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.

Example
 In this example all HTML elements with class="center" will be red and center-aligned:

.center {

text-align: center;

color: red;

}
•
You can also specify that only specific HTML elements should be affected by a class. Example
In this example only <p> elements with class="center" will be center-aligned:
p.center {
text-align: center;
color: red;
}

 HTML elements can also refer to more than one class.

 Example

 In this example the <p> element will be styled according to


class="center" and to class="large":
 <p class="center large">This paragraph refers to two classes.</p>

Note: A class name cannot start with a number!


Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {

}
h2 {

p{
text-align: center;

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


 To group selectors, separate each selector with a comma.

 Example

 In this example we have grouped the selectors from the code above:

 h1, h2, p {
text-align: center;
color: red;
}
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.


Example
 A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

 p{
color: red;
/* This is a single-line comment */
text-align: center;
}
Note:
CSS can be added to HTML in the following ways:
 Inline - using the style attribute in HTML elements

 Internal - using the <style> element in the <head> section

 External - using an external CSS file

 The preferred way to add CSS to HTML is to put CSS syntax in separate CSS files.
INLINE STYLES
 An inline style can be used if a unique style is to be applied to one single occurrence of
an element.

 To use inline styles, use the style attribute in the relevant tag. The style attribute can
contain any CSS property.

 The example below shows how to change the text color and the left margin of a paragraph:

• <p style="color:blue;margin-left:20px;">This is a paragraph.</p>


HTML Style Example - Background Color

 The background-color property defines the background color for an element:


 Example

<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;"> This is a paragraph.</p>
</body>
</html>
Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal styles are defined
in the <head> section of an HTML page, by using the <style> tag, like this:
<head>
<style>
 body {background-color:yellow;}
 p {color:blue;}
</head>
External Style Sheet
 An external style sheet is ideal when the style is applied to many pages.
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files
 With an external style sheet, you can change the look of an entire Web site by changing one file.
 Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head>
section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Example mystle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

You might also like