Podcast
Questions and Answers
What does CSS stand for?
What does CSS stand for?
Cascading Style Sheet
What is the main purpose of CSS?
What is the main purpose of CSS?
To control the presentation and styling of web pages.
How many ways are there to insert CSS into HTML?
How many ways are there to insert CSS into HTML?
Three
External style sheets are ideal for applying styles to a single web page.
External style sheets are ideal for applying styles to a single web page.
What is the name of the tag used to link an external style sheet to an HTML document?
What is the name of the tag used to link an external style sheet to an HTML document?
An external style sheet should contain HTML tags.
An external style sheet should contain HTML tags.
Where are internal styles defined within an HTML document?
Where are internal styles defined within an HTML document?
What are the four CSS selector types?
What are the four CSS selector types?
What does the . symbol indicate in a CSS selector?
What does the . symbol indicate in a CSS selector?
What is the purpose of a Pseudo selector?
What is the purpose of a Pseudo selector?
Flashcards
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
A style sheet language used to describe the presentation of a document written in a markup language like HTML. It allows for styling elements across a webpage, from global to specific elements.
Cascading
Cascading
The process where multiple styles applied to the same element are combined to produce the final appearance. Styles are applied according to specific rules.
Style
Style
The visual aspect of a webpage, including colors, fonts, layout, and other presentation elements.
External Style Sheet
External Style Sheet
A separate CSS file that is linked to an HTML document. Styles are defined in the external file and applied to the HTML.
Signup and view all the flashcards
Internal Style Sheet
Internal Style Sheet
CSS styles defined within the head section of an HTML document. These styles apply only to that specific HTML document.
Signup and view all the flashcards
Inline Style Sheet
Inline Style Sheet
Applying CSS styles directly within the HTML element tags themselves. This style is less organized.
Signup and view all the flashcards
Multiple Style Sheets
Multiple Style Sheets
Using a combination of external, internal, and inline styles. The order and specificity of style rules determine which styles are applied.
Signup and view all the flashcards
Selector
Selector
In CSS, a way to target and style certain HTML elements.
Signup and view all the flashcards
Element Selector
Element Selector
Targets all HTML elements of a specific type (e.g., all paragraphs).
Signup and view all the flashcards
Class Selector
Class Selector
Targets HTML elements with a specific class attribute value.
Signup and view all the flashcards
ID Selector
ID Selector
Targets a single, unique HTML element based on its id attribute value.
Signup and view all the flashcards
Pseudo-Selector
Pseudo-Selector
Applies styles based on specific states or conditions of an element (e.g., when the mouse hovers over a link).
Signup and view all the flashcards
a:hover
a:hover
A pseudo-selector that applies styles to an element when the user's mouse hovers over it.
Signup and view all the flashcards
a:link
a:link
A pseudo-selector that applies styles to an unvisited link.
Signup and view all the flashcards
a:visited
a:visited
A pseudo-selector that applies styles to a link that has been visited.
Signup and view all the flashcards
Cascading Order
Cascading Order
The specific order in which CSS styles are applied when multiple styles are defined for the same element.
Signup and view all the flashcards
Use HTML for content
Use HTML for content
HTML is used to structure and define the content of a web page.
Signup and view all the flashcards
Use CSS for presentation
Use CSS for presentation
CSS is used to style and format the contents of a web page.
Signup and view all the flashcards
Browser default
Browser default
The style applied to an element by the browser if no other style is specified.
Signup and view all the flashcards
External CSS file
External CSS file
A separate file containing CSS rules, linked to the HTML document.
Signup and view all the flashcards
Internal CSS
Internal CSS
CSS rules defined within the HTML document.
Signup and view all the flashcards
Inline CSS
Inline CSS
CSS rules are applied directly within HTML elements’ attributes.
Signup and view all the flashcards
font-weight
font-weight
Property used for controlling the boldness of text.
Signup and view all the flashcards
background: color
background: color
Changes the background color of an element.
Signup and view all the flashcardsStudy Notes
Programming Languages
- Common programming languages: Python, Java, C++, Perl, JavaScript, PHP
- These languages are often visualized in diagrams to display visual relationships between various technologies and concepts.
Cascading Style Sheets (CSS)
- Objectives: To explain and introduce the concept and use of Client Side Script (CSS)
- Cascading: Multiple styles may overlap to fully customize specific elements, following CSS cascading logic
- Style: Deals specifically with the presentation of web pages—including colour, fonts, layout, and more
- Sheet: Typically, a separate file from an HTML file, linked to the HTML file via the
<head>tag (though exceptions exist).
Why CSS?
- Enhances document appearance beyond typical HTML
- Centralizes visual commands, reducing workload on HTML documents.
- Enables using the same style across multiple pages for consistency
- Reduces page download size.
- HTML handles content and CSS handles presentation.
Referencing CSS from HTML
- Employ the
<link>tag within the<head>section to connect the external style sheet to the HTML file.- example:
<link rel="stylesheet" type="text/css" href="siti.css" />
- example:
CSS Syntax
- Selectors: Choose HTML page elements.
- Style Block: The block of code that applies styles to selected elements.
- Style Values: Applied to selected element properties.
- Typical structure: Selector { Property: Value; Property: Value; ... }
CSS Color Definition
- Methods:
- Valid Colour Names (e.g., blue)
- HEX Values (e.g., #FFFFFF for white )
- RGB Values (e.g., rgb(76, 175, 80) for a light green )
How to Insert CSS into HTML
- Methods:
- External Style Sheet: Ideal when applying styles to many pages by changing one file. The
<link>tag in the HTML file's<head>area links to the external CSS file. The CSS file must have a.cssextension . External CSS files cannot contain HTML tags. - Internal Style Sheet: Used for a single document with unique formatting. The
<style>tag in the HTML file's<head>section includes the internal CSS rules. - Inline Style: Used sparingly; adding CSS attributes directly within the tag. Usually applied to individual tags to override external or internal styles.
- External Style Sheet: Ideal when applying styles to many pages by changing one file. The
Multiple Style Sheets (External + Internal + Inline)
- Inheritance:If multiple style sheets apply rules to a selector, the more specific rule is used, overriding previous rules.
- External styles, internal styles, and inline styles can be combined and prioritized.
- Inline styles have the highest priority.
CSS Selectors
- Types:
- Element Selectors: Choose elements by type e.g
(h1) - Class Selectors: Select elements with a specific class e.g
(.legs) - ID Selectors: Select a single element with a unique ID e.g
(#snout) - Pseudo Selectors: Select elements based on a specific state e.g
(a:hover)
- Element Selectors: Choose elements by type e.g
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
