Movatterモバイル変換

 Cascading Style Sheets, fondly referred to as CSS, is asimple design language intended to simplify theprocess of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS, can control the color of the text, the styleof fonts, the spacing between paragraphs, how columnsare sized and laid out, what background images orcolors are used, layout designs, variations in display fordifferent devices and screen sizes as well as a variety ofother effects.Introduction CSS

 CSS saves time – We can write CSS once and then reusesame sheet in multiple HTML pages. You can define astyle for each HTML element and apply it to as many Webpages as you want. Pages load faster − If you are using CSS, you do not needto write HTML tag attributes every time. Just write oneCSS rule of a tag and apply it to all the occurrences of thattag. So less code means faster download times. Easy maintenance − To make a global change, simplychange the style, and all elements in all the web pages willbe updated automatically.Advantages of CSS

 Superior styles to HTML − CSS has a much widerarray of attributes than HTML, so you can give a farbetter look to your HTML page in comparison toHTML attributes. Global web standards − Now HTML attributes arebeing deprecated and it is being recommended to useCSS. So its a good idea to start using CSS in all theHTML pages to make them compatible to futurebrowsers.

 CSS is created and maintained through a group ofpeople within the W3C called the CSS Working Group. The CSS Working Group creates documents calledspecifications. When a specification has been discussed and officiallyratified by the W3C members, it becomes arecommendation.Who Creates and Maintains CSS?

A CSS comprises of style rules that are interpreted by thebrowser and then applied to the corresponding elements inyour document. A style rule is made of three parts − Selector − A selector is an HTML tag at which a style willbe 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 intoCSS 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 - Syntax

What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements are to bedisplayed on screen, paper, or in other media CSS saves a lot of work. It can control the layoutof multiple web pages all at once External stylesheets are stored in CSS files

 Why Use CSS? CSS is used to define styles for your web pages,including the design, layout and variations indisplay for different devices and screen sizes.

 body {background-color: lightblue;}h1 {color: white;text-align: center;}p {font-family: verdana;font-size: 20px;}

CSS Style Rule Syntax as follows −selector { property: value }Example − table border as followstable{ border :1px solid #C00; }Here table is a selector and border is a property and given value 1px solid#C00 is the value of that property.

<html><head><title>This is document title</title><style>h1 {color: #36CFFF;}</style></head><body><h1>Hello World!</h1></body></html>

Cascading Style Sheet(CSS) is used to set the style inweb pages that contain HTML elements.It sets the background color, font-size, font-family, color,etc property of elements on a web page.There are three types of CSS which are given below: Inline CSS Internal or Embedded CSS External CSSCSS styling

Inline CSS: Inline CSS contains the CSS property in the bodysection attached with element is known as inline CSS. This kind of style is specified within an HTML tagusing the style attribute. Inline styles are defined within the "style" attribute ofthe relevant element:

<html><body><h1 style="color: navy; margin-left: 20px;">Hello, World!</h1><p style="font-size: 16px; color: darkgreen; background-color:lightyellow;">This is a paragraph styled with inline CSS.</p></body></html>

Advantages of Inline CSS: You can easily and quickly insert CSS rules to anHTML page. That’s why this method is useful fortesting or previewing the changes, and performingquick-fixes to your website. You don’t need to create and upload a separatedocument as in the external style.

Disadvantages of Inline CSS: Adding CSS rules to every HTML element is time-consuming and makes your HTML structure messy. Styling multiple elements can affect your page’s sizeand download time.

 An internal style sheet may be used if one singleHTML page has a unique style. The internal style is defined inside the <style> element,inside the head section.Example Internal styles are defined within the <style> element,inside the <head> section of an HTML page:Internal CSS

<html><head><style>body {background-color: lightblue;}h1 {color: navy;margin-left: 20px;}p {font-size: 16px;color: darkgreen;background-color: lightyellow;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>

 With an external style sheet, you can change the lookof an entire website by changing just one file! Each HTML page must include a reference to theexternal style sheet file inside the <link> element,inside the head section.Example External styles are defined within the <link> element,inside the <head> section of an HTML page:External CSS

<html><head><title>External CSS Example</title><link rel="stylesheet" href="styles1.css"></head><body><h1>Welcome to My Page</h1><p>This is a paragraph styled with external CSS.</p><button>Click Me</button></body></html>

body {background-color: lightblue;}h1 {color: navy;margin-left: 20px;}p {font-size: 16px;color: darkgreen;background-color: lightyellow;padding: 60px;border: 1px solid green;}button {background-color: orange;color: white;border: none;padding: 10px;cursor: pointer;}button:hover {background-color: darkorange;}Styles.css

The following text properties of an element − The color property is used to set the color of a text. The direction property is used to set the textdirection. The letter-spacing property is used to add orsubtract space between the letters that make up aword. The word-spacing property is used to add orsubtract space between the words of a sentence.Controlling text and text formatting

 The text-align property is used to align the text of adocument. The text-decoration property is used to underline,overline, and strikethrough text. The text-transform property is used to capitalize textor convert text to uppercase or lowercase letters

<html><head><title>Text Properties Example</title><link rel="stylesheet" href="styles.css"></head><body><div class="text-example">This is a simple example of CSS text properties.</div></body></html>Example

.text-example {color: blue; /* Sets the text color to blue */direction: rtl; /* Sets the text direction to right-to-left */letter-spacing: 2px; /* Adds 2px space between each letter*/word-spacing: 5px; /* Adds 5px space between each word */text-align: center; /* Aligns the text to the center of thecontainer */text-decoration: underline; /* Underlines the text */text-transform: uppercase; /* Converts all the text touppercase letters */}Styles.css

 CSS selectors are used to select the content you wantto style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to itsid, class, type, attribute etc.CSS Selectors

There are several different types of selectors in CSS.1. CSS Element Selector2. CSS Id Selector3. CSS Class Selector4. CSS Universal Selector5. CSS Group Selector

1. CSS Element Selector The element selector selects HTML elements based onthe element name.

<html><head><style>p {background-color: red;}</style></head><body><h1>Demo of the element selector</h1><p id="firstname">My name is Donald.</p><p id="hometown">I live in Duckburg.</p><p>My best friend is Mickey.</p></body></html>

2. CSS Id Selector The id selector selects the id attribute of an HTMLelement to select a specific element. An id is always unique within the page so it is chosento select a single, unique element. It is written with the hash character (#), followed by theid of the element.

<!DOCTYPE html><html><head><style>#para1 {text-align: center;color: red;}</style></head><body><p id="para1">Hello World!</p><p>This paragraph is not affected by the style.</p></body></html>

3. CSS Class Selector The class selector selects HTML elements with aspecific class attribute. It is used with a periodcharacter . (full stop symbol) followed by the classname. The class selector is used to apply styles to multipleelements. You can assign the same class to as manyelements as you want.

<html><head><style>p.center {text-align: center;color: red;}</style></head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be red and center-aligned.</p></body></html>

4. CSS Universal Selector The universal selector (*) selects all HTML elementson the page. The CSS universal selector is a powerful tool thatapplies styles to every element on a webpage. When you use the universal selector, it targets allelements in the document, allowing you to apply globalstyles with a single rule.

<html><head><style>* {text-align: center;color: blue;}</style></head><body><h1>Hello world!</h1><p>Every element on the page will be affected by the style.</p><p id="para1">Me too!</p><p>And me!</p></body></html>

5. CSS Grouping Selector The grouping selector selects all the HTML elements with the samestyle definitions. h1 {text-align: center;color: red;}h2 {text-align: center;color: red;}p {text-align: center;color: red;}

 It will be better to group the selectors, to minimize thecode. To group selectors, separate each selector with acomma. h1, h2, p {text-align: center;color: red;}

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

 CSS box model is a container which contains multipleproperties including borders, margin, padding and thecontent itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout ofdifferent elements. Box-Model has multiple properties in CSS. Some ofthem are given below:The CSS Box Model

 borders margins padding Content

 The box model allows us to add a border aroundelements, and to define space between elements.

 Border Area: It is the area between the box’s paddingand margin. Its dimensions are given by the width andheight of border. Margin Area: This area consists of space betweenborder and margin. The dimensions of Margin area arethe margin-box width and the margin-box height. It isuseful to separate the element from its neighbors.

 Padding Area: It includes the element’s padding. Thisarea is actually the space around the content area andwithin the border box. Its dimensions are given by thewidth of the padding-box and the height of thepadding-box. Content Area: This area consists of content like text,image, or other media content. It is bounded by thecontent edge and its dimensions are given by contentbox width and height.

Table Borders To specify table borders in CSS, use the borderproperty. The example below specifies a black border for<table>, <th>, and <td> elements:Tables in CSS

<html><head><style>table, th, td{border: 1px solid black;}</style></head>

<body><h2>Add a border to a table:</h2><table><tr><th>Firstname</th><th>Lastname</th></tr><tr><td>Peter</td><td>Griffin</td></tr>

<tr><td>Lois</td><td>Griffin</td></tr></table></body></html>

 Width and height of a table are defined by the widthand height properties. The example below sets the width of the table to 100%,and the height of the <th> elements to 50px:Table Width and Height

<html><head><style>table, td, th {border: 1px solid black;}table {border-collapse: collapse/separate;width: 100%;}th {height: 50px;}</style>

</head><body><h2>The width and height Properties</h2><p>Set the width of the table, and the height of the table headerrow:</p><table><tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr>

<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr><tr><td>Lois</td><td>Griffin</td><td>$150</td></tr><tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>

<tr><td>Cleveland</td><td>Brown</td><td>$250</td></tr></table></body></html>

 A navigation bar needs standard HTML as abase. In our examples we will build the navigationbar from a standard HTML list. A navigation bar is basically a list of links, sousing the <ul> and <li> elements makes perfectsense:Navigation Bar = List of Links

<!DOCTYPE html><html><head><style>ul {list-style-type: none;margin: 0;padding: 0;}</style></head><body><p>In this example, we remove the bullets from the list, and its default padding andmargin.</p><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="about.html">About</a></li></ul></body></html>

<html><head><style>ul {list-style-type: none;margin: 0;padding: 0;width: 200px;background-color: #f1f1f1;}li a {display: block;color: #000;padding: 8px 16px;text-decoration: none;}/* Change the link color on hover */li a:hover {background-color: #555;color: white;}</style>Vertical Navigation Bar</head><body><h2>Vertical Navigation Bar</h2><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul></body></html>

<!DOCTYPE html><html><head><style>ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}li {float: left;}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}li a:hover {background-color: #111;}</style></head>Horizontal Navigation Bar<body><ul><li><a class="active“href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul></body></html>

 Header A header is usually located at the top of the website(or right below a top navigation menu). It oftencontains a logo or the website name.header {background-color: #F1F1F1;text-align: center;padding: 20px;}

 Navigation Bar A navigation bar contains a list of links to help visitorsnavigating through your website:/* The navbar container */.topnav {overflow: hidden;background-color: #333;}

<html><head><title>CSS Website Layout</title><style>* {box-sizing: border-box;}body {margin: 0;}/* Style the header */.header {background-color: #f1f1f1;padding: 20px;text-align: center;}/* Style the top navigation bar */.topnav {overflow: hidden;background-color: #333;}/* Style the topnav links */.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;}/* Change color on hover */.topnav a:hover {background-color: #ddd;color: black;}</style></head><body><div class="header"><h1>Header</h1></div><div class="topnav"><a href="#">Link</a><a href="#">Link</a><a href="#">Link</a></div></body></html>

 Content The layout in this section, often depends on the target users. Themost common layout is one (or combining them) of the following: 1-column (often used for mobile browsers) 2-column (often used for tablets and laptops) 3-column layout (only used for desktops).column {float: left;width: 33.33%;}

Footer The footer is placed at the bottom of your page. It oftencontains information like copyright and contact info:Example .footer {background-color: #F1F1F1;text-align: center;padding: 10px;}

Margin•margin-top•margin-right•margin-bottom•margin-left p {margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;}

 The border-style property specifies what kind of border to display. The following values are allowed: dotted - Defines a dotted border dashed - Defines a dashed border solid - Defines a solid border double - Defines a double border groove - Defines a 3D grooved border. The effect depends on the border-colorvalue ridge - Defines a 3D ridged border. The effect depends on the border-colorvalue inset - Defines a 3D inset border. The effect depends on the border-colorvalue outset - Defines a 3D outset border. The effect depends on the border-colorvalue none - Defines no border hidden - Defines a hidden border The border-style property can have from one to four values (for the topborder, right border, bottom border, and the left border).CSS Borders

<!DOCTYPE html><html><head><style>div {border: 1px solid black;background-color: lightblue;padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;}</style></head><body><h2>Using individual padding properties</h2><div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of50px, and a left padding of 80px.</div></body></html>CSS Padding

<!DOCTYPE html><html><head><style>div {border: 1px solid black;padding: 25px 50px 75px 100px;background-color: lightblue;}</style></head><body><h2>The padding shorthand property - 4 values</h2><div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of75px, and a left padding of 100px.</div></body></html>Padding short hand

Movatterモバイル変換

Change Language

Cascading style sheet, CSS Box model, Table in CSS

Embed presentation

Recommended

More Related Content

Similar to Cascading style sheet, CSS Box model, Table in CSS

More from SherinRappai

Recently uploaded

Cascading style sheet, CSS Box model, Table in CSS

Editor's Notes