CSS for HTML is a must for front end web developers. Cascading Style Sheets works with HTML to enhance its look in the browser. Style HTML elements by using CSS selectors. The five types of selectors are simple, combinator, pseudo-class, pseudo-elements, and attribute. Many CSS properties can be specified to style different HTML elements. A CSS property declaration is made up of a property name and a property value. CSS is continuously progressing that calls for even 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. Free tools are Code Pen, Chrome Dev Tools, Chrome Plugin- Pesticide.
Go through Introduction to HTML, before starting with ‘CSS for HTML’.
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”>.
main.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
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
Internal Style Sheet
Note: body, h1, and p is the Selector, the Property has a colon (:) and the V
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>
Inline Style
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 Style Sheet within a CSS Style Sheet
CSS for HTML: Selectors
The HTML refers to the CSS that defines its own selectors in the form of attributes Class and ID. CSS includes other selectors also for selecting an element for styling.
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;’
Class
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’.
CSS for HTML: Properties
Text
<p style = text {property.value;}> shows examples in the above output:
Text
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;
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.
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.
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.
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.
Positioning
The CSS property position can be set to static (default) | relative | absolute | fixed with left | right | top | bottom.
Positioning
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.
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.
Flexbox
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.
CSS Grid
A 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
The grid-gap property: grid-column-gap or grid-row-gap creates a gap (gutter) between columns and rows.
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]