Introduction to CSS

In web development one of the most important language you learn, to build up your foundation is the styling language called CSS (Cascading Style Sheets). This blog will be mainly focused on CSS and helping mostly the beginners understand what CSS is and also understands its application.

Table Of Content

What is CSS
CSS syntax rule (Selector, Properties, Values)
Type of CSS

What is CSS: CSS means Cascading Style Sheets, It is a language use to design or style web pages made by mark-up language like HTML (Hypertext mark-up language). CSS helps Web developers create Dynamic Designs and Styles to make your website a little more interactive. Css is great for creating text styles, it is also helpful for formatting other aspects of Web page layout as well and as we go on you will learn more about CSS capabilities.

CSS Syntax Rule: A CSS Syntax rule consists of a selector, property and its value. The selector points to the HTML element where CSS style is to be applied. The CSS property is separated by semicolons. It is a combination of selector name followed by property, value that is defined for the specific selector. Selectors in CSS enable you to maintain control over the customization process and code when creating a site from scratch.

Selector {
        Property: value;
    }

The syntax rule illustration above

CSS Selector: Selectors are used to select the HTML element the needs to be styled. There are several different types of selectors in CSS:

Element Selector
ID Selector
Class Selector
Universal Selector
Group Selector.

Element Selector: The Element selector is used to select the HTML elements by its element name.

<!DOCTYPE html>
     <html>
        <head> 
              <title></title>
           <style>
                   p{
                          color : blue;     
                      }
           </style>
         </head>
         <body>
               <p>Hello world</p>
          </body>

     </html>

ID selector: The ID selector select the element based on the ID attribute. When an HTML element is written it is given an ID selector that can be used to identify the HTML element in CSS that will be styled. It is written with the Hash Character (#), followed by the ID name of an element.

<!DOCTYPE html>  
<html>  
<head>  
   <title></title>
<style>  
#para1 {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<p id="para1">Hello World</p>    
</body>  
</html>

Class Selector: The Class selector select the element based on the Class attribute. When an HTML element is written it is given a Class selector that can be used to identify the HTML element in CSS that will be styled. It is written with the Period Character (.) followed by the Class name of an element.

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>
<style>  
.center {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<h1 class="center">This heading is blue and center-aligned.</h1>  
</body>  
</html>

Universal Selector: The Universal Selector (*) selects all the HTML elements on the page.

<!DOCTYPE html>  
<html>  
<head>
    <title></title>  
<style>  
* {  
   color: green;  
   font-size: 20px;  
}   
</style>  
</head>  
<body>  
<h2>This is heading</h2>  
<p>This style will be applied on every paragraph.</p>
</body>  
</html>

Group Selector: The group selector is used to select all the elements with the same style definition. The elements are separated using commas in the grouping.

<!DOCTYPE html>  
<html>  
<head> 
   <title></title> 
<style>  
h1, h2, p {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<h1>Hello World</h1>  
<h2>Hello Hashnode</h2>  
<p>This is a paragraph.</p>  
</body>  
</html>

The group selector makes it easy for you to style a group of element together.

CSS Property: When you write CSS properties, you cannot simply make them up as you see fit. For instance, "color" is an actual CSS property, so you can use it. This property is what determines the text color of an element. If you tried to use "text-color" or "font-color" as CSS properties, these would fail because they are not actual parts of the CSS language. CSS Properties enables you style the web page with CSS inbuilt properties. There are different examples of CSS Properties:

Property    Description
align-content:     Specifies the alignment of flexible container's items within the flex container.
align-items:     Specifies the default alignment for items within the flex container.
align-self:       Specifies the alignment for selected items within the flex container.
animation:       Specifies the keyframe-based animations.
animation-delay:       Specifies when the animation will start.
animation-direction:       Specifies whether the animation should play in reverse on alternate cycles or not.
animation-duration:     Specifies the number of seconds or milliseconds an animation should take to complete one cycle.
animation-fill-mode:     Specifies how a CSS animation should apply styles to its target before and after it is executing.
animation-iteration-count:     Specifies the number of times an animation cycle should be played before stopping.
animation-name :    Specifies the name of @keyframes defined animations that should be applied to the selected element.
animation-play-state:     Specifies whether the animation is running or paused.
animation-timing-function:     Specifies how a CSS animation should progress over the duration of each cycle.

backface-visibility:     Specifies whether or not the "back" side of a transformed element is visible when facing the user.
background:       Defines a variety of background properties within one declaration.
background-attachment:    Specify whether the background image is fixed in the viewport or scrolls.
background-clip:        Specifies the painting area of the background.
background-color:     Defines an element's background color.
background-image:    Defines an element's background image.
background-origin:     Specifies the positioning area of the background images.
background-position:    Defines the origin of a background image.
background-repeat:    Specify whether/how the background image is tiled.
background-size:     Specifies the size of the background images.
border:           Sets the width, style, and color for all four sides of an element's border.
border-bottom:      Sets the width, style, and color of the bottom border of an element.
border-bottom-color:        Sets the color of the bottom border of an element.
border-bottom-left-radius:       Defines the shape of the bottom-left border corner of an element.
border-bottom-right-radius:     Defines the shape of the bottom-right border corner of an element.
border-bottom-style:     Sets the style of the bottom border of an element.
border-bottom-width:       Sets the width of the bottom border of an element.
border-collapse:        Specifies whether table cell borders are connected or separated.
border-color:      Sets the color of the border on all the four sides of an element.
border-image:        Specifies how an image is to be used in place of the border styles.
border-image-outset:        Specifies the amount by which the border image area extends beyond the border box.
border-image-repeat:        Specifies whether the image-border should be repeated, rounded or stretched.
border-image-slice:        Specifies the inward offsets of the image-border.
border-image-source:       Specifies the location of the image to be used as a border.
border-image-width:      Specifies the width of the image-border.
border-left:         Sets the width, style, and color of the left border of an element.
border-left-color:       Sets the color of the left border of an element.
border-left-style:       Sets the style of the left border of an element.
border-left-width:      Sets the width of the left border of an element.
border-radius:         Defines the shape of the border corners of an element.
border-right:       Sets the width, style, and color of the right border of an element.
border-right-color:     Sets the color of the right border of an element.
border-right-style:     Sets the style of the right border of an element.
border-right-width:        Sets the width of the right border of an element.
border-spacing:     Sets the spacing between the borders of adjacent table cells.
border-style:      Sets the style of the border on all the four sides of an element.
border-top:     Sets the width, style, and color of the top border of an element.
border-top-color:       Sets the color of the top border of an element.
border-top-left-radius:      Defines the shape of the top-left border corner of an element.
border-top-right-radius:     Defines the shape of the top-right border corner of an element.
border-top-style:       Sets the style of the top border of an element.
border-top-width:      Sets the width of the top border of an element.
border-width:         Sets the width of the border on all the four sides of an element.
bottom:     Specify the location of the bottom edge of the positioned element.
box-shadow:      Applies one or more drop-shadows to the element's box.
box-sizing:       Alter the default CSS box model.

caption-side:      Specify the position of table's caption.
clear:       Specifies the placement of an element in relation to floating elements.
clip:      Defines the clipping region.
color:       Specify the color of the text of an element.
column-count:        Specifies the number of columns in a multi-column element.
column-fill:      Specifies how columns will be filled.
column-gap:       Specifies the gap between the columns in a multi-column element.
column-rule:       Specifies a straight line, or "rule", to be drawn between each column in a multi-column element.
column-rule-color:      Specifies the color of the rules drawn between columns in a multi-column layout.
column-rule-style:     Specifies the style of the rule drawn between the columns in a multi-column layout.
column-rule-width:        Specifies the width of the rule drawn between the columns in a multi-column layout.
column-span:         Specifies how many columns an element spans across in a multi-column layout.
column-width:        Specifies the optimal width of the columns in a multi-column element.
columns:     A shorthand property for setting column-width and column-count properties.
content:      Inserts generated content.
counter-increment:        Increments one or more counter values.
counter-reset:        Creates or resets one or more counters.
cursor :       Specify the type of cursor.

direction:     Define the text direction/writing direction.
display:       Specifies how an element is displayed onscreen.

empty-cells:    Show or hide borders and backgrounds of empty table cells.

flex:     Specifies the components of a flexible length.
flex-basis:       Specifies the initial main size of the flex item.
flex-direction:     Specifies the direction of the flexible items.
flex-flow:       A shorthand property for the flex-direction and the flex-wrap properties.
flex-grow:       Specifies how the flex item will grow relative to the other items inside the flex container.
flex-shrink:     Specifies how the flex item will shrink relative to the other items inside the flex container.
flex-wrap:      Specifies whether the flexible items should wrap or not.
float:       Specifies whether or not a box should float.
font:        Defines a variety of font properties within one declaration.
font-family:     Defines a list of fonts for element.
font-size:        Defines the font size for the text.
font-size-adjust:       Preserves the readability of text when font fallback occurs.
font-stretch:       Selects a normal, condensed, or expanded face from a font.
font-style:       Defines the font style for the text.
font-variant:       Specify the font variant.
font-weight:       Specify the font weight of the text.

height:    Specify the height of an element.

justify-content:     Specifies how flex items are aligned along the main axis of the flex container
 after any flexible lengths and auto margins have been resolved.

left:      Specify the location of the left edge of the positioned element.
letter-spacing:    Sets the extra spacing between letters.
line-height:      Sets the height between lines of text.
list-style:         Defines the display style for a list and list elements.
list-style-image:      Specifies the image to be used as a list-item marker.
list-style-position:      Specifies the position of the list-item marker.
list-style-type:       Specifies the marker style for a list-item.

margin    :         Sets the margin on all four sides of the element.
margin-bottom:      Sets the bottom margin of the element.
margin-left:         Sets the left margin of the element.
margin-right:      Sets the right margin of the element.
margin-top:        Sets the top margin of the element.
max-height:        Specify the maximum height of an element.
max-width:      Specify the maximum width of an element.
min-height:     Specify the minimum height of an element.
min-width:      Specify the minimum width of an element.

opacity:       Specifies the transparency of an element.
order:      Specifies the order in which a flex items are displayed and laid out within a flex container.
outline:        Sets the width, style, and color for all four sides of an element's outline.
outline-color:      Sets the color of the outline.
outline-offset:       Set the space between an outline and the border edge of an element.
outline-style:      Sets a style for an outline.
outline-width:     Sets the width of the outline.
overflow:        Specifies the treatment of content that overflows the element's box.
overflow-x:      Specifies the treatment of content that overflows the element's box horizontally.
overflow-y:      Specifies the treatment of content that overflows the element's box vertically.

padding:     Sets the padding on all four sides of the element.
padding-bottom:     Sets the padding to the bottom side of an element.
padding-left:       Sets the padding to the left side of an element.
padding-right:     Sets the padding to the right side of an element.
padding-top:      Sets the padding to the top side of an element.
page-break-after:      Insert a page breaks after an element.
page-break-before:       Insert a page breaks before an element.
page-break-inside:        Insert a page breaks inside an element.
perspective:        Defines the perspective from which all child elements of the object are viewed.
perspective-origin:        Defines the origin (the vanishing point for the 3D space) for the perspective property.
position:      Specifies how an element is positioned.

quotes:       Specifies quotation marks for embedded quotations.

resize:       Specifies whether or not an element is resizable by the user.
right:       Specify the location of the right edge of the positioned element.

tab-size:     Specifies the length of the tab character.
table-layout:      Specifies a table layout algorithm.
text-align:       Sets the horizontal alignment of inline content.
text-align-last:        Specifies how the last line of a block or a line right before a forced line break is aligned when text-align is justify.
text-decoration:     Specifies the decoration added to text.
text-decoration-color:       Specifies the color of the text-decoration-line.
text-decoration-line:         Specifies what kind of line decorations are added to the element.
text-decoration-style:       Specifies the style of the lines specified by the text-decoration-line property
text-indent:    Indent the first line of text.
text-justify:     Specifies the justification method to use when the text-align property is set to justify.
text-overflow:     Specifies how the text content will be displayed, when it overflows the block containers.
text-shadow:      Applies one or more shadows to the text content of an element.
text-transform:       Transforms the case of the text.
top    Specify the location of the top edge of the positioned element.
transform:       Applies a 2D or 3D transformation to an element.
transform-origin:        Defines the origin of transformation for an element.
transform-style:      Specifies how nested elements are rendered in 3D space.
transition:       Defines the transition between two states of an element.
transition-delay:         Specifies when the transition effect will start.
transition-duration:        Specifies the number of seconds or milliseconds a transition effect should take to complete.
transition-property:       Specifies the names of the CSS properties to which a transition effect should be applied.
transition-timing-function:        Specifies the speed curve of the transition effect.

vertical-align:         Sets the vertical positioning of an element relative to the current text baseline.
visibility:             Specifies whether or not an element is visible.

white-space:       Specifies how white space inside the element is handled.
width:          Specify the width of an element.
word-break:        Specifies how to break lines within words.
word-spacing:        Sets the spacing between words.
word-wrap:         Specifies whether to break words when the content overflows the boundaries of its container.

z-index:      Specifies a layering or stacking order for positioned elements.

CSS Value: CSS property-values are series of CSS inbuilt values that can be given to a property to create a style or custom design. For example

        Selector{
            color : red;
    }

"Color" is the property and the "Red" is the value

Type of CSS

Inline CSS
Internal or Embedded CSS
External CSS

Inline CSS: Inline CSS is specified within an HTML tag using the style attribute.

<body>  
<p style="color: green; font-size: 18px;">Hello World</p>    
</body>

Internal or Embedded CSS: The Internal CSS is written within the HTML file in the head section. The CSS codes are embedded within the HTML file.

<!DOCTYPE html>  
<html>  
<head>  
   <title></title>
<style>  
#para1 {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<p id="para1">Hello World</p>    
</body>  
</html>

External CSS: External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages.

Below is the HTML file that is making use of the created external style sheet
link tag is used to link the external style sheet with the html webpage. href attribute is used to specify the location of the external style sheet file.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css"/>
    </head>

    <body>
        <div class = "main">
            <div class ="container">Hello world</div>
            <div id ="notice">
                Web development world
            </div>
        </div>
    </body>
</html>

The file given below contains CSS property. This file save with .css extension. i.e style.css

body {
    background-color: black;
    color: white;
}
.main {
    text-align: center;   
}
.container{
    color: #009900;
    font-size: 50px;
    font-weight: bold;
}
#notice {
    font-style: bold;
    font-size: 20px;
}

Conclusion: CSS is the number one styling language you need to learn if you want to become a web developer and you need to start with the basics and understand it properly. There are over one hundred inbuilt properties and values in css but understanding the concept of css, it gives you the privilege to build amazing projects without knowing all the properties and value.

A Fundamental guide to CSS

Table of contents

No headings in the article.