Introduction to CSS
Cascading Style Sheets(CSS) is a fundamental technology used for styling and formatting web documents. It complements HTML (Hypertext Markup Language) by defining how web content should be presented and visually displayed i n web browsers.
CSS can be added to a HTML page in the form of :
inline-css embedded css external css
Next
Next
Skip
What does CSS stand for?
Computer Style Sheets
Creative Style Sheets
Colorful Style Sheets
Cascading Style Sheets
Next
Show Answer
Skip
Selectors and Declarations
CSS uses selectors t o target HTML elements and declarations to define the style rules for those elements. A declaration consists of a property and a value.
h1 {color: blue ;
Next
Next
Skip
The
determine which elements a style rule applies to.
Next
Show Answer
Skip
Example CSS Sheet
body {
background-color : #f0f0f0 ;
font-family : Arial, sans-serif ;
margin : 0 ;
padding : 0 ;
}
/* Style headings */
h1 {
color : #333 ;
}
/* Style paragraphs */
p {
font-size : 16px ;
line-height : 1 .5 ;
margin-bottom : 20px ;
}
Next
Next
Skip
Which CSS property is used to change the text color of an element?
font-size
color
text-align
background-color
Next
Show Answer
Skip
Inline Stylesheet
Inline styles are applied directly to individual HTML elements using the style attribute.
<p style="color: blue; font-size: 16px;">This is a blue paragraph with a custom font size.</p> Pros:
Quick and easy to implement for individual elements. Useful for making small, one-off styling changes. Cons:
Can result in code repetition if applied to multiple elements. Not well-suited for maintaining consistent styles across multiple pages.
Next
Next
Skip
An
style sheet is used to apply styles to a specific HTML element.
Next
Show Answer
Skip
Embedded Stylesheet
Embedded styles are defined within the HTML document using a <style> element in the document's <head> section.
<head> Pros:
Allows for styling multiple elements within a single HTML document. Provides better organization and separation of concerns compared to inline styles. Cons:
Styles are still within the HTML document, so they are not reusable across multiple pages. May become unwieldy as styles become more complex.
Next
Next
Skip
To use an
style sheet, the style element is used within the head section of an HTML document.
Next
Show Answer
Skip
External Stylesheet
External styles are stored in separate .css files and linked to HTML documents using the <link> element.
<!-- In the HTML document's head section --> /* In the external CSS file (styles.css) */
p { Pros:
Promotes clean separation of HTML and CSS, enhancing code maintainability. Enables the reuse of styles across multiple HTML documents. Easier to manage and update styles in larger projects. Cons:
Requires an additional HTTP request to load the external CSS file. Not suitable for making quick, one-off style changes for individual elements.
Next
Next
Skip
external CSS
Next
Show Answer
Skip
Activity Complete
