Scribd
Upload
19 views

Chapter Three

CSS is a language used to style and lay out web pages. It allows control over elements' appearance like color, size, and positioning. There are three ways to apply CSS - inline with HTML tags, internally in <style> tags, or externally in .css files. CSS rules consist of selectors that point to elements and declaration blocks that set properties and values to style them. Properties control things like text styling, spacing, borders, and alignment.

Uploaded by

Abdurezak Ahmed
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
19 views

Chapter Three

CSS is a language used to style and lay out web pages. It allows control over elements' appearance like color, size, and positioning. There are three ways to apply CSS - inline with HTML tags, internally in <style> tags, or externally in .css files. CSS rules consist of selectors that point to elements and declaration blocks that set properties and values to style them. Properties control things like text styling, spacing, borders, and alignment.

Uploaded by

Abdurezak Ahmed
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/ 16

Chapter 3: Styling HTML with CSS

What is CSS?
• CSS stands for Cascading Style Sheets
• It is a language that describes the style of an HTML document.
• It describes how HTML elements should be displayed.
• It 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.

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

2
CSS Padding properties

• CSS padding properties are used


to generate space around an
element's content, inside of any
defined borders.
• The following are padding
individual sides

3
Border style

• Border style properties specifies what kind of border to display


• The following values are allowed:

•dotted - Defines a dotted border


•dashed - Defines a dashed border
•solid - Defines a solid border
•groove - Defines a 3D grooved border. The effect depends on the border-
color value
•ridge - Defines a 3D ridged border. The effect depends on the border-
color value
•inset - Defines a 3D inset border. The effect depends on the border-color
value
4
Border style…

5
The CSS Text Alignment/Direction

6
The CSS Text Spacing Properties

7
CSS text-decoration

8
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.
• here all <p> elements will be center- aligned, with a red text color:

9
CSS Selectors
• 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, 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.

10
CSS Selectors
• 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.
• In this example all HTML elements with class="center" will be red and
center-aligned: 

11
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.
• A CSS comment starts with /* and ends with */. Comments can also
span multiple lines:
• Example:

12
Types of CSS
• 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.

13
Types of CSS…

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


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

15
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: like the following

16

You might also like