Categories
CSS Web development

CSS Basics

A bit of CSS already you know. If you didn’t follow from the beginning and you want to know more about the HTML and CSS and how they are working together you can click here to find out more. 

Today we will focus just on CSS (Cascading Style Sheets). CSS like HTML is not a programing language. It is a style sheet language. CSS is used to define styles for websites, including the design, layout, and variations in display for different devices and screen sizes.

Do you like this gif? Check more gifs in the store.

The CSS syntax consists of a set of rules. These rules have 3 parts: a selector, a property, and a value. 

Syntax: 

This code tells the browser to render all occurrences of the HTML <h1> element in green with the font size 14 px. 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: green;
  text-align: center;
}
</style>
</head>
<body>

<p>Good afternoon!</p>
<p>These paragraphs are green and styled with CSS.</p>

</body>
</html>

Output:

A CSS Comment is used to add explanatory notes to the code. Comments are ignored by browsers. Comments can be places whenever white space is allowed within a style sheet.
A CSS comment starts with /* and ends with */. Comments can also span multiple lines. 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: green;
  /* This is a single-line comment */
  text-align: center;
}

/* This is
a multi-line
comment */
</style>
</head>
<body>

<p>Good afternoon!</p>
<p>This paragraph is green and styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

Output:

The CSS element selector selects HTML elements bases on element name. It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with the comma.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: green;
}
</style>
</head>
<body>

<h1>Good afternoon!</h1>
<h2>Smaller heading!</h2>
<p>Paragraph.</p>

</body>
</html>

Output:

That’s all for now, seems to be easy? 🙂
Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *