DEV Community

Cover image for CSS tutorial series: CSS Syntax
The daily developer
The daily developer

Posted on • Edited on

CSS tutorial series: CSS Syntax

As mentioned in the previous post What is CSS ?

CSS has a multitude of features that help developers to manage the layout of a document written in a markup language.

Before we get into selectors, let's go over the syntax.

CSS Syntax

CSS is made up of a set of rules, each of which has one or more selectors and a declaration block, which is a set of CSS properties and values

selector {
   property: value;
}
Enter fullscreen mode Exit fullscreen mode

Now that we've covered the CSS syntax, let's look at the three types of CSS. Don't worry, we'll go over the syntax again in details in a minute.

What are The CSS types?

Inline CSS

Inline CSS is a technique for applying a distinct style to a single HTML element. An inline CSS stylesheet makes use of the style attribute, which is added to the opening tag of the HTML element being styled.

<p style="color:green;">A Paragraph</p>
Enter fullscreen mode Exit fullscreen mode

To elaborate on the previous example of inline CSS, The style attribute that applies the color green to the p element's text can be found within the opening tag of the HTML element p. That is, P is the selector, "color" is the property, and green is the value of the property.

Internal CSS

Internal CSS is also referred to as embedded CSS. It is most commonly used to style a single page. Internal CSS is outlined within a <style> element in the <head> section of an HTML page.

<style>
  p {
   color: green;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

External CSS

Many HTML pages use an external style sheet to outline the style. This style sheet should not involve any HTML code and should be saved as a separate document with a .css extension which is then linked to the HTML documents by including a link to it in the <head> section of these HTML documents.

<link rel="stylesheet" href="name.css">
Enter fullscreen mode Exit fullscreen mode

Top comments (0)