CSS for HTML

Image - CSS for HTML
Image – CSS for HTML

Go through Introduction to HTML, before starting with ‘CSS for HTML’. CSS is a must for front end web developers. Cascading Style Sheets works with HTML to enhance its look in the browser. CSS is continuously progressing that call for even more greater control of the presentation of web pages. Understand the CSS box model and layout concepts. Set margin and paddings and position elements. Work with fonts and colors and structure webpages. Create CSS code, background images, add classes, IDs, float, layers, embedded style sheets, external style sheets, and more. Use media queries to adapt content for different web device sizes. Improve your CSS with free tools such as Code Pen, Chrome Dev tools or the Chrome Plugin- Pesticide.

JS Bin

JS Bin
JS Bin

The tool JS Bin is a developmental environment to write code in separate panels for HTML, CSS & JavaScript and view Output. Click on Javascript Basics to learn more.

CSS for HTML: Style Sheet

External Style

External file link in your webpage. This links to an external style sheet with the name and extension such as “main.css”.

<link href=”main.css” rel=”stylesheet” type=”text/css”>.
State the folder path relative to the HTML file.
<link href=”foldername/main.css”……..>.
State the path relative to the root of your domain by prefixing with a forward slash.
<link href=”/foldername/main.css”……>.
Use Absolute URLs <link href=”https://www.websiteName.com/folderName/main.css”…….>.

Embedded Style
Embedded Style

Embedded Style

Inserting the CSS code between the head tags <head> </head> is also known as Internal Style Sheet.

<style type=”text/css”> body {background-color:yellow;} h1 {color:blue; font-family:Georgia;} p {color:blue; font-size=20px; font-family:Ariel;} </style

Note: body, h1, and p is the Selector, the Property has a colon (:) and the Value has a semicolon (;)

Inline Style
Inline Style

Inline Style

Insert the CSS code in the tag itself. The <body>, <h1> and the <p> tags contain the CSS Code.

<body style=background-color:green;> <h1 style=color:yellow;>Header</h1> <p style=”color:white; font-size=24px;”>This is an Inline Style</p> </body>

Import

Incorporate a CSS stylesheet within a CSS stylesheet using CSS. The “@import(“/path-to-main.css”); rule can call multiple styles files.

<style type=”text/css” media=”all”>@import url(“main.css”);</style>

CSS for HTML: Selectors

The HTML refers to the CSS that define its own selectors in the form of attributes Class and ID. CSS includes other selectors also for selecting an element for styling.

Class Selector
Class Selector

Class

A class selector identifies more than one element. It begins with a (.) period.

.classname{property:value; } > The example shows class of .one with properties & values of ‘font-weight: bold;’ ‘font-size: 36px;’ ‘color: #228B22;’ & class of .two with properties & values of ‘font-style: italic;’ ‘font-size: 20px;’ ‘color: #FF69B4;’

ID Selector
ID Selector

ID

An ID selector identifies one element. It is any name before a hash character(#).

#id-name { property:value; } > In the example id-name is ‘#star’ having property of ‘padding’ and value – ’50px’ & property of ‘border’ and value – ’10px dashed blue’.

Common CSS Properties
Common CSS Properties

CSS for HTML: Properties

Text Properties
Text Properties

Text

<p style = text {property.value;}> shows examples in the above output:
text-shadow:6px 6px 10px red;
text-transform:capitalize;
text-transform:uppercase;
text-transform:lowercase;
text-decoration:underline;
text-decoration:line-through;
text-decoration:overline;
text-align:center;
text-indent:3cm;
word-spacing:10px;
letter-spacing:12px;
color:blue;

 Fonts
Fonts

Font

The common font property in CSS are font-family, font-style, font-weight, font-variant, font-size etc. The font-variant property states whether a text is to be displayed in a ‘small-caps’ font. All lowercase letters get converted to uppercase. From the example note the converted uppercase letters are exhibited in smaller font size than the original uppercase letters.

CSS - Border, Margin and Padding
CSS – Border, Margin and Padding

Border, Margin & Padding

The border properties show the border of the box and the look of the element. border-color: specifies the color of a border.
border-style: the border takes a value of either solid | dotted | dashed line | double line.
border-width specifies the width of a border.

The margin property in short sets all the properties at one go – margin-bottom | bottom margin| margin-top | margin-left | margin-right.

The attribute value is either a percentage | length | or the word inherit.
value: inherit, will have the same padding as its parent element. value: percentage will have the padding as a percentage of the containing box.
CSS properties can also be set for different values for the padding on each side of the box.
Padding-bottom: identifies the bottom padding of an element.
Padding-top: identifies the top padding of an element.
Padding-left: identifies the left padding of an element.
Padding-right: identifies the right padding of an element.

CSS Float
CSS Float

Float

CSS Float is a positioning property. It is used to create layouts for the web. Lately, Flexbox and Grid are used to create web layouts. The sister property of a float is clear.

CSS Layers
CSS Layers

Layers

Add Layers of elements using CSS and make an element sit in front or behind other elements. CSS Layers are referred to as applying the z-index property to elements that overlap with each other.

CSS Positioning - Relative, Absolute & Fixed
CSS Positioning – Relative, Absolute & Fixed

Positioning

The CSS property position can be set to static (default) | relative | absolute | fixed with left | right | top | bottom.
Static: the default position is not affected by any left | right | top | bottom.
Relative: an element moves as per its current position.
Absolute: an element moves as per its first positioned ancestor.
Fixed: the element behaves like absolute and can set left | right | top | bottom.

Flexbox
Flexbox

CSS Flexbox

The Layout in Flexbox is one dimensional. It deals at a time as a row or as a column. Flex-direction is referred to as the main axis. It has four possible values: row | row-reverse | column | column-reverse.
For row or row-reverse, the main axis will run along the row in the inline direction. For column or column-reverse the main axis will run from the top of the page to the bottom in the block direction.
When flex-direction (main axis) is set to row or row-reverse, the cross-axis runs down the columns. If the main axis is column or column-reverse then the cross axis runs along the rows. For creating a flex container, set the value of the area’s container’s property display: flex or inline-flex. The direct children of that container then become flex items.

Grid
Grid

CSS Grid

Grid is a two-dimensional layout which handles both column and rows together. CSS rules are applied to a Grid Layout. It targets a parent element (grid container) and the children of the element (grid items). By setting the property: ‘display‘ with a value ‘grid‘ or ‘inline-grid‘ helps to create a grid container.

The grid-template-columns and grid-template-rows properties help to explicitly set a grid by creating columns and rows.
A row track is created for each value specified for grid-template-rows eg px, %, em. Likewise, a column track is created for each value specified for grid-template-columns. A minimum and/ or maximum size with the minmax () function is defined as Tracks Sizes.
The grid gap property: grid-column-gap or grid-row-gap creates a gap (gutter) between columns and rows.

CSS Styled Submit Form
CSS Styled Submit Form

CSS Styled Submit Form

The box-sizing property includes the padding and border for elements total width and height. eg: input[type=Text], input[type=Email] and input[type=Password]

Digital Marketing Solutions

Thank you for subscribing.

Something went wrong.