Don’t be put off learning to write CSS because you think it’s hard. It’s really easy with our CSS3 for Beginners Guide. It will only take you 5 minutes!
- 4 minutes read
Get Started with CSS3 for Absolute Beginners

Let me set the record straight; Writing CSS3 or Cascading Style Sheets is not programming. I repeat, writing CSS is not programming.

The same is true for HTML as well, but hey, that is for another article altogether.

So, if CSS is not programming then, what is it?

What is CSS

Cascading Style Sheets (CSS) is a library that allows web developers and web designers to attach custom user-interface styles to HTML using a set of predefined properties. CSS properties can be used to change specific styles of an HTML element from colour, font size, margin, padding, widths, heights and even animations web page.

HTML is ugly to look at without the CSS3 framework to spice it up, and, at the same time, CSS is useless without HTML.

I said earlier that writing CSS is not programming, but why did I say that?

Programming usually involves conditional logic, storing data in variables and intensive processing your code via the CPU. While there is support for browser variables available, it doesn’t warrant being classed as a coding language, in my opinion.

If CSS is not coding, does that mean, that CSS is EASY?!

Yes, Writing CSS is EASY!

CSS Tutorial for Beginners

So now you know what CSS is and understand that it’s a framework used for web development, it’s time we dive head in and learn CSS.

This beginner CSS3 tutorial will show you everything you need to know to;

  1. CSS Rules
    • What is a CSS Selector
    • What is a CSS Property
    • What is a CSS Value?
  2. CSS Syntax
    • How to Read CSS
  3. Finding CSS Selector names
    • How to find CSS selector in Chrome browser
  4. Example: Creating an HTML Button

Don’t worry. I know you are likely worried you won’t understand what’s going on, but don’t!

Just remember, CSS is not programming – it is just a framework. Once you understand the framework’s rules, you can write CSS and start styling your own website in zero time at all.

CSS Rules

css rule syntax explained

When you read a CSS rule it is comprised of 3 distinct parts;

  1. Selector
  2. Property
  3. Value

When you combine the selector, property, and value parts, it creates a CSS Rule, targeting specific HTML elements and applying the styles contained within.

What is a CSS Selector

css selector

A css selector is the first part of a CSS rule that tells the browser which HTML element to target with the styles included.

A CSS selector helps identify HTML elements on your webpage and always starts with either a period to target an element by its class name or a hash symbol, to target an element by its ID name.

What is a CSS Property

css property

CSS properties instruct the CSS parser in your web browser which style property to target and change. There is a huge array of standardised properties which can be used.

What is a CSS Value

css value

When you assign a CSS value, it will always apply to the CSS property declared before it.

CSS Syntax

how to read css syntax

Now that you understand how to read a CSS rule, it is now time to show you CSS syntax and what all these colons, semi-colons and curly brackets do.

How to read CSS Syntax

  1. CSS starts by declaring a HTML Selector
  2. A statement starts with an opening curly bracket and ends with a closed curly bracket.
  3. Everything inside the curly brackets will be applied to the selector
  4. The colon in the CSS rule separates the property from the value, without it, the css parser will fail.
  5. The semi-colon in the CSS rule ends the statement, again, without it, the css parser will fail.

Finding CSS Selector names

find css selector name in chrome browser

If you read each section above and took some notes (or downloaded the diagrams), then although you might not realise it, you are equipped to start writing your own CSS. But first, I want to show you how to look at the HTML on your website and understand how to find CSS selector names in your HTML code.

Without a selector, you won’t be able to target or style anything on your website.

How to find CSS selector in Chrome browser

  1. Right click on the element you want to style.
  2. From the dropdown menu at the bottom, select inspect.
  3. In the window that appears, you will see a bar highlighted.
  4. Find the class attribute or id attribute.
  5. Make a note of the selector name.
For those at the back

Learning to read and write your own CSS3 is really easy when your know-how. Hopefully, this guide has given you the knowledge and confidence to delve in and start maintaining your own website.

If you don’t yet know how to write HTML, then you should checkout our HTML guide for bloggers.

24 Comments

  • Türkçe genel forum siteleri içerisinde en iyisi

  • I do trust all the ideas youve presented in your post They are really convincing and will definitely work Nonetheless the posts are too short for newbies May just you please lengthen them a bit from next time Thank you for the post

  • What i dont understood is in reality how youre now not really a lot more smartlyfavored than you might be now Youre very intelligent You understand therefore significantly in terms of this topic produced me personally believe it from a lot of numerous angles Its like women and men are not interested except it is one thing to accomplish with Woman gaga Your own stuffs outstanding Always care for it up

  • Its like you read my mind You appear to know so much about this like you wrote the book in it or something I think that you can do with a few pics to drive the message home a little bit but other than that this is fantastic blog A great read Ill certainly be back

  • I loved as much as you will receive carried out right here The sketch is tasteful your authored subject matter stylish nonetheless you command get got an edginess over that you wish be delivering the following unwell unquestionably come further formerly again as exactly the same nearly very often inside case you shield this hike

  • I was suggested this web site by my cousin Im not sure whether this post is written by him as no one else know such detailed about my trouble You are incredible Thanks

  • obviously like your website but you need to test the spelling on quite a few of your posts Several of them are rife with spelling problems and I to find it very troublesome to inform the reality on the other hand Ill certainly come back again

  • I liked very much what is served here. The website is attractive and your written paragraphs are elegant. However, I would like to ask you to continue to provide more and enrich your content. Thank you.

  • Wow, marvelous weblog structure! How long have you ever been running a blog
    for? you made running a blog glance easy. The total look
    of your web site is great, let alone the content!
    You can see similar: ecommerce and here sklep online

  • I know this web site provides quality based articles or reviews
    and additional information, is there any other website which offers
    such stuff in quality? I saw similar here: sklep online and also here: sklep internetowy

  • Whats up are using WordPress for your blog platform?
    I’m new to the blog world but I’m trying to get started and create my own. Do
    you require any coding expertise to make your own blog? Any help would be greatly appreciated!
    I saw similar here: Najlepszy sklep

  • Good way of explaining, and fastidious post to take information regarding my presentation subject, which i am going to deliver in institution of higher education. I saw
    similar here: Sklep online

  • Hey there! Do you know if they make any plugins to help
    with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good results.
    If you know of any please share. Appreciate it! You
    can read similar text here: Sklep internetowy

  • I’m not sure where you are getting your info,
    but great topic. I needs to spend some time learning
    much more or understanding more. Thanks for fantastic info I was looking for
    this info for my mission.

  • I love your blog.. very nice colors & theme. Did you design this website yourself or did you hire someone to do
    it for you? Plz answer back as I’m looking to construct my own blog and
    would like to know where u got this from. many thanks

  • I absolutely love your blog and find a lot of your post’s to be exactly I’m looking for.
    Does one offer guest writers to write content to suit your needs?

    I wouldn’t mind publishing a post or elaborating on a few
    of the subjects you write regarding here. Again, awesome web site!

  • Howdy! Do you know if they make any plugins to help with SEO?
    I’m trying to get my site to rank for some targeted keywords but
    I’m not seeing very good results. If you know of any please share.
    Many thanks! I saw similar text here: Backlink Portfolio

  • hiI like your writing so much share we be in contact more approximately your article on AOL I need a specialist in this area to resolve my problem Maybe that is you Looking ahead to see you

  • Hi there! Do you know if they make any plugins to assist
    with SEO? I’m trying to get my site to rank for some targeted keywords but I’m not seeing very good results.

    If you know of any please share. Cheers! You can read similar blog here: Hitman.agency

  • I like what you guys tend to be up too. This kind of
    clever work and exposure! Keep up the great works guys
    I’ve incorporated you guys to my blogroll.

  • Hi there! Someone in my Myspace group shared this site with us
    so I came to give it a look. I’m definitely enjoying the information. I’m book-marking and will be tweeting this
    to my followers! Terrific blog and outstanding design.

  • Thanks for sharing your thoughts about vpn 2024. Regards

  • It’s nearly impossible to find knowledgeable people on this topic,
    but you sound like you know what you’re talking about!
    Thanks

Leave a Reply

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