| Welcome, Guest |
You have to register before you can post on our site.
|
| Online Users |
There are currently 1581 online users.
» 0 Member(s) | 1579 Guest(s)
Bing, Yandex
|
| Latest Threads |
SELECT statement with MS ...
Forum: MS Access SQL Tutorials
Last Post: Qomplainerz
07-27-2023, 03:35 PM
» Replies: 0
» Views: 1,271
|
SELECT statement with the...
Forum: MS Access SQL Tutorials
Last Post: Qomplainerz
07-27-2023, 03:31 PM
» Replies: 0
» Views: 690
|
Creating hyperlinks in HT...
Forum: HTML5 Tutorials
Last Post: Qomplainerz
07-27-2023, 01:23 PM
» Replies: 0
» Views: 1,024
|
What's new in HTML5?
Forum: HTML5 Tutorials
Last Post: Qomplainerz
07-27-2023, 12:48 PM
» Replies: 0
» Views: 730
|
What is HTML5?
Forum: HTML5 Tutorials
Last Post: Qomplainerz
07-27-2023, 12:43 PM
» Replies: 0
» Views: 659
|
Neck isometric exercises
Forum: Exercises
Last Post: Qomplainerz
07-27-2023, 11:44 AM
» Replies: 0
» Views: 972
|
Shoulder shrug
Forum: Exercises
Last Post: Qomplainerz
07-27-2023, 11:43 AM
» Replies: 0
» Views: 603
|
Neck retraction
Forum: Exercises
Last Post: Qomplainerz
07-27-2023, 11:43 AM
» Replies: 0
» Views: 569
|
Neck flexion and extensio...
Forum: Exercises
Last Post: Qomplainerz
07-27-2023, 11:42 AM
» Replies: 0
» Views: 664
|
Neck rotation
Forum: Exercises
Last Post: Qomplainerz
07-27-2023, 11:42 AM
» Replies: 0
» Views: 624
|
|
|
CSS styling the blog |
|
Posted by: Derp - 08-29-2020, 09:39 PM - Forum: CSS3 Tutorials
- No Replies
|
 |
If you didnt see my HTML Marking UP the blog post
watch it before you watch this post
Code: /* i tag color */
i {
color : red;
}
/* The side navigation menu */
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
/* Sidebar links */
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
/* Active/current link */
.sidebar a.active {
background-color: #ffffff;
color: skyblue;
}
/* Links on mouse-over */
.sidebar a:hover:not(.active) {
background-color: skyblue;
color: white;
}
/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
in css you can add i or a or p after them curly brackets inside them codes to manipulate how they work like here i have made
my" i " tags to print out text in red colors
Code: .sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
well to call it in css use
.your class {
}
as you see in the code
The CSS
properties 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).
All the margin properties can have the following values:
1- auto - the browser calculates the margin
2- length - specifies a margin in px, pt, cm, etc.
3- % - specifies a margin in % of the width of the containing element
4- inherit - specifies that the margin should be inherited from the parent element
Also Negative values are allowed.
To shorten the code, it is possible to specify all the margin properties in one property.
property is a shorthand property for the following individual margin properties:
- margin-topmargin-rightmargin-bottommargin-left
So, here is how it works:
If the
property has four values:
- [b]margin: 25px 50px 75px 100px;[/b]
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
The CSS
properties are used to generate 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)
it also has the same use case as margin
The
property is used for positioning and formatting content e.g. let an image float left to the text in a container.
The
property can have one of the following values:
- left - The element floats to the left of its container
- right - The element floats to the right of its container
- none - The element does not float (will be displayed just where it occurs in the text). This is default
- inherit - The element inherits the float value of its parent
In its simplest use, the
property can be used to wrap text around images.
and if you copy my css and html codes your page should be looks like that
|
|
|
|
Marking UP the Blog in HTML5 |
|
Posted by: Derp - 08-29-2020, 08:51 PM - Forum: HTML5 Tutorials
- Replies (1)
|
|
we will build Simple blog in HTML CSS JS and Jquery which can fall under JS category
lets start by Marking it up
Code: <html>
<head>
<link rel="icon" href="assets/icons/derp.jpeg" type="image/jpeg" sizes="16x16">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Derp Blog</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<!-- The sidebar -->
<div class="sidebar">
<a class="active" href="index.html">Home</a>
<a href="faceboob.html">Facebook News</a>
<a href="about.html">About</a>
</div>
<!-- Page content -->
<div class="content">
HOME PAGE
<div class="post1">
<p> welcome to my simple blog its simple for sure ?</p>
<p> well help yourself here am just expressing how much derps exist in this <i>BEEEEEEEB</i> world ?</p>
</div>
</div>
</body>
</html>
here we added simple sidebar and the
tag defines a division or a section in an HTML document and is used as a container for HTML elements which is then styled with CSS or manipulated with JavaScript and easily styled by using the class or id attribute as we here using the class
Code: <link rel = "stylesheet" type = "text/css" href = "style.css" />
the link tag here used to simply link my css file that contains my CSS codes to get applied during the page load and it should be between the
tags or it will not work
Code: <meta name="viewport" content="width=device-width, initial-scale=1">
Code: <link rel="icon" href="assets/icons/derp.jpeg" type="image/jpeg" sizes="16x16">
Code: <a class="active" href="index.html">Home</a>
while the active class is when you select home page from CSS you will define the background color and text color of the selected
page in the sidebar or navigation bar
Code: <p> welcome to my simple blog its simple for sure ?</p>
<i> </i> tags that showing text in ITALIC font
|
|
|
|
|
