Scribd
Upload
4 views

Cascading Style Sheets

Uploaded by

Camille Aday
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Cascading Style Sheets

Uploaded by

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

Cascading Style Sheets (CSS)

• CSS stands for Cascading Style Sheets


• It is a way for web designers to enhance and improve the presentation of their
documents.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
Css syntax

• A CSS rule has two main parts: a selector, and one or more declarations:

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

p{
color: red;
text-align: center;
}

CSS SELECTOR - Used to "find" (or select) HTML elements based on their element name, id,
class, attribute, and more

CSS ELEMENT SELECTOR - selects elements based on the element name

Example
p{
text-align: center;
color: red;
}
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
.center {
text-align: center;
color: red;
}
• You can also specify that only specific HTML elements should be affected by a class.
Example
p.center {
text-align: center;
color: red;
}
GROUPING SELECTORS
Note:
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}

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


• To group selectors, separate each selector with a comma
Example
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
later.
 Comments are ignored by browsers.
 A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

Example
p{
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is
a multi-line
comment */

3 WAYS TO CREATE CSS


1. EXTERNAL STYLE SHEET

• The External Style Sheets allows you to place all your CSS rules in a separate plain-text file and
connect it to your documents.
• External Style sheets are saved with the file extension “.css” and it is connected through the use
of the link element.
• The link element should always be within the document header, <head>, element.

Example
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Here is how the “style.css" looks:

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
2. INTERNAL STYLE SHEET

• may be used if one single page has a unique style


• Internal styles are defined within the <style> element, inside the <head> section of an HTML
page

Example

<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

3. INLINE STYLES

• may be used to apply a unique style for a single element


• To use inline styles, add the style attribute to the relevant element. The style attribute can contain
any CSS property

Example

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

EXAMPLE OF CSS:
Sizes
Padding and margin styles can be shorten too.
If you write them this way
• padding-left: 3px;
• padding-top: 4px;
• padding-bottom: 4px;
• padding-right: 3px;
Borders
• border-width: 1px;
• border-style: solid;
• border-color: #000;

Background
• background-color: #f00;
• background-image: url(background.gif);
• background-repeat: no-repeat;
• background-attachment: fixed;
• background-position: 0 0;

Fonts
• font-style: italic;
• font-variant: small-caps;
• font-weight: bold;
• font-size: 20px;
• line-height: 140%;
• font-family: "Lucida Grande",sans-serif;

Lists
• list-style-type: square;
• list-style-position: inside;
• list-style-image: url(image.gif);

You might also like