Scribd
Upload
2 views

CSS3_Exam_Summary

The document provides an overview of CSS3, detailing its purpose of separating content from presentation and its compatibility with previous versions. It covers writing CSS through inline, internal, and external methods, along with the benefits of reusable code and consistent styling. Additionally, it explains CSS syntax, selectors, the cascade and priority of styles, text styling, colors, the box model, layout and positioning, media queries, and dynamic pseudo-classes.

Uploaded by

nourarif1234
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

CSS3_Exam_Summary

The document provides an overview of CSS3, detailing its purpose of separating content from presentation and its compatibility with previous versions. It covers writing CSS through inline, internal, and external methods, along with the benefits of reusable code and consistent styling. Additionally, it explains CSS syntax, selectors, the cascade and priority of styles, text styling, colors, the box model, layout and positioning, media queries, and dynamic pseudo-classes.

Uploaded by

nourarif1234
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

CSS3 Exam Summary

1. Introduction to CSS3
Definition: Cascading Style Sheets (CSS) define the visual appearance of HTML content.

Purpose: Separates content (HTML) from presentation (CSS).

CSS3: The latest version, compatible with previous versions.

2. Writing CSS
Inline: Directly within HTML elements using the 'style' attribute (least recommended).

Internal: Within a <style> block inside the <head> section of an HTML file.

External: In a separate .css file linked via <link> in HTML (most recommended).

3. Benefits of Using CSS


Reusable code across multiple pages.

Consistent appearance by modifying one file.

Cleaner and more readable HTML structure.

4. CSS Syntax
Selector {

property: value;

Example: p { color: blue; font-size: 16px; }


5. Selectors
Basic: Targets by element, class (.className), or ID (#idName).

Advanced:

- Universal (*): Targets all elements.

- Descendant (parent child): Targets child elements inside parent.

- Adjacent sibling (element1 + element2): Targets element2 immediately following


element1.

-
6. The Cascade and Priority
External < Internal < Inline styles in terms of specificity.

Later rules in the stylesheet override earlier ones for the same selector.

IDs > Classes > Tags in specificity.

7. Styling Text
font-size:

- Absolute: Pixels (e.g., font-size: 16px;).

- Relative: Em or percentages or klem (e.g., font-size: 1.5em;). (xx-small, x-small, small,


medium, large, x-large, xx-large)

font-family: Use generic families (e.g., Serif, Sans-serif, Monospace, Cursive, Fantasy).

Example: font-family: Arial, Helvetica, sans-serif;

font-style: Normal, Italic, or Oblique

font-weight: Bold or Normal

text-decoration: Underline, Line-through, Overline, or None

text-align: Left, Right, Center, or Justify .

8. Colors
Text: color:

Background: background-color:

 Formats: Named colors (e.g., Red), Hex codes (e.g., #FF5733), or RGB (rgb(255, 0, 0)).

9. The Box Model


Elements consist of:

- Content.

- Padding: Space between content and border.


- Border: Surrounds padding (customizable width and style).

- Margin: Space outside the border.

Example:

.box {

padding: 10px;

border: 2px solid black;

margin: 15px;

10. Layout and Positioning


float: Positions elements left or right

position:

- Static: Default.

- Relative: Position relative to its normal position.

- Absolute: Positioned relative to the nearest positioned ancestor.

- Fixed: Stays in the same place regardless of scrolling.

11. Media Queries


Adjust styles based on screen size or device type.

Example:

@media (max-width: 600px) {

body { font-size: 14px; }

}
12. Dynamic Pseudo-classes
:hover: When the user hovers over an element.
:active: When an element is being clicked.
:visited : lorsqu'un lien a déjà été visité.
:focus: When an element is selected.
Example:
a:hover { color: red; }

You might also like