Scribd
Upload
3 views

Css Commands

Uploaded by

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

Css Commands

Uploaded by

mraffay886
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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