Scribd
Upload
3 views

Css Commands

Uploaded by

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

Css Commands

Uploaded by

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

1.

Text and Font Styling

color: Sets the text color.

font-size: Defines the size of the text.

font-family: Specifies the font style (e.g., Arial, Times New Roman).

font-weight: Makes text bold (normal, bold, lighter, numeric values like
100, 400).

font-style: Sets text style (normal, italic, oblique).

text-align: Aligns text (left, center, right, justify).

text-transform: Changes text case (uppercase, lowercase, capitalize).

text-decoration: Adds/Removes decoration (underline, overline, line-


through, none).

line-height: Adjusts spacing between lines.

letter-spacing: Controls space between letters.

word-spacing: Adjusts space between words.

2. Background Styling

background-color: Sets the background color.

background-image: Adds an image as the background.

background-repeat: Repeats or stops repeating the background image


(repeat, no-repeat).

background-size: Defines the size of the background (cover, contain, or


specific dimensions like 100px).
background-position: Positions the background image (center, top, left).

background-attachment: Fixes the background during scrolling (fixed,


scroll).

3. Borders and Outline

border: Sets the border for an element (border: 2px solid black;).

border-width: Specifies the width of the border.

border-style: Defines the border type (solid, dotted, dashed, double, none).

border-color: Sets the border color.

border-radius: Creates rounded corners.

outline: Adds a line outside the border.

outline-color: Sets the outline color.

outline-style: Specifies the outline style.

4. Box Model (Spacing)

margin: Creates space outside the element.

padding: Creates space inside the element.

width: Sets the width of the element.

height: Sets the height of the element.

max-width: Specifies the maximum width.

max-height: Specifies the maximum height.

box-shadow: Adds a shadow to the element.


5. Positioning and Layout

display: Defines how an element is displayed (block, inline, flex, grid,


none).

position: Positions an element (static, relative, absolute, fixed, sticky).

top, right, bottom, left: Positions an element relative to its container.

codes implementation:

1.Inline CSS (Directly in HTML elements):

html

<p style="color: red;">This is red text.</p>

2.Internal CSS (Inside a <style> tag in the HTML file):

html

<style>

body {

background-color: lightblue;

</style>

3.External CSS (In a separate CSS file):

HTML File:

html

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


CSS File (styles.css):

css

Copy code

body {

background-color: lightblue;

1. CSS Selectors

Target all elements:

css

*{

margin: 0;

padding: 0;

Tag Selector:

css

p{

color: blue;

Class Selector:
css

.highlight {

background-color: yellow;

ID Selector:

css

#main {

font-size: 20px;

2. Colors

Set text color:

css

Copy code

h1 {

color: red;

Set background color:

css
Copy code

body {

background-color: lightgray;

3. Fonts

Font size:

css

Copy code

p{

font-size: 16px;

Font family:

css

Copy code

body {

font-family: Arial, sans-serif;

4. Text Styling

Center-align text:
css

h1 {

text-align: center;

Add bold text:

css

strong {

font-weight: bold;

5. Borders and Padding

Add a border:

css

div {

border: 2px solid black;

Add padding:

css

div {

padding: 10px;
}

6. Margins

Add space around an element:

css

h2 {

margin: 20px;

7. Hover Effects

Change color when hovering:

css

a:hover {

color: green;

8. Background Images

Add a background image:

css

body {

background-image: url('background.jpg');

background-size: cover;
}

You might also like