loading...

CSS Properties

ziizium profile image Habdul Hazeez Updated on ・3 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 properties are used to apply the desired effect on HTML Elements.

These properties are named in such way you'll know what's is going happen to the HTML Element that you are working on.

When you come across terms like background-color, you should get the feeling that this property will change the background color of your desired element.

Another property is the font-size which can be used to increase or decrease the font size of HTML Elements like Headers ( h1 to h6 ) and Paragraphs ( p ).

CSS contains lots of properties that can be used to achieve your desired effect on HTML Element, discussing each one of them will make this post way too long and you are likely to get bored before you learn anything.

So here is what we are going to do, we will list the properties i feel you will use and come across most of the time, and we'll explain each one with some examples and if need be we will consult the Specification. After that i will point you to resources to further your studies. The properties we will discuss are:

  • font-size
  • font-family
  • background-color
  • color
  • text-decoration
  • display
  • margin
  • padding
  • border
  • width

font-size

As i mentioned before, this property is used to increase or decrease the font size of HTML element.

p {
  font-size: 120%;
}

font-family

The specification states:

The property value is a prioritized list of font family names and/or generic family names. Unlike most other CSS properties, component values are separated by a comma to indicate that they are alternatives.

This translates to: When the font-family property is used on an HTML Element, you give it a value that you prefer the most and supply comma-separated values as alternatives. For example

body {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}

From the code sample above, "Trebuchet MS" is the font-family you will like the browser to use, and if it's not available, the browser should use "Helvetica", if that's also not available it should use the system default font.

background-color

This property sets the background color of an element using either a color value or transparent

p {
  background-color: red;
}

color

This is used to specify the color that a browser will use on an Element. The value can be in the form of:

  • Keyword e.g orange
  • Hexadecimal e.g #ffffff
  • RGB (Red Green Blue) e.g rgb(255,255,0)
  • RGBA (Red Green Blue Alpha) e.g rgba(12, 12, 13, 0.1)
  • HSL (Hue Saturation and Lightness) e.g hsl(356, 92%, 41%)
p {
  color: #150bd6;
}

We will discuss this color formats in the section: CSS Colors.

text-decoration

This property describes decorations that are added to the text of an element using the element's color. It accepts values like underline, overline, line-through, blink and inherit.

p {
  text-decoration: underline;
}

display

As the name suggest, this property can be used to control how elements are displayed in the browser. It accepts value like block, inline, none e.t.c

span {
  display: block;
}

margin

This property is used to specify the spaces between a child element and its parent. Margins create extra space around an element. It's actually a shorthand of four properties which are margin-top, margin-right, margin-bottom, margin-left.

p {
  margin-left: 2em;
}

padding

Padding is used to create extra space within an element.

h2 {
  background-color: lime;
  padding: 20px 50px;
}

border

This is a shorthand CSS property used to set an element's border. It sets the border-width, border-style, and border-color.

div {
  border: 12px solid red;
}

width

This property can be used to specify how wide an element can be.

div {
  width: 50%;
}

You can find a comprehensive list of properties on The Mozilla Developer Network.

The code snippet's used in this section have been applied to the element by selecting the tag name followed by curly braces and some properties. Now you might as ask yourself questions like:

  • why are we using the HTML Elements name in CSS?
  • what other ways can we use to select an element for styling?

This is will be discussed in much detail in the next topic, CSS Selectors.

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