css-types

There are four ways to interact styles with your HTML document. Most commonly used methods are inline CSS and External CSS.

Embedded CSS – The <style> Element

You can put your CSS styles into an HTML document using the <style> element. This tag is placed inside the <head>…</head> tag.

<!DOCTYPE html> 
<html>
<head>
<style type = "text/css" media = "all">
body { background-color: linen; }
h1 { color: maroon; margin-left: 40px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Inline CSS – The style Attribute

You can use the style attribute of any HTML element to define style rules. These rules will be applied to that element only.

 <h1 style="color:blue;margin-left:30px;">This is a heading</h1>

External CSS – The <link> Element
The element can be used to include an external stylesheet file in your HTML document.

<head>   
<link type = "text/css" href = "style.css" rel="stylesheet" />
</head>

Imported CSS – @import Rule
@import is used to import an external stylesheet in a manner similar to the element. Here is the generic syntax of @import rule.

<head>  
<@import url("style.css");
</head>

CSS – Syntax

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts −

Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.

Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.

Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.

CSS Selectors
CSS selectors are used to “find” (or select) HTML elements based on their element name, id, class, attribute, and more.

The element Selector
The element selector selects elements based on the element name.

You can select all

elements on a page like this (in this case, all

elements will be center-aligned, with a red text color):

p {
    text-align: center;
    color: red;
}

What is CSS?

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External style sheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Versions

Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags.

CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables.

RECENT POSTS

Firefox CSS Hacks

admin
Wednesday, May 15th, 2019

Top 15 Web Design Trends 2018

admin
Friday, May 3rd, 2019