Scribd
Upload
11 views

Lec 4 (Introduction of CSS With Properties)

Uploaded by

ulain7049
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

Lec 4 (Introduction of CSS With Properties)

Uploaded by

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

Web Engineering

Lec 4
Introduction of CSS With
properties

1
What is CSS?
• CSS stands for Cascading Style Sheets
• CSS is a language that describes the style of an
HTML document.
• It can control the layout of multiple web pages all at
once
• External style definitions are normally saved in
external .css files.

2
CSS Syntax
• A CSS rule-set consists of a selector and a
declaration block:

• CSS selectors are used to select HTML elements


based on their element name, id and class. 3
Grouping Selectors
• To group selectors, separate each selector with
a comma.

4
How To Insert CSS

• Three Ways to Insert CSS


• External style sheet
• Internal style sheet
• Inline style

5
External Style Sheet
• Each page must include a reference to the external style sheet file inside the <link>
element. The <link> element goes inside the <head> section:
Style.css

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

7
Inline Styles
• An inline style may be used to apply a unique style for a single
element.

8
CSS Box Model
• In CSS, the term "box model" is used when talking about design and
layout.
• The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual
content. The image below illustrates the box model:

9
1-CSS Margins
• The CSS margin properties are used to create space around elements, outside of any defined borders.
• There are four properties for setting the margin for each side of an element (top, right, bottom, and left)
having values as auto,length,%,inherit.

10
 Use the margin shorthand property with four values:

11
 If the margin property has three values:

12
If the margin property has two values:

13
If the margin property has one values:

14
2-CSS Padding
• The CSS padding properties are used to create space around elements, inside of any defined borders.
• There are four properties for setting the padding for each side of an element (top, right, bottom, and left)
having values as length,%, inherit.

15
 Use the padding shorthand property with four values:

16
 If the padding property has three values:

17
If the padding property has two values:

18
If the padding property has one values:

19
3- Background Color

20
4- Text Color

21
5-Border Color

22
6-Height and Width

23
7- Fonts

24
Questions

25

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy