Scribd
Upload
6 views

Title Applying CSS Styles for Custom Appearance - Презентация

Uploaded by

whingle03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Title Applying CSS Styles for Custom Appearance - Презентация

Uploaded by

whingle03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Applying CSS Styles for

Custom Appearance
CSS Customization for Colors, Margins, Paddings, Box
Model, Outline, Text, Fonts, and FlexBox
The color property sets text color, and
background-color defines the background
Colors (color, color for elements. You can use names, HEX,
RGB, or HSL values.
background-color)
Examples:

h1 { color: #ff5733; } /* Text color */


body { background-color: #f0f0f0; } /* Light
background */
margin and padding control the space outside
and inside an element, respectively. margin

Margins and
pushes elements apart, while padding adds
space between content and borders.
Examples:

Paddings .box { margin: 20px; padding: 10px; }


height and width specify the size of elements. Units
can be pixels (px), percentages (%), em, or viewport-

Height and based (vw/vh).


Responsive Use:
Percentages adjust element size based on its

Width container, which is helpful for responsive design.


Use auto for natural scaling, often for images.

Examples:

img { width: 100%; height: auto; }


div { width: 50vw; height: 50vh; }
Examples:

Content: The actual element’s content.

Box Model css

Padding: Space between content and border.


The box model is a foundational CSS
concept. It represents how elements are
structured with content, padding, border,
and margin.
Border: Surrounds the padding.

.box { padding: 10px; border: 2px solid black;


margin: 20px; }

Margin: Space outside the border, separating elements.


Outline
outline is a line drawn around elements, distinct from borders, as it doesn’t
affect layout. Useful for highlighting elements.

Examples:
button
{ outline: 3px solid blue;
}
CSS offers properties to control text styling,
including color, font-family, font-size, font-
weight, text-align, and text-decoration.

Text and Font Family: Sets typeface (e.g., Arial, sans-


serif).

Fonts
Font Size: Controls text size (e.g., px, em).
Font Weight: Adjusts thickness (bold, normal).

Examples:

p { font-family: Arial, sans-serif; font-size: 16px;


color: #333; }
FlexBox is a layout model for flexible arrangement of
items in a container. It simplifies alignment and
spacing.
Properties:
display: flex; activates FlexBox on a container.

FlexBox justify-content: Aligns items horizontally (e.g.,


center, space-around).
align-items: Aligns items vertically (e.g., flex-
start, center).

Examples:

.container { display: flex; justify-content: center; align-


items: center; }
Introduction to
Bootstrap Classes, Grid
System, and Tailwind
CSS
A guide to responsive design and utility-based styling in modern web
development
Bootstrap is a widely-used CSS framework that offers
pre-built classes to simplify responsive design. It

Bootstrap
includes utilities for styling buttons, alerts, typography,
forms, layout grids, and more.

Classes
Example:

<button class="btn btn-primary">Primary


Button</button>
Bootstrap’s grid system is based on a 12-column
layout and uses responsive classes (e.g., .col, .col-
sm-4, .col-md-6). This system allows content to

Bootstrap resize and reflow across different screen sizes.


Additional Notes:

Grid
The .row class is used to contain columns,
ensuring proper alignment.
Breakpoints like sm, md, lg, and xl adjust the
System number of columns for different devices.
Example:
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
Tailwind CSS is a utility-first framework that
allows developers to rapidly apply styling through
single-purpose utility classes. These classes (e.g.,
text-center, bg-blue-500, p-4) enable highly
Tailwind customizable styling without writing custom CSS.
Key Advantages:

CSS Flexibility: Tailwind’s utility classes make it


easy to apply specific styles directly within
HTML elements.
Customizability: Tailwind supports a high
degree of customization, including colors,
spacing, and typography.
Example:
<div class="text-center bg-blue-500 p-
4">Centered Text</div>

You might also like