Scribd
Upload
33 views

udemy CSS Properties

css properties

Uploaded by

alwk2787
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
33 views

udemy CSS Properties

css properties

Uploaded by

alwk2787
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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