Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

Use CSS Display and positioning and Use CSS Box model

This document outlines key CSS properties for styling text, colors, backgrounds, and layout using the CSS Box Model. It covers font properties, text alignment, opacity, background images, and box dimensions including height, width, padding, margin, and borders. Additionally, it explains the visibility of elements and the use of the auto keyword for automatic calculations.

Uploaded by

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

Use CSS Display and positioning and Use CSS Box model

This document outlines key CSS properties for styling text, colors, backgrounds, and layout using the CSS Box Model. It covers font properties, text alignment, opacity, background images, and box dimensions including height, width, padding, margin, and borders. Additionally, it explains the visibility of elements and the use of the auto keyword for automatic calculations.

Uploaded by

hiti protogene
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Notes on Using CSS Visual Rules

1. Fonts

CSS allows you to style text by changing the font type, size, and style.

 Properties:
o font-family: Sets the type of font (e.g., Arial, Times New Roman).
o font-size: Adjusts the size of the text (e.g., 16px, 1em).
o font-style: Makes text italic or normal.
o font-weight: Controls the boldness (e.g., normal, bold).

Example:

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

font-weight: bold;

font-style: italic;

2. Text

CSS text properties let you style and align text.

 Properties:
o text-align: Aligns text (e.g., left, center, right).
o text-transform: Changes the case (e.g., uppercase, lowercase, capitalize).
o line-height: Adjusts spacing between lines.
o letter-spacing: Changes spacing between letters.

Example:

p{

text-align: justify;

text-transform: uppercase;

letter-spacing: 2px;
}

3. Colors and Background Colors

CSS allows you to style text and backgrounds using colors.

 Properties:
o color: Changes the text color.
o background-color: Changes the background color.
o Colors can be defined using names, hex codes, RGB, or HSL values.

Example:

body {

color: #333333;

background-color: #f0f0f0;

4. Opacity

CSS opacity makes an element see-through or transparent.

 Property:
o opacity: Ranges from 0 (completely invisible) to 1 (fully visible).

Example:

div {

opacity: 0.5; /* 50% transparent */

5. Background Image

CSS can apply images as backgrounds for elements.

 Properties:
o background-image: Sets the image (e.g., url('image.jpg')).
o background-size: Adjusts how the image fits (e.g., cover, contain).
o background-repeat: Repeats the image (e.g., no-repeat, repeat).
o background-position: Sets the position (e.g., center, top).
Example:

div {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

USE CSS Box Model

The CSS Box Model is a fundamental concept in web design. Every element on a webpage is
treated as a box with the following parts:
Content, Padding, Border, and Margin.

1. Height and Width

 Height: Specifies the vertical size of an element.


 Width: Specifies the horizontal size of an element.
 Can be defined using pixels (px), percentages (%), ems, or other units.

Example:

div {

width: 200px;

height: 100px;

background-color: lightblue;

2. Borders

 A border is the line surrounding the content and padding.


 You can style borders using:
o border-width: Thickness of the border.
o border-style: Type of border (e.g., solid, dashed, dotted).
o border-color: Color of the border.

Example:

div {

border: 2px solid black;

3. Border Radius

 Border-radius makes the corners of an element rounded.


 The value can be in pixels (px) or percentages (%).

Example:

div {

border: 2px solid black;

border-radius: 10px;

4. Padding

 Padding is the space between the content and the border.


 Each side (top, right, bottom, left) can have its own value.

Example:

div {

padding: 20px; /* Adds space inside the box */

5. Margin

 Margin is the space between an element and other elements.


 Like padding, each side (top, right, bottom, left) can have a different value.
Example:

div {

margin: 10px; /* Adds space outside the box */

6. Visibility

 Visibility determines whether an element is visible or hidden.


 Common values:
o visible: The element is shown.
o hidden: The element is hidden but still takes up space.
o collapse: Used with table elements to hide rows or columns.

Example:

div {

visibility: hidden; /* Hides the element */

7. Auto

 The auto keyword lets the browser calculate a value automatically.


 Often used for margins to center elements horizontally.

Example:

div {

margin: 0 auto; /* Centers the box horizontally */

width: 50%;

Summary of Key CSS Properties

You might also like