CSS Tutorial for Beginners: Learn the Basics of Cascading Style Sheets and Start Building Stylish Websites Today

Posted Feb 13, 05:51 PM
Comments 0

CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of a document written in a markup language. It is used to control the layout of web pages, the color and font styles, and other visual elements. CSS is an essential component of modern web development and is used in conjunction with HTML and JavaScript to build dynamic and interactive websites.

Recommended Books

I can highly recommend these books on CSS if you want to go further.

Getting Started with CSS

Creating a CSS file
- To create a CSS file, you need to have a text editor installed on your computer, such as Notepad++ or Sublime Text. Open the text editor and create a new file. Save the file with a .css extension.
Linking the CSS file to an HTML file
- To apply the styles in a CSS file to an HTML file, you need to link the two files. To do this, you add a link element in the head section of your HTML file.
```
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
```
Creating a CSS rule
- A CSS rule is made up of two parts: a selector and a declaration block. The selector specifies the HTML element to which the styles should be applied. The declaration block contains the styles that should be applied to the selector. A declaration block is surrounded by curly braces ({}).
```
selector {
  property: value;
}
```

15 CSS Code Examples

Changing the background color of a web page

This example sets the background color of the entire web page to light blue using the background-color property and the body selector.

body {
  background-color: lightblue;
}

Setting the font family for a web page

This example sets the font family for the entire web page to Arial or a similar sans-serif font using the font-family property and the body selector.

body {
  font-family: Arial, sans-serif;
}

Setting the font size for a web page

This example sets the font size for the entire web page to 16 pixels using the font-size property and the body selector.

body {
  font-size: 16px;
}

Setting the text color for a web page

This example sets the text color for the entire web page to black using the color property and the body selector.

body {
  color: black;
}

Setting the width and height of an element

This example sets the width and height of a div element to 300 pixels and 200 pixels, respectively, using the width and height properties.

div {
  width: 300px;
  height: 200px;
}

Setting the padding for an element

This example sets the padding for a div element to 10 pixels using the padding property.

div {
  padding: 10px;
}

Setting the margin for an element

This example sets the margin for a div element to 10 pixels using the margin property.

div {
  margin: 10px;
}

Setting the border for an element

This example sets a solid black border with a width of 1 pixel for a div element using the border property.

div {
  border: 1px solid black;
}

Setting the background color for an element

This example sets the background color for a div element to light gray using the background-color property.

div {
  background-color: lightgray;
}

Setting the text alignment for an element

This example sets the text alignment for a div element to center using the text-align property.

div {
  text-align: center;
}

Setting the font weight for text

This example sets the font weight for a p element to bold using the font-weight property.

p {
  font-weight: bold;
}

Setting the font style for text

This example sets the font style for a p element to italic using the font-style property.

p {
  font-style: italic;
}

Setting the text decoration for text

This example removes the text decoration for an a element using the text-decoration property and setting its value to none.

a {
  text-decoration: none;
}

Hiding an element

This example hides an element with a class of hide by setting its display property to none.

.hide {
  display: none;
}

Setting the display property for an element

This example sets the display property for an element with a class of box to flex, allowing it to be displayed as a flex container.

.box {
  display: flex;
}

Conclusion

CSS is a powerful tool that allows developers to control the look and formatting of web pages. By using selectors and declaration blocks, developers can apply styles to specific elements on a page. With the examples provided in this tutorial, you should have a solid understanding of how to get started with CSS and be able to start creating stylish and well-formatted web pages.

With a little bit of practice and exploration, you can develop a mastery of CSS and become a skilled front-end developer.

Tech Guides for Everyone