DEV Community

Cover image for All About CSS - 01. Inline Styles, External Styles and much more.
Modern Web
Modern Web

Posted on

All About CSS - 01. Inline Styles, External Styles and much more.

#css #beginners #html #webdev

Hello, welcome. From today, we'll start learning CSS. And in today's article you'll learn, What is CSS ? How to write CSS?

If you haven't read previous web development articles on HTML. You can follow this series to learn everything about HTML.

So, without wasting more time let's start.

What is CSS

image 1

Well, CSS stands for Cascading Style sheets. This is a language (not programming language) which is used to style websites. And you can actually see power of CSS with this example.

CSS 2

CSS can make a website beautiful or make it terrible.

Implementation

Let's see now, How can we start using CSS to make our websites beautiful. There are lot of ways in which you can style an element of web page. Let's see them in detail.

1. Inline Styles

Inline styles refer to when you style your elements individually. using style attribute. Let's see an example.

<p style="color: red;">Red colored Text</p>
<p style="color: blue;">Blue colored Text</p>
<p style="color: green;">Green colored Text</p>
Enter fullscreen mode Exit fullscreen mode

color is CSS property which is used to set text's color. We'll discuss about CSS properties in detail.

Output

Capture-3

2. Style Tag

<style></style>
yes, you guessed right. This is an HTML tag which is used to style elements. This is a more efficient way to style element and use CSS. style tag always use inside head tag. Let's see an example.

<head>
    <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>Red colored Text</p>
    <p>Blue colored Text</p>
    <p>Green colored Text</p>
</body>
Enter fullscreen mode Exit fullscreen mode
Output

Capture-4

It'll be little confusing for you at first. But, let's understand it.

Up until now, we just seeing how we can implement CSS style to HTML. But to start with style tag or external styles. We have to understand. How we write CSS.

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

  1. selector - selector means html elements like p, div, h1 or classes like .para, .heading, .container or can be ids. CSS selectors define which element(s) we want to style. There are lot's of Selectors and we'll cover them all in upcoming articles.

  2. property: Property is CSS property. It could be color, width, height or any Valid CSS property.

  3. value : And the last we have values. These are the valid values for CSS properties. For example, CSS property color can have the value red but cannot have the value khfashfkashfkas.

And last thing. You have to make sure where is bracket is opening and closing, And you have to use colons: and semi-colons ;. Yes this is hard to keep up with colons, brackets and all. But that's how programming is.

Semi colon

3. External style sheets

After "inline styles" and "style tag". We have another way to use CSS to style our elements. And in my opinion this is the best way.

External Style sheets refers to when you have a separate CSS file for all your elements. And you link that external file to your HTML file.

Let's see how this works.
First you have to make a separate file with extension .css. For example I made a file named style.css in the same folder where i have index.html. Then,

Style.css 
p{
   color: red;
}
Enter fullscreen mode Exit fullscreen mode
index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>

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

</head>
<body>
    <p>Red colored Text</p>
    <p>Blue colored Text</p>
    <p>Green colored Text</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
Output

Capture-4

Things to notice here,

  1. In style.css file. We are using same CSS syntax but we are not using <style></style> tag because this tag is only for HTML files.
  2. To link our CSS file in index.html, we are using <link> tag. Link tag is used to link an external CSS file to HTML file. Link tag is self closing tag. And it has some attributes to keep in mind.
    • href - This specifies the file path.
    • rel - stands for relation. Id defines what relation or what this file actually is for.

Selectors

In above examples, we used p to select element. But if you notice it styled all our p elements. What if we want to style a specific element.

Classes

Through classes you can select specific element in css. Let's see how. To use this, you have to use class attribute.

<p class="red">Red colored Text</p>
<p>Blue colored Text</p>
<p>Green colored Text</p>
Enter fullscreen mode Exit fullscreen mode
Css 
p {
   color: green;
}
.red{
   color: red;
}
Enter fullscreen mode Exit fullscreen mode
Output

Capture-5

You can see all the p elements have color green except the first one which has a class red.

Remember, to select any class in CSS you always have to type . at the beginning. This tells the browser that this is a class selector.

Ids

Same as classes, we have id. The idea behind Id is, we can use same class for multiple elements but we should use a unique id for a single element. It's totally up to you that you want to use id for multiple element or not. But it is not a good practice.

to create id we use id attribute. And to select it in the CSS we type # before the actual id name.

index.html 
<p class="red">Red colored Text</p>
<p id="blue">Blue colored Text</p>
<p>Green colored Text</p>
Enter fullscreen mode Exit fullscreen mode
Style.css 
p {
    color: green;
}
.red{
    color: red;
}
#blue{
    color: blue;
}
Enter fullscreen mode Exit fullscreen mode
Output

Capture-3

Let's see some CSS properties.

  1. width : As name suggests, this specifies element's width. The value for this could be in % or px. Example - width: 100px;

  2. height : This specifies element's height. Valid Values are same as width properties.

  3. color : This specifies font/text color. Values could be in hexadecimal codes, or rgb mode, or you can common color name. Example - color: rgb(0, 0, 0); or color: black;

  4. font-size : This is used to change/set fonts size. Values can be in px. Example - font-size: 20px;

  5. background-color : This is used to set background color. Valid values are same as color property.

  6. border : This is used to define border of the element. It is used like this.

element{
   border: <thickness> <border type> <border color>;
}
Enter fullscreen mode Exit fullscreen mode

thickness : It is the thickness of the border. vale could be in px. Like 20px

border type: It specifies which type of border we want. Value could be solid | dotted | dashed.

border color: It is used to set border's color.

Example 
element{
   border: 2px solid black;
}
Enter fullscreen mode Exit fullscreen mode

There are lot of CSS property, that we'll discuss in future. But if you to know more. You should checkout this.

And I also have some articles which covers CSS advance topics so you read them too.

  1. CSS Transform
  2. CSS pusedo elements
  3. CSS Flex Box
  4. CSS Media Query
  5. CSS Positions

So, that's sit for today. I hope you understood each and everything. If you have any doubt feel free to ask me in comments.

If you like, you can subscribe my youtube channel.I create awesome web development tutorials. You can also watch tutorial on Youtube Clone by me.

Thanks For reading.

Top comments (0)

Read next

vs-borodin profile image

Building a Collapsible UI Component in Angular: From Concept to Implementation 🚀

Vyacheslav Borodin -

dotnetfullstackdev profile image

Autofac Dependency Injection in ASP .NET Core 8

DotNet Full Stack Dev -

julie_ryan_df9e4e895cdcff profile image

Transform Your Cloud Migration Strategy: Transition Microsoft workloads to Linux on AWS with AI Solutions

Julie Ryan -

anony9653 profile image

Why Regular Website Maintenance is Crucial for Your Business

coder9653 -