Scribd
Upload
29 views26 pages

CSS-Cascading Style Sheets

This document discusses different types of CSS selectors including element, id, class, universal, grouping, and attribute selectors. It also covers how to add CSS through external, internal, and inline styles and describes CSS properties for colors, borders, and text.

Uploaded by

Darshi Karunarathne
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
29 views26 pages

CSS-Cascading Style Sheets

This document discusses different types of CSS selectors including element, id, class, universal, grouping, and attribute selectors. It also covers how to add CSS through external, internal, and inline styles and describes CSS properties for colors, borders, and text.

Uploaded by

Darshi Karunarathne
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/ 26

CSS-Cascading Style

Sheets
CSS is the language we use to style an HTML document.
CSS Selectors
• We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)


• Combinator selectors (select elements based on a specific
relationship between them)
• Pseudo-class selectors (select elements based on a certain
state)
• Pseudo-elements selectors (select and style a part of an
element)
• Attribute selectors (select elements based on an attribute or
attribute value)
The CSS element Selector
• The element selector selects HTML elements based on
the element name.
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.
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.
The CSS Universal Selector
• The universal selector (*) selects all HTML elements on
the page.
The CSS Grouping Selector

• The grouping selector selects all the HTML elements with the same
style definitions.

• Look at the following CSS code (the h1, h2, and p elements have the
same style definitions):
How To Add CSS

• Three Ways to Insert CSS


• There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS
External CSS

• With an external style sheet, you can change the look of


an entire website by changing just one file!
• Each HTML page must include a reference to the
external style sheet file inside the <link> element,
inside the head section.
• An external style sheet can be written in any text editor, and must be
saved with a .css extension.

• The external .css file should not contain any HTML tags.

• Here is how the "mystyle.css" file looks:


Internal CSS

• An internal style sheet may be used if one single HTML


page has a unique style.
• The internal style is defined inside the <style> element,
inside the head section.
Inline CSS

• An inline style 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
CSS Colors
• CSS Background Color
CSS Text Color
CSS Border Color
CSS Border Style

You might also like