CSS

CSS:
Introduction to CSS, CSS Syntax, Location of Styles, Selectors, The Cascade: How Styles
Interact, The Box Model, CSS Text Styling.
CSS (Cascading Style Sheets)
CSS is a language used to describe the presentation of HTML documents. It controls the layout,
colors, fonts, and overall visual style of web pages, allowing for the separation of content (HTML)
from design.
Introduction to CSS
CSS enhances the appearance of web pages by defining how HTML elements should be displayed. It
allows developers to apply consistent styling across multiple pages, making web design more
efficient and maintainable.
CSS Syntax
CSS consists of rules that are made up of selectors and declarations:
 Selector: Targets the HTML element(s) to style.
 Declaration Block: Contains one or more declarations, enclosed in curly braces {}.
 Declaration: A pair of property and value separated by a colon (:), specifying the styling for
the selected element.
Example:
css
Copy code
p{
color: blue;
font-size: 16px;
 Selector: p (targets all <p> elements).
 Declarations: color: blue; and font-size: 16px;.
Location of Styles
CSS can be applied to an HTML document in three ways:

1. Inline CSS: Applied directly to an HTML element using the style attribute.
html
Copy code
<p style="color: blue;">This is a blue paragraph.</p>
2. Internal CSS: Placed within a <style> tag inside the <head> of an HTML document.
html
Copy code
<style>
p{
color: blue;
</style>
3. External CSS: Linked to an HTML document via a separate .css file, using the <link> tag.
html
Copy code
<link rel="stylesheet" href="styles.css">
Selectors
Selectors define which HTML elements the CSS rules apply to:
 Element Selector: Targets all elements of a specific type (e.g., p, h1).
css
Copy code
p { color: blue; }
 Class Selector: Targets elements with a specific class, defined with a . prefix.
css
Copy code
.highlight { color: red; }
 ID Selector: Targets a unique element with a specific ID, defined with a # prefix.
css
Copy code
#header { background-color: yellow; }
 Attribute Selector: Targets elements with a specific attribute.
css
Copy code
input[type="text"] { border: 1px solid black; }
The Cascade: How Styles Interact
The cascade refers to the order in which CSS rules are applied when there are conflicts:
 Inheritance: Some properties are inherited by child elements from their parent elements
(e.g., color, font-family).
 Specificity: The more specific a selector, the higher its priority. IDs have more specificity
than classes, and classes have more specificity than elements.
 Source Order: When selectors have the same specificity, the last one in the source code
takes precedence.
 Important: The !important keyword can override any other rule, but should be used
sparingly.
Example:
css
Copy code
p { color: blue; }
p { color: red; } /* This rule takes precedence */
The Box Model
The box model describes how elements are displayed and spaced on a web page. It consists of:
 Content: The actual content inside the element (e.g., text, images).
 Padding: Space between the content and the border.
 Border: The edge around the padding and content.
 Margin: Space outside the border, separating the element from others.
Example:
css
Copy code
div {
width: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
 The total width of the div would be 100px (content) + 10px (padding) + 5px (border) + 20px
(margin).
CSS Text Styling
CSS provides various properties to style text:
 Color: Defines the text color.
css
Copy code
p { color: blue; }
 Font Family: Sets the font type.
css
Copy code
body { font-family: Arial, sans-serif; }
 Font Size: Sets the size of the text.
css
Copy code
h1 { font-size: 24px; }
 Text Align: Aligns text within an element.
css
Copy code
h1 { text-align: center; }
 Text Decoration: Adds decoration like underlines, overlines, or strikethroughs.
css
Copy code
a { text-decoration: none; }
Summary
CSS is a powerful tool for controlling the presentation of web pages. Understanding its syntax, how
styles are applied, and key concepts like the box model and cascade allows developers to create
visually appealing and well-structured web designs. By mastering selectors and text styling, you can
fine-tune the appearance of your web content for a better user experience.

CSS

Uploaded by

Copyright:

Available Formats

CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS

Uploaded by

Copyright:

Available Formats

CSS:

Interact, The Box Model, CSS Text Styling.

CSS (Cascading Style Sheets)

CSS consists of rules that are made up of selectors and declarations:

 Selector: Targets the HTML element(s) to style.

 Selector: p (targets all <p> elements).

 Declarations: color: blue; and font-size: 16px;.

CSS can be applied to an HTML document in three ways:

<p style="color: blue;">This is a blue paragraph.</p>

<link rel="stylesheet" href="styles.css">

 Element Selector: Targets all elements of a specific type (e.g., p, h1).

.highlight { color: red; }

#header { background-color: yellow; }

 Attribute Selector: Targets elements with a specific attribute.

input[type="text"] { border: 1px solid black; }

The Cascade: How Styles Interact

p { color: red; } /* This rule takes precedence */

The Box Model

 Padding: Space between the content and the border.

 Border: The edge around the padding and content.

border: 5px solid black;

CSS Text Styling

CSS provides various properties to style text:

 Color: Defines the text color.

 Font Family: Sets the font type.

body { font-family: Arial, sans-serif; }

 Font Size: Sets the size of the text.

 Text Align: Aligns text within an element.

You might also like