CSS (Beginner's Guide)

What is CSS?


CSS stands for Cascading Style Sheets, and it is a language used to style HTML elements. CSS allows you to control the appearance of your website, including the layout, fonts, colors, and more.

The three main ways to add CSS to your HTML documents:

1. Inline CSS

Inline CSS is added directly to the HTML element that you want to style. For example, the following HTML code will set the color of the paragraph element to red:

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

2. Internal CSS

Internal CSS is added to the <head> section of your HTML document. For example, the following CSS code will set the color of all paragraph elements on your web page to red:

<head> <style> p { color: red; } </style> </head> 

3. External CSS

External CSS is added to a separate CSS file, which is then linked to your HTML document. For example, the following HTML code will link to an external CSS file called style.css:

<head> <link rel="stylesheet" href="style.css"> </head>

Basic CSS syntax:

CSS is made up of selectors and declarations. Selectors are used to identify the HTML elements that you want to style, and declarations are used to specify the CSS properties that you want to apply to those elements.

CSS declarations are written in the following format:

selector { property: value; } 

For example, the following CSS code will set the color of all paragraph elements on your web page to red:

p { color: red; } 


Common CSS properties

Some of the most common CSS properties include:

1. color: Sets the color of the text.

p { color: red;}

2. font-family: Sets the font family of the text.

h1 {font-family: sans-serif;}

3. font-size: Sets the font size of the text.

p {font-size: 16px;}

4. background-color: Sets the background color of the element.

body {background-color: blue;}

5. width: Sets the width of the element.

img {width: 200px;}

6. height: Sets the height of the element.
 
div {height: 300px;}

7. margin: Sets the margin around the element.

p {margin: 10px;}

8. padding: Sets the padding inside the element.

h1 {padding: 20px;}

 

Conclusion:

CSS is a powerful language that can be used to create beautiful and functional websites. I encourage you to learn more about CSS so that you can create the websites that you want.

Additional tips for beginners:

1. Start by learning the basics of CSS, such as selectors, properties, and values.

2. Practice styling simple HTML elements, such as paragraphs, headings, and images.

3. Use a CSS reference guide to help you learn about all of the different CSS properties and values.

4. Look at examples of other websites to see how they use CSS to style their pages.

5. Don't be afraid to experiment! The best way to learn CSS is by doing.


Please follow: 

https://medium.com/@ecraze94/css-for-beginners-228063b480f6

Post a Comment

0 Comments