learning basics of web designing

Introduction to CSS

Hello friends, hope you try the last homework and clear the things. If not, don’t worry, it will be cleared. If you created something then you found your work not so pretty. Just all black text, large images, simple text. So let get them more beautiful.

What is CSS?

CSS stands for Cascading Style Sheets. In short, CSS give style to HTML and also control how to represent the HTML element in different screen size devices. For example, you want to add a heading in red text.

<h1 style="color:red; background-color:black; text-align:center;">This is a red heading.</h1>

It will output as below.

This is a red heading.

So style attribute allows styling of the elements. Here I used 3 CSS rules.

  • color -> change the text color,
  • background-color -> change color of background color of the tag and
  • text-align -> set text to center.

These are known as CSS rule. You can write as many CSS rules as you want. Just remember that you have close CSS rule with ; if not then the rule will continue till a ; is not find.

Note that style applies to a div or section will apply to its all element until you will not define a style for them. For example.

<div style=”color:white; background-color:black; font-size:24px; text-align:right;”><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas convallis risus, accumsan porta arcu aliquet at. In sollicitudin, lacus a egestas ultricies, risus diam mattis diam, ac ultricies dui lacus sed erat. Aliquam laoreet, ante at molestie dignissim, lorem est imperdiet libero, at suscipit lectus orci et erat. Praesent efficitur, est sed pellentesque fermentum, odio nunc venenatis lacus, ac viverra arcu diam ut nunc.</p></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas convallis risus, accumsan porta arcu aliquet at. In sollicitudin, lacus a egestas ultricies, risus diam mattis diam, ac ultricies dui lacus sed erat. Aliquam laoreet, ante at molestie dignissim, lorem est imperdiet libero, at suscipit lectus orci et erat. Praesent efficitur, est sed pellentesque fermentum, odio nunc venenatis lacus, ac viverra arcu diam ut nunc.

In the above example, you can see that font-size and color of the text in p tag change according to the style of div. Like this, you can style section to the different styles.

That’s all for today, will learn more about CSS in the next lesson.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Share the Article

About author
Darshan Saroya

Darshan Saroya

A passionate WordPress Theme Developer. Can build a custom theme for your business.  I love to create clean and modern themes, using the power of WordPress. Here I provide the tutorials related to WordPress Development, Core PHP and HTML.

Free Bootstrap 4 Theme

Mega UI Advanced Material Design Blogging WordPress Theme

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.