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
