Scribd
Upload
39 views8 pages

Lecture 3 - Cascading Style Sheets (CSS)

Uploaded by

owronrawan74
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
39 views8 pages

Lecture 3 - Cascading Style Sheets (CSS)

Uploaded by

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

Second Year - 1st Semester Web Programming Assist. Lect.

Eman Karim

Lecture 3: Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is used to format the layout of a webpage. With
CSS, you can control the color, font, and size of text, the spacing between
elements, how elements are positioned and laid out, what background images
or background colors are to be used, different displays for different devices and
screen sizes, and much more!
The word cascading means that a style applied to a parent element will also
apply to all children elements within the parent. So, if you set the color of the
body text to "blue", all headings, paragraphs, and other text elements within the
body will also get the same color.
CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements.
• Internal - by using a <style> element in the <head> section.
• External - by using a <link> element to link to an external CSS file.
The most common way to add CSS, is to keep the styles in external CSS files.

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.
1
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

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

To use an external style sheet, add a link to it in the <head> section of each
HTML page.
CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

The most basic CSS selectors are:

1. The CSS element Selector

The element selector selects HTML elements based on the element name.

In the following example, all <p> elements on the page will be center-aligned,
with a red text color.

2
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

2. 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.
 To select an element with a specific id, write a hash (#) character, followed
by the id of the element.
 An id name cannot start with a number.

In the following example the CSS rule below will be applied to the HTML
element with id="id1".

3. 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.
 A class name cannot start with a number!

In the following example all HTML elements with class="center" will be red
and center-aligned.

3
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

4. The CSS Universal Selector

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

In the following example the CSS rule below will affect every HTML element on
the page.

4
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

5. The CSS Grouping Selector


 The grouping selector selects all the HTML elements with the same style
definitions.
 It will be better to group the selectors, to minimize the code.
 To group selectors, separate each selector with a comma.

In the following example we will grouped the selectors.

CSS Declaration

 The CSS color property defines the text color to be used.


 The CSS font-family property defines the font to be used.
 The CSS font-size property defines the text size to be used.
 The CSS text-align property defines the text alignment.
 The CSS border property defines a border around an HTML element.
 The CSS padding property defines a space between the text and the border.

5
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

 The CSS margin property defines a margin (space) outside the border.
 The CSS background-color property defines the background color.
 The CSS background-image property specifies an image to use as the background.

CSS Properties Values Examples

color: #0000ff; From #000000 to #ffffff

 Aqua
 BurlyWood
 CadetBlue
 Chocolate
color
color: Blue;  DarkKhaki
 DarkSalmon
 DarkSeaGreen
 IndianRed
 PaleGreen
 PaleVioletRed
 rgb(255, 0, 0)
 rgb(0, 255, 0)
color: rgb(255, 0, 0);  rgb(0, 0, 255)
 rgb(0, 0, 0)
 rgb(255, 255, 255)
font-family font-family: cambria;  algerian
 Forte
 Cambria
 Verdana
 MV Boli
accent-color accent-color: red; Use it with checkbox and radio
font-size font-size: 250%; You can use any size
text-align text-align: right;  center
 right
 left
text-transform text-transform: uppercase;  uppercase
 lowercase
 capitalize
font- weight font-weight: bold;  bold

6
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

font-style font-style: italic;  italic


::first-letter p::first-letter { font-size: 200%; This selector is used to add a style
color: #8A2BE2;} to the first letter of the specified
selector.
writing-mode writing-mode: vertical-lr; It specifies whether lines of text are
laid out horizontally or vertically.
overflow overflow: scroll; Add scrollbars when an element's
content is too big to fit in a specified
area.
border border: 2px solid SlateBlue;  solid
 dotted
 double
 dashed
padding padding: 40px; You can use any pixel scale.

margin  margin: 50px; Note: Pixel = 0.26 mm


 margin-left: 50px;
 margin-right: 50px;
background- background-color:Gray; You can use the same color
color mentioned above.
background- background- You can use any image.
image image: url("img.jpg");
width width: 250px; You can use any pixel scale.
height height: 250px; You can use any pixel scale.
float float: right;  right
 left
Note: This property for image
alignment.

Note : In HTML, 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 with a
value between 0 and 255.
 This means that there are 256 x 256 x 256 = 16777216 possible colors!

7
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

 For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255), and the other two (green and blue) are set to 0.
 Another example, rgb(0, 255, 0) is displayed as green, because green is set to its
highest value (255), and the other two (red and blue) 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).

In the following example we will try to use the CSS properties.

You might also like