Pembelajaran Tentang "CSS" Bagian 2

                            WHAT IS CSS 

- INTRODUCTION 

CSS stands for Cascading Style Sheets.

CSS is an extension to basic HTML that allows you to style your web pages.

CSS describes how HTML elements are to be displayed on screen, on 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.


CSS was invited by Håkon Wium Lie on October 10, 1994 and maintained through a group of people within the W3C called the CSS Working Group.



CSS Version


Cascading Style Sheets, level 1 (CSS1) was 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 was 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.

CSS3 was became a W3C recommendation in June 1999 and builds on older versions CSS. It has divided into documentations is called as Modules and here each module having new extension features defined in CSS2.


CSS3 Modules


CSS3 Modules are having old CSS specifications as well as extension features.


Selectors

Box Model

Backgrounds and Borders

Image Values and Replaced Content

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface


- 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.


You can put CSS Style Rule Syntax as follows −


Syntax :


Selector { property: value }

 


Here table is a selector and border is a property and given value 1px solid #C00 is the value of that property.

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment starts with /* and ends with */. Comments can also span multiple lines.

Example :



p{

    color: red;

    /* This is a single-line comment */

    text-align: center;

}


/* This is

a multi-line

comment */

The element selector selects elements based on the element name. You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color)

Example :



p{

    text-align: center;

    color: red;

}

[7:36 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: The id selector uses the id attribute of an HTML element to select a specific element.

An id should be unique within a page, so the id selector is used if you want to select a single, unique element.

To select an element with a specific id, write a hash character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":

Example :



#para1{

    text-align: center;

    color: red;

}

[7:36 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class:

In the example below, all HTML elements with class="center" will be center-aligned:


Example :



.center{

    text-align: center;

    color: red;

}



You can also specify that only specific HTML elements should be affected by a class. In the example below, all <p> elements with class="center" will be center-aligned:


Example :



p.center{

    text-align: center;

    color: red;

}

[7:36 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: If you have elements with the same style definitions,you can group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.


In the example below we have grouped the selectors from the code above:


Example :



h1, h2, p{

    text-align: center;

    color: red;

}

[7:37 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: If you have elements with the same style definitions,you can group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.


In the example below we have grouped the selectors from the code above:


Example :



h1, h2, p{

    text-align: center;

    color: red;

}

[7:37 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type.


Example :



*{

      color: red;

}

[7:38 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type.


Example :



*{

      color: red;

}

[7:38 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.


Example :



ul em{

    text-align: center;

    color: red;

}

[7:38 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: You have seen the descendant selectors. There is one more type of selector, which is very similar to descendants but have different functionality.


Example :



Body > p{

    color: #000000;

}

[7:41 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text


Example :



input[type =  “text”]{

    color: #000000;

}


The advantage to this method is that the <input type = "submit" /> element is unaffected, and the color applied only to the desired text fields.



There are following rules applied to attribute selector:


p[lang] - Selects all paragraph elements with a lang attribute.

p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value of exactly "fr".

p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the word "fr".

p[lang|="en"] - Selects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-".

[7:41 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: You can set 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 text direction.

The letter-spacing property is used to add or subtract space between the letters that make up a word.

The word-spacing property is used to add or subtract space between the words of a sentence.

The text-indent property is used to indent the text of a paragraph.

The text-align property is used to align the text of a document.

The text-decoration property is used to underline, overline, and strikethrough text.

The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.

The white-space property is used to control the flow and formatting of text.

The text-shadow property is used to set the text shadow around a text.

[7:41 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: The following example demonstrates how to set the text color. Possible value could be any color name in any valid format.


Example :



<html>

   <head>

   </head>

   <body>

      <p style="color:red;">

      This text will be written in red.

      </p>

   </body>

</html>


 

Output :


This text will be written in red.


- CSS Comments

[7:44 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment starts with /* and ends with */. Comments can also span multiple lines.

Example :



p{

    color: red;

    /* This is a single-line comment */

    text-align: center;

}


/* This is

a multi-line

comment */

[7:45 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: The element selector selects elements based on the element name. You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color)

Example :



p{

    text-align: center;

    color: red;

}

[7:45 AM, 2/20/2021] ✧༺Mr.Vatality༻✧: The id selector uses the id attribute of an HTML element to select a specific element.

An id should be unique within a page, so the id selector is used if you want to select a single, unique element.

To select an element with a specific id, write a hash character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":

Example :



#para1{

    text-align: center;

    color: red;

}

- 




Komentar

Posting Komentar

Postingan populer dari blog ini

tutorial SQL injection ( FULL TUTOR )

Gambar
  SQL Injection Tutorial: Learn with Example Data is one of the most vital components of information systems. Database powered web applications are used by the organization to get data from customers.  SQL  is the acronym for Structured Query Language. It is used to retrieve and manipulate data in the database. What is a SQL Injection? SQL Injection is an attack that poisons dynamic SQL statements to comment out certain parts of the statement or appending a condition that will always be true. It takes advantage of the design flaws in poorly designed web applications to exploit SQL statements to execute malicious SQL code. In this tutorial, you will learn SQL Injection techniques and how you can protect web applications from such attacks. How SQL Injection Works The types of attacks that can be performed using SQL injection vary depending on the type of database engine.  The attack works on dynamic SQL statements . A dynamic statement is a statement that is generated ...
Baca selengkapnya

Pembahasan Tentang Pemrograman

Gambar
  Algoritma Pemrograman : Pengertian, Fungsi, Cara Kerja, dan Contohnya SERBA SERBI ,  TECHNOLOGY  /  11 NOVEMBER 2020     2   |    0  |  0 Kebanyakan orang awam yang mendengar tentang kata algoritma ini pasti menduga bahwa ini berkaitan dengan bahasa pemrograman, ilmu komputer, matematika dan berisi sekumpulan angka-angka. Hal itu tidaklah salah karena suatu algoritma memang erat hubungannya dengan perhitungan, namun disini akan membahas lebih dalam mengenai pengertian algoritma dalam dunia pemrograman. Secara umum, algoritma sendiri mewakili langkah-langkah dalam pemecahan masalah. Sekarang, terutama di tahun ini, bahasa pemrograman semakin banyak dipelajari oleh orang-orang baik itu di bidang keperawatan, bangunan, pendidikan dan lain sebagainya. Hampir di semua aktivitas pemrograman pasti tidak akan lepas dengan yang namanya algoritma karena menjadi dasar pijakan yang paling penting dalam membuat suatu program. Tanpa adanya peng...
Baca selengkapnya