loading...

Introduction to CSS

ziizium profile image Habdul Hazeez ・2 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

CSS which stands for Cascading Style Sheets is one of the buddies of HTML, you will find it at the Presentation layer of the Web and it's specifically used to make HTML much more presentable and pleasing to the eyes (if done right).

CSS can be used to achieve lots of effects in a Web document, some example include:

  • Changing text font size
  • Adding background colors
  • Creating Page Layout
  • Hiding and Showing HTML Elements
  • Transition and Animations

We can apply CSS to an HTML Element using any of the methods below:

  • Directly to the Element
  • With a style tag within the head Element
  • Using an External Style Sheet
  • With JavaScript

One of the beauty of CSS is that its quite easy to get started with, but without patience you might get frustrated along the way.

Learning CSS well will go a long way in helping you figure out solutions when you find yourself in such situations. Now you might be thinking, have done a few Google searches on CSS and it seems to be quite easy at a glance, of course it is. Then you go a little deeper and come across terms like:

  • Specificity
  • The Cascade
  • Inheritance
  • Margin Collapse
  • Block Formatting Context

Reading the terms above for the first time, might make you think like: I just want to apply some color, increase my paragraph font size, why do i need to care about this? Specificity? The Cascade? Inheritance? Common! . Well, starting out with CSS, these terms might seem non-existence until you work on a project and stumble on roadblocks like:

  • styles not getting applied
  • page layout crashing

Doing some Google searches you might get recommendation of slapping !important at any property that fails to do your bidding, you proceed with the advice and voila! it works! The time you spent on searching online could have been saved if you had learnt CSS well.

Just like HTML, there are some accessibility gotchas that we need to watch out for when using CSS, some are:

  • The combination of colors to use on a web page
  • Making text readable irrespective of the device accessing the document
  • Making the document adapt to different screen sizes
  • Hiding page objects the right way

That's it for the introduction. Next, Some history lesson.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide