Learn Basics Of CSS.
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language such as HTML. CSS is a cornerstone of the World Wide Web with HTML and JavaScript.
The CSS layout is designed to enable separation of presentation and content, including colors and fonts.This separation can improve content approach, and flexibility and presentation properties provide control over the specification, enabling the implementation of multiple web pages without specifying the corresponding CSS in a separate .css file as well as enabling complex web pages to reduce the complexity of the construction content between executable file sharing pages and its format. The .css file is temporarily saved to improve page load speed.
What is CSS used for?
CSS forum for layered stylesheets CSS describes how HTML elements should be displayed on screen, paper or other media CSS saves a lot of work. It can control the layout of multiple web pages simultaneously External stylesheets are stored in CSS files
What CSS means?
CSS is used to define the style of your webpages, the design, layout and display the variations for different devices and screen sizes include.
Is CSS a programming language?
If someone can somehow prove that CSS is not a programming language (this is a gray area, if it is your goal, it will not be so difficult to do) then they should feel superior in their “real” matter. Rationalize the fact that they (likely) get paid more than a pre-pre-programmer who specializes in programming skills and CSS. It maintains the position.
selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. Syntax
HTML Comment Tags
p {
color: blue;
font-size: 50px;
}
CSS Selectors
- Simple selectors (select elements by name, ID, class)
- Combinator selectors (selection elements based on a specific relationship between them)
- Dummy class selectors (elements selected on the basis of a particular state)
- Dummy Elements Selectors (an area of an element with select style)
- Attribute selectors (elements selected based on attribute or attribute value)
Id Selector
- The ID selector uses the HTML attributes of an HTML element to select a specific element.
- So the ID selector used to select an individual element is an element ID, a page will be unique!
- To select an element with a specific ID, type a hash (#) character, followed by the element ID.
#para1 {
text-decoration: underline;
color: blue;
}
Class Selector
.center {
background-color: orange;
color: blue;
}
Insert CSS
External CSS
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the element, inside the head section.
<!DOCTYPE html>
<html lang="en">
<head>
<rel="stylesheet" href="mystyle.css">
<title>Document</title>
</head>
<body>
</body>
</html>
An external style sheet can be written in any text editor, and must be saved with a .css extension. The external .css file should not contain any HTML tags. Here is how the "mystyle.css" file looks:
body {
background-color: lightgreen;
}
h1 {
color: orange;
margin-left: 10px;
}
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the head section.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
background-color: lightgreen;
}
h1 {
color: orange;
margin-left: 10px;
}
</style>
</head>
<body>
</body>
</html>
Inline CSS
An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p style="color:blue;text-align:center;">
Hello world!</p>
</body>
</html>
Multi Stylesheet
If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.
<!DOCTYPE html>
<html lang="en">
<head>
<rel="stylesheet" href="mystyle.css">
<rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
</body>
</html>
Overwritting
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default.
Inline is the winner
-----External-----
body {
background-color: lightgreen;
}
h1 {
color: orange;
margin-left: 10px;
}
----Internal----
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1{
color: red;
}
h2{
color: blue;
}
</style>
</head>
<body>
</body>
</html>
----Inline----
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p style="color:blue;text-align:center;">
Hello world!</p>
</body>
</html>
Comment
CSS comments are not displayed in the browser, but they can help document your source code. Comments are used to explain the code, and may help when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment is placed inside the &ly;style> element, and starts with / * and ends with * /:
Color
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. In CSS, a color can be specified by using a predefined color name:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1{
color: red;
}
h2{
color: blue;
}
</style>
</head>
<body>
<h1>Hello Developer!</h1>
<h2>dev</h2>
</body>
</html>
Background-Color
You can set the background color for HTML elements:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1{
background-color: red;
}
p{
background-color: blue;
}
</style>
</head>
<body>
<h1>Hello Developer!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
</body>
</html>
Border-Color
Set Border Color
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p style="border:2px solid blue;">
Hello world!</p>
</body>
</html>
Color-values & Opacity
Block
In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1 style="background-color:#ff6347;">
Hello Developer</h1>
<h2 style="background-color:hsl(9, 100%, 64%);">
Hello Developer</h2>
<p style="background-color:rgb(255, 99, 71);">
Hello world!</p>
<p style="background-color:rgb(255, 99, 71);">
Hello world!</p>
<img src="images/boy.jpg "style="opacity: 0.5;">
Hello world!</img>
<p style="background-color:rgb(255, 99, 71, 0.5);">
Hello world!</p>
</body>
</html>
CSS UNITS
Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.Length is a number followed by a length unit, such as 10px, 2em, etc.
Absolute Unit
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
| Unit | Define |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
Relative UNITS
Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.
| Unit | Define |
|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size ofthe current font) |
| ex | Relative to the x-height of the current font (rarely used) |
| rem | Relative to font-size of the root element |
| vw | Relative to 1% of the width of the viewport* |
| vh | Relative to 1% of the height of the viewport* |
| % | Relative to the parent element |
Box-Model
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Margin
Margins are used to create space around elements, outside of any defined borders.With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left). auto - the browser calculates the margin length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Padding
Padding is used to create space around an element's content, inside of any defined borders.With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Width & Height
The CSS height and width properties are used to set the height and width of an element.
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
Outline
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".outline-style,outline-color,outline-width,outline-offset,outline
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
p.dotted {outline-style: dotted;outline-width: 50px;}
p.dashed {outline-style: dashed;outline-color: orange;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<p class="dotted";>Hello Developer!</p>
<p class="dashed";>Hello Developer!</p>
<p class="solid";>Hello Developer!</p>
<p class="double";>Hello Developer!</p>
<p class="groove";>Hello Developer!</p>
<p class="ridge";>Hello Developer!</p>
<p class="inset";>Hello Developer!</p>
<p class="outset";>Hello Developer!</p>
</body>
</html>
Text-Alignment
The text-align property is used to set the horizontal alignment of a text.A text can be left or right aligned, centered, or justified.
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
div {
text-align: justify;
}
Vertical-Alignment
The vertical-align property sets the vertical alignment of an element.
h1 {
vertical-align: baseline;
}
h2 {
vertical-align: text-top;
}
h4 {
vertical-align: text-bottom;
}
h3 {
vertical-align: sub;
}
h5 {
vertical-align: super;
}
Text-Decoration
The text-decoration property is used to set or remove decorations from text.
a {
text-decoration: none;
}
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Text-Transform
The text-transform property is used to specify uppercase and lowercase letters in a text.
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Spacing
p {
text-indent: 50px;
}
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
p.small {
line-height: 0.8;
}
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
p {
white-space: nowrap;
}
Shadow
The text-shadow property adds shadow to text.
h1 {
text-shadow: 2px 2px;
}
h1 {
text-shadow: 2px 2px red;
}
h1 {
text-shadow: 2px 2px 5px red;
}
Fonts
Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
Font Style
The font-style property is mostly used to specify italic text.
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
Font Size
The font-size property sets the size of the text.
h1 {
font-size: 40px;
}
h2 {
font-size: 3em;
}
p {
font-size: 5%;
}
CSS Icons
The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous">
</script>
</head>
<body>
</body>
</html>
Link
Links can be styled with any CSS property (e.g. color, font-family, background, etc.). a:link - a normal, unvisited link, a:visited - a link the user has visited, a:hover - a link when the user mouses over it, a:active - a link the moment it is clicked,
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
List
Set different list item markers for ordered lists, Set different list item markers for unordered lists, Set an image as the list item marker, Add background colors to lists and list items,
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Table
To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}
td {
height: 50px;
vertical-align: bottom;
}
Display
The display property specifies if/how an element is displayed.
li {
display: inline;
}
span {
display: block;
}
a {
display: block;
}
a {
display: none;
}
h1.hidden {
visibility: hidden;
}
a {
display: inline-block;
}
Poperty
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
div.static {
position: static;
border: 3px solid blue;
}
div.relative {
position: relative;
left: 30px;
border: 3px solid blue;
}
div.fixed {
position: fixed;
botton:0;
right:0;
border: 3px solid blue;
}
div.absolute {
position: absolute;
left: 30px;
border: 3px solid blue;
}
div.sticky {
position: sticky;
top: 0;
border: 3px solid blue;
}
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Float
The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.
img {
float: right;
}
img {
float: left;
}
img {
float: none;
}
Align
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
.center {
text-align: center;
border: 3px solid green;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Combinators
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
Descendant Selector
div p {
background-color: yellow;
}
Child Selector (>)
div > p {
background-color: yellow;
}
Adjacent Sibling Selector (+)
div + p {
background-color: yellow;
}
General Sibling Selector (~)
div ~ p {
background-color: yellow;
}
Pseudo-classes
A pseudo-class is used to define a special state of an element.
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
a.highlight:hover {
color: #ff0000;
}
p:first-child {
color: blue;
}
p i:first-child {
color: blue;
}
Pseudo-element
The ::after pseudo-element can be used to insert some content after the content of an element.The ::before pseudo-element can be used to insert some content before the content of an element.
h1::before {
content: url(smiley.gif);
}
h1::after {
content: url(smiley.gif);
}
::selection {
color: red;
background: yellow;
}
Related Articles
-
Learn HTML It's Essential.
-
Basics Of CSS.
Adhuc quaerendum est ne, vis ut harum tantas noluisse, id suas iisque mei. Nec te inani ponderum vulputate, facilisi expetenda has et. Iudico dictas scriptorem an vim, ei alia mentitum est, ne has voluptua praesent.
Sumo euismod dissentiunt ne sit, ad eos iudico qualisque adversarium, tota falli et mei. Esse euismod urbanitas ut sed, et duo scaevola pericula splendide. Primis veritus contentiones nec ad, nec et tantas semper delicatissimi.
Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.