Scribd
Upload
6 views

udemy CSS Properties

css properties

Uploaded by

alwk2787
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

udemy CSS Properties

css properties

Uploaded by

alwk2787
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

CSS means Cascading Style Sheets.

Different CSS Properties


 Background  Width  Text  Text
Color  Height Decoration Alignment
 Text Color  Text Size  border

Three ways to use CSS in HTML:


1. Inline
The style attribute is used to provide inline styling
<h1 style="color:gray;">Style is applied using inline style</h1>
2. Internal Style 3. External Style
Use <style>..</style> tags in head section  To work with external CSS style:
<style>  Create a CSS file
div {  Write CSS properties in that file
background-color: pink;  Link that files in HTML document
} Example
</style> <link rel="stylesheet" href=“style.css">
Style.css =file name of css
.jafri{ .para {
CSS Style properties CSS Style properties
} }
Examples:
<h1 style= “color: red;”> Alvin </h1>
HTML Color <h1 style= " background-color:
There are different ways, we can use to
rgb(255, 99, 71);" >Alvin</h1>
provide color to text, background color,
<h1 style= " background-color:
etc
rgba(230, 43,12,0.3);" >Alvin</h1>
 Color Name like Yellow, green, gray,
red, gold, etc
 rgb(255, 99, 71)= means red green blue
and the constituent of each color to be
present
In rgba and hsla, 'a' means Alpha that is
used to set transparency

JavaScript in HTML
<html>
<head>
<script src=“file.js”>// External JS File</script>
</head>
<body> </body>
</html>PHP in HTML

<!DOCTYPE html> </html>


<html> Canonical PHP tags
<body> <?php //php code…?>
<?php Short-open tags
echo "Hello World“; <? //php code..?>
?> ASP-style tags
<% // php code.. %>
</body>
HTML script tags <script language = “php">// php
code..</scrip

 The main objective of CSS is to add styles to HTML. CSS describes how HTML elements are displayed on a
page.
 Styling includes colors, fonts, size, borders, background color, padding, margin, bordercolor, and many
more, to style a webpage.
 Each CSS property is separated by a semicolon (;)
Three ways to apply CSS
We can define style in 3 ways
1) In Line
2) By using <style> tag inside the <HEAD> TAG
3) By using external .css file
How to define Comments in CSS File:
/* This is CSS comment */

Commonly used CSS properties:

Class Attribute in HTML


 CSS The HTML class attribute is used to specify a single or multiple class
names for an HTML element.
 You can use this class in CSS with a specific class, write a period (.)
character, followed by the name of the class for selecting elements
 Eg:
. headings {
color: lightgreen;
font-family: cursive;
background-color: black;
}

Multiple Classes
<style>
.fruit{
background-color: orange; <body>
color: white; <p> All three elements have the class name
padding: 10px; "fruit". In addition, Mango also has the class
} name "center", which center-aligns the
text</p>.
.center{ <h2>class="fruit">Orange</h2>
text-align: center; <h2>class="fruit">Apple</h2>
} <h2>class="fruit center">Mango</h2>
</style> </body>

You can see that mango belongs to both the "fruit" class and the "center" class, unlike the other fruits.
1. Various Possible Ways to Specify Color:
1) color: red;
2) color:rgb(244,66,220);
we have to collect values from Google Color Picker
The allowed values are 0 to 255
(0,0,0) = black AND (255,255,255) = white
3) color:rgba(244,66,220,0.9)
a means alpha
The allowed values for an attribute are: 0.0 to 1.0
1.0 means full dark and 0.0 means full light (transparent)
NB// USE THIS LINK FOR COLOR CODE TO USE IN RGBA
http://www.december.com/html/spec/colorrgbadec.html
2. Setting Background and Borders:
In CSS, we can set Background as follows:
body{
background-color:red;
}
We can set Border as follows:
div {
border-color: blue;
border-width: thick;
border-style: double;
}
 The allowed values for border-width are: medium, thin, thick.
 We can also set our own width with pixels. Eg: border-width:10px;
 The allowed values for border-style are: dashed, dotted, groove, double etc
3. Color vs Background:
 color attribute meant for text color.
 background attribute meant for background color
h1{
color: white;
background: blue;
}
4. background image
a. How to set a background image
body {
background:url(https://image.freepik.com/free-psd/abstract-backgrounddesign_1297-73.jpg);
}
b. Various Properties while setting the image
body {
color: white;
background:url(https://image.freepik.com/free-psd/abstract-backgrounddesign_1297-73.jpg);
background-repeat: no-repeat;
background-size: cover;
}
By default, the background image will be repeated. If we don't want to repeat then we should specify:
no-repeat
c. How to Set Border
Normal way:
h1{
border-color: orange;
border-width: 5px;
border-style: solid;
}
short-cut way:
h1{
border: solid red 5px; NB//order is not important
}
To set border for the image:
img{
border: groove 10px blue;
}

Basic CSS Selectors:


1. Element Selectors
Select all instances of given element. i.e. style is applicable for every tag of the specified type.
h1{
color: red;
}
This style applicable for every h1 tag of the html page
2. Class Selector
Select all elements with the given class.
HTML:
<body>
<h1 class="specialh1">Hello This is First Line</h1>
<h1> Hello This is Second Line</h1>
<h1 class="specialh1">Hello This is Third Line</h1>
</body>
CSS:
specialh1{
color: white;
background: blue;
}
Note: element, id and class selectors are considered as basic css selectors.
3. ID Selector
Selects an element with the given Id. But within the HTML Page ID is always unique. html:

HTML
<h1 id="specialh1">Hello This is First Line</h1>
css:
#specialh1{
color: white;
background: blue;
}

Advanced CSS Selectors:


The following are the main important advanced selectors
1) * Selector
2) Descendant Selector
3) Adjacent Selector
4) Attribute Selector
5) nth of type selector

You might also like