• Blog Home
  • Tech Talk
    • Best Practices
    • Java
    • .NET
    • Mobile
    • UI/ UX
    • Systems Engineering
    • Quality Assurance
  • ClubM

Sign in

  • Mazarin Corporate Site »
Mazarin Blog
stay connected
Join us on Facebbook! Follow Us on Twitter! Subscribe to our RSS Feed!
Aug
29
2017
UI

Beginners’ Guide to CSS (CSS for dummies)

Author Article by Janani Dabare    Comments No Comments

 

CSS (Cascading Style Sheets) has become one of the most significant tools for building websites. CSS is mainly used to style and layout web pages, for example, to style the font color, size, spacing, split it into multiple columns, or add animations and decorative features. Explained below are the rules of CSS, how they are applied to HTML, how to specify length, color and other attributes in CSS.

 

CSS rule

CSS syntax

CSS rule explains how a browser renders element. It consists of two main parts: Selector and Declarations.

Selector – A selector can contain more than one type of selectors. Those can be either type, class or ID selectors separated by combinators. An example for combinators is greater than (>), plus sign (+) and tilde (~).

Declaration – This is followed by a colon and then the property value. Multiple declarations can be arranged by organizing them into semicolon separated groups.

 

How to insert CSS

There is more than one way of adding CSS to a document.

  1. External style sheet
    This is the commonly used method for adding CSS to an HTML document. Styles are included in a separate CSS file which is saved with a .css extension. To add this external style sheet, you can include the below HTML code inside the tag.

    <head> <link rel="stylesheet" type="text/css" href="mystfyle.css"> </head>
  2. Internal style sheet
    CSS rules are directly embedded into an HTML using this method. The following code is needed to add styles to the <head>.

    <head>
     <style> 
       body {background-color: black;}
       h1 {color: maroon;  margin-left: 40px;}
     </style> 
    </head>
  3. Inline styles
    Styles can be directly added to any HTML element using this method. Style parameters can be added to the element and enter the style rules as values, as shown in the example below:

    <h1 style="color:blue;margin-left:30px;">  This is a heading.  </h1>
  4. Importing a CSS file
    CSS file can be attached to the page using this method. To import the CSS file, simply use the following rule:

    @import "newstyles.css";

Box Model

All HTML elements can be considered as conceptual boxes made up of content, padding, borders and margins.

CSS Box model

The innermost area is the content area. This contains the element’s actual content such as text or images.
The padding area surrounds the content area while separating the content from the border area.
The border area is the outermost part of the box which can be identified as an outline to the box.
The margin area exists outside the box. It is the shape around the element that separates it from the other elements. Space around the elements is created through this.

 

CSS properties

Padding
This property is used to create space around the content.The padding can be controlled by using CCS.There are CSS properties for setting padding for each side of an element:

Padding: <padding-top> | <padding-right>| <padding-bottom> | <padding-left>

 

Margin
This property is used to create space around elements. This sets the size of the white space outside the border. There are CSS properties for setting margin for each side of an element

Margin: <margin-top> | <margin-right>| <margin-bottom> | <margin-left>

Below is an example of how paddings and margins can be used in an element

div {
    width: 158px;
    border: 1px solid #d3d3d3;
    padding: 20px;
    margin: 2px;
}

 

Backgrounds
Background properties can be used to define the background effects of HTML elements.

Background: <background-color> | <background-image>| <background-position> | <background-size>

 

List property

Lists can be used to convey a set of either numbered or bullet points.

In HTML, there are two main types of lists:

  • Unordered lists (<ul>) – list items are marked with bullets
  • Ordered lists (<ol>) – list items are marked with numbers or letters

List property allows to:

  • Use different list item markers for ordered lists
  • Use different item markers for unordered lists
  • Use an image as the list item marker
  • Use background colors to list items

Unordered list and Ordered list

Unordered list and Ordered list

list-style: <list-style-type> | <list-style-position> | <list-style-image>
This property is the shorthand property which sets value for the three different list related properties.

list-style-type

This defines the type of the list by setting the content of each marker on the list. Below are keyword values for list-style-type:
disc, circle, square, decimal, lower-alpha, lower-roman, upper-roman, upper-alpha>

list-style-type

list-style-image

This defines whether the list marker is set with an image, accepts an image URL or value of “none”

list-style-image

Table

The visual representation of a HTML table can be improved using CSS. ‘<table>’ element is used to create tables in conjunction with <tr> and <td> elements.

HTML table structure

  • Tables are defined with the <table> tag.
  • A table row can also be divided into table headings with the <th> tag.
  • Tables are divided into table rows with the <tr> tag.
  • Table rows are divided into table data with the <td> tag.

The look of an HTML table can be greatly improved with CSS

  • Table borders
  • Table width and height
  • Table padding
  • Hoverable table
  • Striped table
  • Table color

Table border

Borders can be added using CSS to the whole table or to individual table cells. Adding a table border will result in a border around the outside of the table, but not around each table cell. To get a grid-like effect borders need to be added to all of those elements.

Table border

Table width/height

Table widths and heights can be specified using CSS width and height properties, in either pixels or percentages.

Table width/height

Hovarable Tables

CSS: hover property can be used to make the row of a table highlight on hover.

Hovarable Tables

Figure 1: Hoverable table (Image source: http://8i54s5.axshare.com/)

 

Fonts

CSS gives a great control over the text to be displayed on the web. Font customization can be done using different properties available in CSS. A font family can be one of the following:

  • Generic family – a group of font families with a similar look (like “Serif” or “Monospace”)
  • Font family – a specific font family ( “Times New Roman” or “Arial”)

Difference Between Serif and Sans-serif Fonts

Difference Between Serif and Sans-serif Fonts

Figure 2:  Difference between Serif and Sans-serif fonts (Image source: https://www.w3schools.com/css/css_font.asp)

Generic Family Font Family Description
Serif Times New Roman / Georgia Serif fonts have small lines at the end of some characters
Sans-serif Arial / Verdana “Sans” means, these fonts do not have the lines at the end of characters
Monospace Courier New / Lucida Console All monospace characters have the same width

font-family: family-name | generic-family
This property defines the font which is applied to the element. The font is not a single font face, it is a “family” of fonts and may be dependent on other typographic values to select the correct font face within the family. A font family property holds several font names. If a browser does not support the first font, it tries for the next available font name.

p {font-family: "Times New Roman", Georgia, Serif;}

font-style: normal | italic | oblique | initial | inherit;
This property selects italic or oblique faces within a font-family. Italic form is generally cursive, normally using less horizontal space, while oblique faces are the usually slopped version of the regular font face.

font-style

font-weight: normal | bold | bolder | lighter | number | initial | inherit;
This property sets the thickness of a front and it is dependent either on available font face or weights defined by the browser. Normally the keyword ‘normal’ maps to the value 400 and ‘bold‘ maps to value 700.
font-weight
Font color

Font color

text-decoration: none | underline | overline | line-through | initial | inherit;
This property adds an underline, overline, line-through or combinations of lines to the text

text-decoration

Figure 3: Text decoration (Image source: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-decoration)

 

text-transform: none | capitalize | uppercase | lowercase | initial | inherit;
This property specifies how to capitalize text. Also, it can be used to make uppercase and lowercase text or each word capitalized.

text-transform

Figure 4: Text transform (Image source:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-transform)

 

text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;
This property adds shadow to text. The first two values specify the horizontal and vertical distance of the shadow. The third value specifies the blur radius and the last one describes the color of the shadow.

text-shadow

Figure 5: Text shadow (Image source:https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-shadow)

 

text-align: left | right | center | justify | initial | inherit;
This is used to align the inner content of a block element.

text-align

Figure 6:  Text align (Image source:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-align)

 

@FONT-FACE RULE

With the @font-face rule designers no longer need to use web-safe traditional fonts. The font can either be downloaded  and applied to the project or it can directly use a URL in the style sheet.
In the latest @font-face rule, initially, a name must be defined for the new font.t (eg: myFirstFont) and then point to the font file.

@font-face{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

 

Round Corners
With the CSS3 border-radius property supports ‘rounded corners’.
Round Corners

The border-radius property is a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

Round Corners

Gradients

Earlier, images were used for Gradients. Now CSS3 gradients display smooth transitions between two or more specified colors.

CSS3 defines two types of gradients:

  • Linear Gradients (goes down/up/left/right/diagonally)
  • Radial Gradients (defined by their center)

Linear Gradients
Most common and useful type of gradient is the linear-gradient(). The gradients “axis” can go from left-to-right, top-to-bottom, or at any angle you chose.
background: liner-gradient (direction, color-stop1, color-stop2);

Linear Gradients

Radial Gradients

In a radial gradient color emerges from a single point and smoothly spreads outward in a circular or elliptical shape rather than fading from one color to another in a single direction as with linear gradients.

background: radial-gradient (color-stop1, color-stop2);

Radial Gradients

Shadows

CSS3 gives the ability to add drop shadow effects to the elements similar to Photoshop without using any images.
box-shadow: offset-x offset-y blur-radius color;

offset-x — Sets the horizontal offset of the shadow.
offset-y — Sets the vertical offset of the shadow.
blur-radius — Sets the blur radius. The larger the value, the bigger the.
color — Sets the color of the shadow.

Shadows

 

Pseudo Class Selectors

Pseudo-classes are used to define a special state of an element. These pseudo elements are useful in various situations.

  • History of the navigation (:visited, for example),
  • The status of its content (like :checked on some form elements)
  • Position of the mouse (like :hover which lets you know if the mouse is over an element or not)

Syntax

CSS Pseudo Class Selectors syntax

CSS Pseudo Class Selectors examples

Figure 7: Pseudo code class  added links (Image source:https://www.smashingmagazine.com/2010/02/the-definitive-guide-to-styling-web-links/)

:hover – When the mouse cursor rolls over a link, that particular link is in its hover state.

button:hover {background-color: green;}

:active – Selects the link while it is being activated

a:active {color: red;}

:visited- select only links that have been visited

a:visited{color: purple;}

:first-child –  Selects the first element within a parent

p:first-child {background-color: yellow;}

:last-child – Selects the last element within a parent

p:last-child {background-color: red;}

:nth-child()- The selector allows you to select one or more elements based on their source order, according to a formula

:nth-child

:nth-child

:empty – Selects only elements that have no children and no content


:empty

:disable – Selects inputs that have the disabled attribute. A lot of browsers will make the input a faded out gray, you can control that with this selector.


:disableFigure 8: Disable pseudo class(Image source:https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_enabled_disabled)

 

:checked – Deals with the state of an element such as a checkbox or radio button.

:checked

Figure 8: Checked pseudo class (Image source:https://css-tricks.com/almanac/selectors/c/checked/)

 

CSS is evolving day by day. There are a number of new CSS strategies which will come into play in the near future. CSS3 is constantly on the move, as new properties are adopted and some old properties are dropped from latest browsers.

CSS preprocessors are the latest CSS innovation. CSS preprocessors help to write maintainable, future proof code and reduce the number of lines in CSS. CSS preprocessors such as Sass, Less, and stylus solve all these issues by introducing reusable variables and more.

References

  • https://css-tricks.com
  • https://www.w3schools.com
  • https://teamtreehouse.com/
  • https://www.smashingmagazine.com/2011/03/how-to-use-css3-pseudo-classes/

Authors:

  • Janani Dabare
  • Sumesh Fernando

Related Post

What is Docker ? Getting Started with Docker
Serverless Architecture with AWS Lambda
Responsive Web Designing – RWD
What Power BI Can Do – Major Benefits
5 Principles: How To Use Lean Startup Towards A Successful Project
Use of Data Visualization API in Web Applications (JFreeChart API and ...
Spring OAuth 2 Token Based Authentication
Company Culture

On this Page

    • CSS rule
    • How to insert CSS
    • Box Model
    • CSS properties
    • List property
    • Table
    • Fonts
    • Pseudo Class Selectors
  • Related Post
Tags: CSS, Guide to CSS, Pseudo Class Selectors, style sheet
Did you enjoy reading this article? Share it! Share on Facebook Tweet this! Bookmark on Delicious StumbleUpon Digg This!
avatar

About the Author: Janani Dabare

Leave a comment

Click here to cancel reply.

CAPTCHA
Refresh

*

Follow Us on Twitter!

On this Page

  • CSS rule
  • How to insert CSS
  • Box Model
  • CSS properties
  • List property
  • Table
  • Fonts
  • Pseudo Class Selectors

Related Post

Sass and LESS: An Introduction to CSS Preprocessor...
Azure Functions – Learn more about it
Firebase – Mobile Application Development &#...
Serverless Architecture with AWS Lambda
Let’s move to NoSQL Databases with MongoDB &...
Productive Development With React Redux
Company Culture
What is Docker ? Getting Started with Docker
Hybrid Mobile App Development with Ionic and Angul...
Test Automation of Mobile Applications using Appiu...
What Power BI Can Do – Major Benefits
Data Mining using SQL Server Analysis Server
Learn Cucumber Test Automation with Ruby Core Fram...
How to Succeed With Designing Scalable Web Apps
Importance of Big Data and Managing Data with Elas...
An Introduction to Node.js – Kickstarter
MS SQL Server BI (Business Intelligence)
How To Start Cloud Computing with AWS
What is NFC – The Ultimate Guide
5 Principles: How To Use Lean Startup Towards A Su...
Avatars by Sterling Adventures

Team Mazarin

A team of individuals dedicated to share common goals and vision of the company. Mazarin's endowed team consists of Managers, Software Engineers, User Interface Engineers, Business Analysts, Finance and Administration. We are a blend of quality people. We strive to maintain the open culture and work in close association. The way we work enables everyone to contribute while feeling contented sharing opinions and ideas to deliver the best software solutions.

Read More

Mazarin © 2023. All Rights Reserved.